css - 与媒体查询一起使用的好的分辨率值是什么？

Question

最近我一直在玩 CSS Media Queries，因为它是让我的网站适应各种屏幕尺寸的好方法。我计划将它们实施到实时版本中。

我的问题是：布局更改时是否有任何推荐的分辨率值？

Answer 1

请参阅这篇文章以获取模板“320 及以上” - 由Andy Clarke撰写，许多开发人员和设计师都在使用它：http: //www.stuffandnonsense.co.uk/blog/about/this_is_the_new_320_and_up

如果您向下滚动到媒体查询部分，您会看到它们使用了五个 CSS3 媒体查询增量（480、600、768、992 和 1382 像素）。通常我只坚持 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

试试这个带视网膜显示器的

/* 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;
  }
}

*/

如语法示例所示，您可以组合所有这些较少的变量并获得复杂的媒体查询。对 AND 逻辑运算符使用“and”，对 OR 使用逗号。您可以组合不同的屏幕分辨率、设备方向（横向/纵向）和视网膜或非设备。

此代码也很容易配置，因为您可以编辑/添加/删除屏幕范围值来管理不同的屏幕分辨率。