46

移动屏幕尺寸有很多不同的媒体查询。在设计响应式移动网站时，容纳所有这些可能会让人不知所措。在为移动设备设计时，哪些是最重要的？我发现这篇文章很好地概述了可用的媒体查询：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 */
}
4

3 回答 3

91

我建议在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 的文档中查看。

于 2012-08-21T02:34:56.600 回答
9

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

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

  3. 随着事情移动到 10 英寸或更小，重新设计手指而不是鼠标的按钮和交互组件。@media (max-width: 767px) { ... }

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

  5. 最后，查看您的媒体查询，看看它们中的一些是否可以组合在一起（即，如果您有一个宽度为 750 和 767 像素的查询，那么您最好将它们组合到 767 中）。

如果您对 jQuery 感到满意，您可以添加

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

获取当前屏幕尺寸。添加一些额外的像素以获得良好的测量效果。

于 2013-10-28T21:52:21.057 回答
6

@cjlarose 引用的第一个 Twitter Bootstrap 代码假定您已经为宽度在 980 像素和 1200 像素之间的显示器构建了主 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) {
}

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

我没有包括视网膜显示代码。如果您在高分辨率显示器上将普通分辨率图像切换为高分辨率图像，这很有用，但否则它并不是那么有用。

于 2014-01-31T05:27:20.020 回答