这是在创建移动响应式设计使用的最重要的媒体查询？(Which are the most import

有移动屏幕尺寸有很多不同的媒体查询。它可以是压倒性的设计灵活的移动网站时要容纳所有的人。这是设计用于移动时使用的最重要的？我发现这篇文章，做概述可用媒体查询的一个不错的工作： 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的引导这四条媒体查询：

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

编辑：原答案（上面）从引导版本2.采取引导已经改变了他们的媒体查询版本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) { ... }

检查出来的引导3的文档。

Answer 2:

以百分比设计和最初的15" 屏幕+优化。
检查你想看到手机上的哪些组件 - 只要保持基本内容，并删除不工作或杂乱的小屏幕元素。这些样式可以包含@media内（最大宽度：480像素）{...}
随着事态的移动到10" 或更小，重新设计你的按钮和交互式组件手指而不是鼠标@media（最大宽度：767px）{...}
收缩你的浏览器的宽度。当事情没有看起来那么好，拿在控制台，弄清风格可以改变或重新设计需要的物品或删除。马克它们出现在并创建一个媒体查询什么屏幕宽度。
最后，检查您的媒体查询，看看其中的一些可以组合在一起（即，如果你有一个在750首767个像素宽度，你还不如他们在767组合）。

如果您熟悉W¯¯jQuery的可以加

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

得到当前的屏幕尺寸。添加一些额外的像素的良好措施。

Answer 3:

通过@cjlarose引用的第一个Twitter的引导代码假定你已经建立你的主要CSS的显示是980px和1200像素宽之间，所以你基本上与台式机的设计开始，适应所有其他的从它。

我很高兴看到Twitter已经改变为“移动第一”的引导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) {
}

最重要的是，你可能并不需要所有的这些，或者你可能会根据你的内容是什么样的改变号码。我不认为大概有多少或者把你的断点任何真的很难规则。我在做一个网站，现在出现这种情况只需要一个断点，因为它的内容很简单，但我也这样做了看起来更像上面的代码的网站。

我不包括视网膜显示的代码。如果你在高分辨率的显示切换，带给您高清晰度图像正常分辨率的图像是非常有用的，但除此之外，它是不是真的那么有用。

文章来源: Which are the most important media queries to use in creating mobile responsive design?