媒体查询和Bootstrap有什么区别？ [英] What's the difference between media queries and Bootstrap?

问题描述

让我感到奇怪的是，什么使CSS3 Media Queries和Bootstrap有所不同。我去过很多网站，但每个人都说，两者都是为了响应网站。如果是出于相同的原因，为什么两者都存在以进行响应。我觉得这两者之间存在一些主要差异。谁在两种用法中排名第一？媒体查询还是自举？卡在我心中没有间隙。寻求解释！！！

Strange To Bug my mind that, what makes the difference between CSS3 Media Queries and Bootstrap. I've Been Into so many Websites but everyone says that, both are for responsiveness of the website. If it is for same cause, why both are existing for responsiveness. I feel some major difference is there in between these two. Who ranks first among both in usage? Media Queries or Bootstrap? Stuck without clearance in my mind. Seeking for the explanation!!!

推荐答案

将引导程序视为站点的框架或骨架，它可以帮助您的布局在某些预设的断点处重新排列以显示在在不同的屏幕尺寸或设备上使用不同的方式。它是通过使用媒体查询来实现此目的的，这些媒体查询会以各种像素大小重新排列布局的某些元素。

Think of bootstrap as the frame or skeleton of the site, it helps your layout to rearrange at certain preset breakpoints to appear in different ways on different screen sizes or devices. It achieves this through the use of media queries that rearrange certain elements of the layout at various pixel sizes.

实际上不建议编辑核心引导文件，因此您可以用您自己的CSS编写媒体查询以重新设置内容样式。它们用于在某些条件下将CSS样式应用于元素，例如，一旦屏幕宽度降至414px以下，这将更改字体大小。

It's not really recommended to edit the core bootstrap files, so you can write your media queries in your own CSS to restyle your content. They are used to apply CSS styles to elements at certain conditions, for example this would alter the font-size once the screen width dips below 414px.

p {
font-size: 12px
}

@media screen and (max-width: 414px) {
        p {
            font-size: 16px;
        }
}

这可以用于多种用途，一个很好的用途是增加元素的大小，以便在移动设备上轻松使用。

This can be used for a huge number of purposes, a good use is increase the size of elements for easier use on a mobile sized device.

因此，将它们组合在一起，您可以使用bootstrap将3列布局分解为移动设备的一栏全宽版式。然后，仅可以使用媒体查询来应用特定于该布局的样式。

So to pull it all together you may use bootstrap to break your 3 column layout into a one column full width layout for mobile devices. And then you can apply styles that are specific to that layout only using a media query.

这篇关于媒体查询和Bootstrap有什么区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！