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

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

*/ 

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

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