CSS 媒体查询 - 订单很重要? [英] CSS media queries - Order matters?
问题描述
现在经常使用 CSS 媒体查询，我想知道它们的最佳使用顺序是什么.
Working a lot now with CSS media queries, I wondered in which order it's best to use them.
方法一
@media only screen and (min-width: 800px) {
#content { ... }
#sidebar { ... }
}
@media only screen and (max-width: 799px) {
#content { ... }
#sidebar { ... }
}
像这样，代码显然更短，但是使用大量 CSS 时，您最终会将一个容器的 CSS 扩展到样式表中的多个位置.
Like this obviously the code is shorter, but with a lot of CSS you end up having the CSS of one container spread to multiple places in your stylesheet.
方法二
@media only screen and (min-width: 800px) {
#content { ... }
}
@media only screen and (max-width: 799px) {
#content { ... }
}
@media only screen and (min-width: 800px) {
#sidebar { ... }
}
@media only screen and (max-width: 799px) {
#sidebar { ... }
}
像这样，如果您为每个新容器指定屏幕大小(CSS 处于活动状态时)，在我看来，概述要好得多.但是使用大量 CSS 时，您将多次使用 @media 查询.
Like this if you specify the screen size (at which the CSS is active) for each container a new, the overview in my humble opinion is much better. But with a lot of CSS you will use the @media query dozens and dozens times.
第二种方法是否会导致加载时间明显延长或有任何其他缺点?
Does the second method cause significantly longer load time or has any other disadvantages?
我可能还不够清楚.我的问题并不真正涉及订单或查询本身，也不涉及覆盖 CSS 声明.我想知道的是其他人如何将媒体查询声明"包含到他们的 css 中的规范.
I might have been not clear enough. My question doesn't really concern the order or the queries as such or about overwriting CSS declarations. What I wonder about is rather the norms how other people include the media query "statments" into their css.
假设我只有一个断点可以切换一些 CSS.所以我有一个 min:800px 的媒体查询和一个 max:799px 的媒体查询.
Lets say I have only one breaking point where I switch some CSS. So I have one media query for min:800px and a second for max:799px.
我是否应该同时使用两个查询语句"
Should I use both query "statements"
@media only screen and (min-width: 800px) { ... }
@media only sreen and (max-width: 799px) { ... }
在我的整个样式表中只包含一次并将所有容器的所有 CSS 包含到两个媒体查询statments"中?或者也可以多次使用媒体查询statments"?
only once in my whole stylesheet and include ALL the CSS for ALL containers into the two media query "statments"? Or is it okay as well to use the media query "statments" mutiple times?
我的意思是不要在样式表中制作两个单独的区域(一个用于 CSS 上方，一个用于低于 800px)，如果对多次使用媒体查询语句"的方法有任何顾虑(对于每个部分再次访问页面，例如内容、小部件等以使它们具有响应性)?
我只想在样式表的两个不同部分中使用 800 像素以上和 800 像素以下的 CSS.
I mean instead of making two seperate areas in the stylesheet (one for CSS above and one for below 800px), if there are any concerns about the method of using the media query "statments" instead multiple times (for each part of the page again, like for Content, Widgets etc to make them responsive)?
I would just like to have the CSS for above and below 800px in two different parts of my stylesheet.
我知道这两种方法都在工作，我只是对规范感到好奇，如果在 CSS 表中使用媒体查询声明"数十或数百次(而不是在我刚刚提到的情况下仅使用两次)将增加加载时间?
I know that ofc both methodes are working, I am jsut curious about the norms and if using the media query "statements" dozens or hundreds of times within a CSS sheet (instead of just twice in the case I jsut mentioned) will increase the loading times?
推荐答案
与我给出的 answer 完全相同 此处 可以应用于您的问题:
Exactly the same answer that I gave it here can be applied to your question:
以下是您应该如何使用媒体查询:
Here is how you should use media queries:
记住使用您喜欢/需要的尺寸.以下仅用于演示目的.
Remember use the sizes you like/need. This below is just for demo purposes.
非移动优先方法使用max-width:
Non-Mobile First Method using max-width:
/*========== Non-Mobile First Method ==========*/
@media only screen and (max-width: 960px) {
/*your CSS Rules*/
}
@media only screen and (max-width: 768px) {
/*your CSS Rules*/
}
@media only screen and (max-width: 640px) {
/*your CSS Rules*/
}
@media only screen and (max-width: 480px) {
/*your CSS Rules*/
}
@media only screen and (max-width: 320px) {
/*your CSS Rules*/
}
移动优先方法使用min-width:
Mobile First Method using min-width:
/*========== Mobile First Method ==========*/
@media only screen and (min-width: 320px) {
/*your CSS Rules*/
}
@media only screen and (min-width: 480px) {
/*your CSS Rules*/
}
@media only screen and (min-width: 640px) {
/*your CSS Rules*/
}
@media only screen and (min-width: 768px) {
/*your CSS Rules*/
}
@media only screen and (min-width: 960px) {
/*your CSS Rules*/
}
这是一个很好的教程来自W3.org
Here is a good tutorial from W3.org
基于您编辑的问题:
Based on your edited question:
我想这取决于每个开发人员以及他们如何需要/认为开发他/她的项目.
I guess this depends on each developer and how they need/think to develop his/her project.
这是我用来做的(不使用预编译器时):
我创建了一个文件 styles.css，其中包含将应用于项目的一般样式，如下所示:
I create a file styles.css which includes the general styles that will apply to the project like this:
/*========== All Screens ==========*/
{
/*General CSS Rules*/
}
然后使用下面的媒体查询，使用上面解释的非移动或移动方法(在我的情况下，我通常使用非移动方法).
then having the media queries below, either using the non-mobile or mobile approach method explained above (in my case I usual use the non-mobile approach method) .
但是，根据项目的不同，除了标准"之外，您可能还需要其他一些休息时间.这可以引导您按照您提到的方式使用规则.
But, depending on the projects you may need to have some other breaks besides the "standard" which can led you to use the rules in the way you mentioned.
此外，有些开发人员更喜欢将文件分成 2 个文件，一个是通用样式的 CSS，另一个是 media queries 样式.
Plus there are developers who prefer to separate into 2 files, the one with general styles CSS and other one with media queries styles.
重要提示:与创建具有一般样式的文件 + 1 media queries(min-width:800px 或 max-width:799px)，然后只有一个包含 2 个媒体查询的文件(min-width:800px/max-width:799px)，其中是当您拥有适用于所有 widths 的一般规则时，因此您只需要为 1 个 media queries 设置规则.
Important: There is one difference from creating a file with general styles + 1 media queries (min-width:800px or max-width:799px), then only having a file with 2 media queries(min-width:800px/max-width:799px), which is when you have the general rules it will apply to ALL widths, therefore you just need to set the rules for 1 media queries.
根据您的上一条评论，我可以给您的答案是明智的，因此我能为您做的最好的事情就是给您一些文章，以便您对这个主题有自己的看法:
Based on your last comment,the answer i could give you would be opinion-wised, so the best I can do for you is to give you a few articles so you can have your own opinion on this topic:
这篇关于CSS 媒体查询 - 订单很重要?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
