哪些是用于创build移动响应devise的最重要的媒体查询？
手机屏幕尺寸有很多不同的媒体查询。 在devise响应式移动网站时，可以容纳所有人。 移动devise时最重要的是哪些？ 我发现这篇文章能很好地概述可用的媒体查询： 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 */ } 我build议只用以下四种媒体查询来推特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.自引导已经在版本3中更改了他们的媒体查询。请注意，没有显式查询小于768px的设备。 这种做法有时被称为移动优先。 任何媒体查询之外的所有内容都应用于所有设备。 媒体查询块内的所有内容都可以扩展并覆盖全局可用的内容以及所有较小设备的样式。 把它看作是响应式devise的渐进式增强。
/* 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的文档 。
-
以百分比devise，最初为15“+屏幕进行了优化。
-
检查你想在手机上看到什么组件 – 只保留重要的内容，并删除不工作的元素或混乱的小屏幕。 这些样式可以包含在@media（max-width：480px）{…}
-
当移动到10“或更less的时候，重新devise你的button和手指而不是鼠标的交互组件。@media（max-width：767px）{…}
-
缩小浏览器的宽度。 当事情看起来不太好的时候，进入控制台，找出哪些样式可以更改或需要重新devise或删除的项目。 标记出现的屏幕宽度，并创build媒体查询。
-
最后，检查你的媒体查询，看看它们中的一些是否可以组合在一起（例如，如果你有一个在750和767像素的宽度，你可以把它们合并到767）。
如果你对jQuery感到满意，你可以添加
$(window).resize(function(){ console.log($(window).width()); });
获取当前屏幕大小。 添加一些额外的像素好措施。
@cjlarose引用的第一个Twitter引导程序代码假设您已经为980像素和1200像素之间的显示器构build了主CSS，所以您基本上是从桌面devise开始，并从中调整所有其他devise。
我很高兴地看到Twitter已经在Bootstrap 3中变成了“移动第一” 。这是媒体查询最stream行的方法之一，也是我喜欢的方式。 你从最小的尺寸开始，而不是从桌面出来。
请注意，您的特定网站可能需要不同于此处列出的或任何其他列表中的查询。 您应该根据您的内容需求添加查询，而不是基于任何设置的模板。
以下是我发现最有用的一些媒体查询。 这些只是一些例子：
/* 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) { }
最重要的是你可能不需要所有这些，或者你可能想要根据你的内容看起来像改变数字。 我不认为有多less或哪里把你的断点真的很难的规则。 我正在做一个网站，现在只需要一个断点，因为内容非常简单，但我也做了更像上面的代码的网站。
我没有包括视网膜显示代码。 如果您在高分辨率显示器上切换高分辨率图像的正常分辨率图像，那么这非常有用，但除此之外，它并不是那么有用。
