哪些是用于创建移动响应式设计的最重要的媒体查询？

Question

移动屏幕尺寸有很多不同的媒体查询.在设计响应式移动网站时,容纳所有这些内容可能会令人难以招架.在设计移动设备时,哪些是最重要的？我发现这篇文章可以很好地概述可用的媒体查询: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 */
}

Answer 1

我建议在Twitter的Bootstrap之后只使用这四个媒体查询:

/* 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) { ... }

编辑:原始答案(上面)取自Bootstrap版本2.自此,Bootstrap在版本3中更改了它们的媒体查询.请注意,对于小于768px的设备没有明确的查询.这种做法有时被称为移动优先.任何媒体查询之外的所有内容都将应用于所有设备.媒体查询块内的所有内容都会扩展并覆盖全局可用内容以及所有较小设备的样式.将其视为响应式设计的渐进增强.

/* 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) { ... }

在Bootstrap 3的文档上查看它.

Answer 2

1. 以百分比设计,最初针对15"+屏幕进行了优化.

2. 查看您希望在手机上看到的组件 - 只需保留基本内容并删除不起作用的元素或使小屏幕混乱.这些样式可以包含在@media(max-width:480px){...}中

3. 当事情变为10"或更小时,重新设计按钮和手指而不是鼠标的交互式组件.@ media(max-width:767px){...}

4. 缩小浏览器的宽度.如果事情看起来不那么好,请进入控制台并找出可以更改的样式或需要重新设计或删除的项目.标记它们出现的屏幕宽度并创建媒体查询.

5. 最后,检查您的媒体查询,看看它们中的一些是否可以组合在一起(例如,如果您有一个宽度为750和767像素的图像,您可能也可以将它们组合在767中).

如果你觉得w jQuery很舒服,你可以添加

$(window).resize(function(){
  console.log($(window).width());
}); 

获取当前屏幕大小.添加一些额外的像素以获得良好的效果.

Answer 3

@cjlarose引用的第一个Twitter Bootstrap代码假设您已经为980px到1200px宽的显示器构建了主CSS,因此您基本上从桌面设计开始,并从中调整其他所有内容.

我很高兴看到Twitter已经在Bootstrap 3中改为"移动优先".它是最流行的媒体查询方法之一,也是我喜欢的方式.您从最小的尺寸开始,而不是从桌面开始.

请注意,您的特定网站可能需要与此处或任何其他列表中列出的查询不同的查询.您应该根据内容需求添加查询,而不是基于任何设置模板.

以下是我发现最有用的一些媒体查询.这只是一些例子:

/* Start with baseline CSS, for the smallest browsers. 
   Sometimes I put this into a separate css file and load it first.
   These are the "mobile first" styles. */

...


/* Then progressively add bigger sizes from small to large */

/* Smartphones start somewhere around here */
@media (min-width: 300px) {
}

/* You might do landscape phones here if your content seems to need it */
@media (min-width: 450px) {
}

/* Starting into tablets somewhere in here */
@media (min-width: 600px) {
}

/* Perhaps bigger tablets */
@media (min-width: 750px) {
}

/* Desktop screen or landscape tablet */
@media (min-width: 900px) {
}

/* A bit bigger if you need some adjustments around here */
@media (min-width: 1100px) {
}

/* Widescreens */
@media (min-width: 1500px) {
}

最重要的是您可能不需要所有这些,或者您可能希望根据内容的外观更改数字.我认为关于断点的数量或位置确实没有任何真正的规则.我现在正在做一个网站,恰好只需要一个断点,因为内容非常简单,但我也做过看起来更像上面代码的网站.

我没有包含视网膜显示代码.如果您在高分辨率显示器上为高分辨率图像切换正常分辨率图像,那将非常有用,但除此之外它不是那么有用.