CSS 与媒体查询一起使用的良好分辨率值是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11384720/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What are good resolution values to use with media queries?
提问by Sven
Recently I've been playing around with CSS Media Queries because it's a great way to make my website adapt to various screen sizes. I am planning to implement them into the live version.
最近我一直在玩 CSS 媒体查询，因为它是使我的网站适应各种屏幕尺寸的好方法。我计划将它们实施到实时版本中。
My question is: Are there any recommended resolution values at which the layout changes?
我的问题是：布局更改时是否有任何推荐的分辨率值？
回答by Suvi Vignarajah
See this article for a template '320 and Up' - by Andy Clarke, it's used by many developers and designers: http://www.stuffandnonsense.co.uk/blog/about/this_is_the_new_320_and_up
请参阅本文以获取模板“320 和向上” - 由Andy Clarke撰写，许多开发人员和设计师都使用它：http: //www.stuffandnonsense.co.uk/blog/about/this_is_the_new_320_and_up
If you scroll down to the media queries section you'll see they use five CSS3 Media Query increments (480, 600, 768, 992 and 1382px). Typically I stick to just 4 (480, 600, 768, 1024).
如果您向下滚动到媒体查询部分，您会看到它们使用了五个 CSS3 媒体查询增量（480、600、768、992 和 1382px）。通常我只使用 4（480、600、768、1024）。
To explain the ranges:
解释范围：
min-width: 480px: Will target mobile devices in landscape mode and up
min-width: 480px：将针对横向模式及以上模式的移动设备
min-width: 600px: Targets tablets in portrait mode and up
min-width: 600px：以纵向模式及以上模式定位平板电脑
min-width: 768px: Targets tablets in landscape mode and up
min-width: 768px：以横向模式及以上模式定位平板电脑
min-width: 1024px: Targets the desktop view
min-width: 1024px: 以桌面视图为目标
And typically I will have my mobile portrait view CSS at the very beginning (hence the term "320 and up").
通常我会在一开始就有我的移动纵向视图 CSS（因此术语“320 及以上”）。
回答by williamium
I would just like to add to Suvi's answer.
我只想补充 Suvi 的答案。
Adaptive Design applies media queries to targeted resolutions however with Responsive Design you are free to add the breakpoints wherever you feel is necessary.
自适应设计将媒体查询应用于目标分辨率，但是通过响应式设计，您可以在任何需要的地方自由添加断点。
There is no rule as to how many breakpoints a page should have, but one should be added wherever the layout breaks. The aim is to make sure the design and content flows nicely regardless of the width of the viewport.
一个页面应该有多少个断点没有规则，但应该在布局中断的地方添加一个。目的是确保无论视口的宽度如何，设计和内容都能很好地流动。
I think this post provides a good overview:
我认为这篇文章提供了一个很好的概述：
http://www.williamwalker.me/blog/an-introduction-to-responsive-design.html
http://www.williamwalker.me/blog/an-introduction-to-responsive-design.html
回答by Mo.
Try this one with retina display
用视网膜显示试试这个
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Hope you are fine
希望你好好的
回答by Marco Allori
I wrote this less solution:
我写了这个较少的解决方案：
/* screens range */
@screen-s-max: 20em; /* 320px */
@screen-min: 20.063em; /* 321px */
@screen-max: 40em; /* 640px */
@screen-m-min: 40.063em; /* 641px */
@screen-m-max: 64em; /* 1024px */
@screen-l-min: 64.063em; /* 1025px */
@screen-l-max: 90em; /* 1440px */
@screen-xl-min: 90.063em; /* 1441px */
@screen-xl-max: 120em; /* 1920px */
@screen-xxl-min: 120.063em; /* 1921px */
/*
0----- smallmobile -----320----- mobile -----640----- tablet -----1024----- notebook -----1440----- desktop -----1920----- wide
*/
@onlyScreen: ~"only screen";
@smallmobile: ~"(max-width: @{screen-s-max})";
@mobile: ~"(min-width: @{screen-s-max}) and (max-width: @{screen-max})";
@tablet: ~"(min-width: @{screen-m-min}) and (max-width: @{screen-m-max})";
@notebook: ~"(min-width: @{screen-l-min}) and (max-width: @{screen-l-max})";
@desktop: ~"(min-width: @{screen-xl-min}) and (max-width: @{screen-xl-max})";
@wide: ~"(min-width: @{screen-xxl-min})";
@portrait: ~"(orientation:portrait)";
@landscape: ~"(orientation:landscape)";
@highdensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
~"only screen and (min--moz-device-pixel-ratio: 1.5)",
~"only screen and (-o-min-device-pixel-ratio: 3/2)",
~"only screen and (min-device-pixel-ratio: 1.5)";
@mobile-and-more: ~"(min-width: @{screen-min})";
@tablet-and-more: ~"(min-width: @{screen-m-min})";
@notebook-and-more: ~"(min-width: @{screen-l-min})";
@desktop-and-more: ~"(min-width: @{screen-xl-min})";
/*
syntax example
@media @onlyScreen and @tablet and @portrait , @notebook and @landscape, @mobile and @landscape{
body{
opacity: 0.8;
}
}
*/
As shown in syntax example you can combine all these less variables and obtain complex media query. Use "and" for AND logic operator and comma for OR. You can combine different screen resolutions, device orientation (landscape/portrait) and retina or not devices.
如语法示例所示，您可以组合所有这些较少的变量并获得复杂的媒体查询。AND 逻辑运算符使用“and”，OR 使用逗号。您可以组合不同的屏幕分辨率、设备方向（横向/纵向）和视网膜或非设备。
This code is also easy configurable cause you can edit/add/remove screens range values to manage different screen resolutions.
此代码也很容易配置，因为您可以编辑/添加/删除屏幕范围值来管理不同的屏幕分辨率。
