哪些是用于创建移动响应设计的最重要的媒体查询？ [英] Which are the most important media queries to use in creating mobile responsive design?

问题描述

移动屏幕尺寸有很多不同的媒体查询。当设计响应式移动网站时，可能会压倒所有人。在设计移动设备时，最重要的是哪些？我发现这篇文章很好地概述了可用的媒体查询： http： //css-tricks.com/snippets/css/media-queries-for-standard-devices/ 。

  / *智能手机（纵向和横向）----------- * / 
 @media只有屏幕
和（min-device-width：320px）
和max-device-width：480px）{
 / *样式* / 
} 
 
 / *智能手机
 @media only screen 
 and（min-width：321px）{
 / * Styles * / 
} 
 
 / *智能手机---------- * / 
 @media只屏幕
和（max-width：320px）{
 / *样式* / 
} 
 
 / * iPad（纵向和横向）----------- * / 
 @media只有屏幕
和（min-device-width：768px）
和（max-device-width：1024px）{
 / *样式* / 
} 
 
 / * iPads（横向）--------- -  * / 
 @media only screen 
 and（min-device-width：768px）
 and（max-device-width：1024px）
 and（orientation：landscape） {
 / *样式* / 
} 
 
 / * iPads（纵向）----------- * / 
 @media 
 and（min-device-width：768px）
 and（max-device-width：1024px）
 and（orientation：portrait）{
 / * Styles * / 
} 
 
 / *台式机和笔记本电脑----------- * / 
 @media只有屏幕
和（min-width：1224px）{ 
 / *样式* / 
} 
 
 / *大屏幕----------- * / 
 @media只有屏幕
和（min-width：1824px）{
 / *样式* / 
} 
 
 / * iPhone 4 ----------- * / 
 @media 
仅屏幕和（-webkit-min-device-pixel-ratio：1.5），
仅屏幕和（min-device-pixel-ratio：1.5）{
 / *样式* / 
} 
  

解决方案

I建议仅 Twitter的Bootstrap 使用这四个媒体查询：

  / *景观手机和降级* / 
 @media（max-width：480px）{...} 
 
 / *横向手机到纵向平板电脑* / 
 @media（max-width：767px）{...} 
 
 / *纵向平板电脑到横向和桌面* / 
 @媒体（最小宽度：768像素）和（最大宽度：979像素）{...} 
 
 / *大型桌面* / 
 @media（min-width：1200px）{。 ..} 
  

编辑：此问题的原始答案取自Bootstrap版本2. Bootstrap更改了版本3中的媒体查询。请注意，对于小于768像素的设备，没有显式查询。这种做法有时被称为移动优先。任何媒体查询以外的任何内容都会应用于所有设备。媒体查询块中的所有内容都会扩展并覆盖全局可用的内容以及所有较小设备的样式。

  / *超小型设备（手机，小于768像素）* / 
 / *没有媒体查询，因为这是Bootstrap中的默认值* / 
 
 / *小设备（平板电脑，768像素及以上）* / 
 @media（min-width：768px） {...} 
 
 / *中型设备（台式机，992px及以上）* / 
 @media（min-width：992px）{...} 
 
 / *大型设备（大型桌面，1200像素及以上）* / 
 @media（min-width：1200px）{...} 
  

请参阅 Bootstrap 3的文档。 p>

There are a lot different media queries for mobile screen sizes. It can be overwhelming to accomodate all of them when designing a responsive mobile site. Which are the most important ones to use when designing for mobile? I found this article that does a pretty good job of outlining the available media queries: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/.

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

解决方案

I'd recommend taking after Twitter's Bootstrap with just these four media queries:

/* Landscape phones and down */
@media (max-width: 480px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Large desktop */
@media (min-width: 1200px) { ... }

Edit: The original answer to this question was taken from Bootstrap version 2. Bootstrap has since changed their media queries in version 3. Notice that is there is no explicit query for devices smaller than 768px. This practice is sometimes called mobile-first. Everything outside of any media query is applied to all devices. Everything inside a media query block extends and overrides what is available globally as well as styles for all smaller devices. Think of it as progressive enhancement for responsive design.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

Check it out on Bootstrap 3's docs.

这篇关于哪些是用于创建移动响应设计的最重要的媒体查询？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！