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和1382px）。通常我坚持只有4（480,600,768,1024）。

解释范围：

min-width: 480px：将横向模式定位移动设备

min-width: 600px：以纵向模式向上定位平板电脑

min-width: 768px：以横向模式向上定位平板电脑

min-width: 1024px：定位桌面视图

通常我会在最开始时使用移动纵向视图CSS（因此称为“320及以上”）。

Answer 2

我想补充一下Suvi的答案。

自适应设计将媒体查询应用于目标分辨率，但使用自适应设计，您可以随时在您认为必要的地方添加断点。

没有关于页面应该有多少个断点的规则，但是应该在布局中断的地方添加一个断点。无论视口的宽度如何，目的都是确保设计和内容流畅。

我认为这篇文章提供了一个很好的概述：

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

*/

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

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

什么是用于媒体查询的好分辨率值？

4 个答案: