最近我一直在玩弄CSS媒体查询，因为它让我的网站适应各种屏幕尺寸的好方法。 我打算执行它们进入现场版。
我的问题是：是否有任何建议的分辨率值在其布局的变化？
Answer 1:
请参阅本文为模板“320及以上” -由安迪·克拉克 ，它是由许多开发者和设计者： http://www.stuffandnonsense.co.uk/blog/about/this_is_the_new_320_and_up
如果向下滚动到媒体查询部分你会看到他们用五年CSS3媒体查询增量（480，600，768，992和1382px）。 通常我坚持只4（480，600，768，1024）。
为了解释的范围：
min-width: 480px ：将针对在横向模式下和向上移动设备
min-width: 600px ：在纵向模式和向上目标片剂
min-width: 768px ：在横向模式下和高达目标片剂
min-width: 1024px ：定位在桌面视图
而且通常我会有我的手机纵向视图CSS在开始的时候（因此称为“320及以上”）。
Answer 2:
我只是想添加到苏维的答案。
自适应设计适用于媒体查询到有针对性的分辨率然而，随着响应式设计，你可以自由添加任何你觉得是必要的断点。
没有规则，以一个页面应该有多少个断点有，但应该被添加的地方布局休息。 其目的是确保设计和内容流很好地不论视口的宽度的。
我觉得这个帖子提供了一个很好的概述：
http://www.williamwalker.me/blog/an-introduction-to-responsive-design.html
Answer 3:
试试这一个配备Retina显示屏
/* 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 */
}
希望你好好的
Answer 4:
我写这少的解决方案：
/* 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;
}
}
*/
作为语法示例所示，你可以将所有这些不太变量，并获得复杂的媒体查询。 使用“和”与逻辑运算符和逗号为OR。 您可以结合不同的屏幕分辨率，设备方向（横向/纵向）和视网膜或没有设备。
这段代码也很容易配置，因为你可以编辑/添加/删除屏幕范围的值来管理不同的屏幕分辨率。
文章来源: What are good resolution values to use with media queries?
