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.
方法1
@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.
方法2
@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. 因此，我对一个媒体查询的最小要求是:800px，对第二个媒体查询的最大值是: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都包含在两个媒体查询语句"中? 还是多次使用媒体查询语句"还可以吗?
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)再次访问该页面，例如内容"，小部件"等，以使其具有响应性)?
我只想在样式表的两个不同部分中使用高于和低于800px的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?
推荐答案
与我给它的答案完全相同可以将href ="https://stackoverflow.com/questions/28016406/problems-with-media-queries/">此处应用于您的问题:
Exactly the same answer that I gave it here can be applied to your question:
这是您应该使用媒体查询的方法:
记住使用您喜欢/需要的尺寸.以下仅用于演示 目的.
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*/
}
然后使用下面介绍的 non-mobile 或 mobile 方法(在我的情况下，我通常使用non-mobile方法)使用下面的media queries ).
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.
另外，有些开发人员更喜欢将文件分成两个文件，一个文件具有通用样式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))的文件，然后仅包含具有两个媒体查询的文件(min-width:800px /max-width:799px)，这是当您具有通用规则时，它将应用于ALL 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屋！
