我是响应式网页设计的新手,并且感到困惑,因为对于使用哪些媒体查询以及针对哪些设备存在各种偏好。有标准吗?我想定位 iPhone、iPad 和其他流行设备。
我在网上找到了这个:
/* 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 and high pixel ratio devices ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
但不知道是不是过时了。我不知道哪个规则是针对 iPhone 4 的,因为我运行了 iPhone 模拟器并且 CSS 没有工作(引用上一个 CSS 规则)。
最佳答案
我对媒体查询的看法是,您的目标应该是为您的网站制作一个与设备无关的框架。这意味着它需要同时了解分辨率和像素密度,因为苹果(和其他公司)正在推进超高分辨率屏幕。
2018 年更新:我的方法现在放弃了 screen
和 min-device-pixel-ratio
媒体属性并使用屏幕尺寸范围。因为现在每个设备都注册为 screen
,而且现在几乎所有设备都是高分辨率的 - 您真的不需要这些属性。如果您访问的是超高流量网站,也许它们仍然有意义。
以下是我如何在全局范围内布置我的断点:
/* Below 380px is really just the iPhone SE at this point */
@media (min-width: 380px) and (max-width: 480px) {
/* Most phones fall in here - iPhone, Galaxy, Pixel, etc */
}
@media (min-width: 480px) and (max-width: 768px) {
/* Phablets and Tablets - iPad, Galaxy Note, Pixel Slate, Fire */
}
@media (min-width: 768px) and (max-width: 980px) {
/* Small desktop, large tablet - Macbooks, sub 12" ultrabooks */
}
@media (min-width: 980px) and (max-width: 1200px) {
/* Medium screen desktop (up to about 24") and laptops (13" laptops) */
}
@media (min-width: 1200px) and (max-width: 1600px) {
/* Large screen desktop (27"), laptops (15+") */
}
@media (min-width: 1600px) {
/* Very large screen, 4K desktop + small TVs */
}
2012 年的建议:我看到 Chris Coyier 的 CSS-tricks.com 实现了双重任务: http://css-tricks.com/snippets/css/retina-display-media-query/
这个概念是根据大小创建初始断点,然后进行像素密度媒体查询。这种方法为您提供了三个断点,每个断点都有一个像素密度感知选项。
这是 Coyier 的示例代码(我简化了特定于供应商的前缀以便您理解概念):
@media only screen and (min-width: 320px) {
/* Small screen, non-retina */
}
@media only screen and (min-device-pixel-ratio: 2) and (min-width: 320px) {
/* Small screen, retina, stuff to override above media query */
}
@media only screen and (min-width: 700px) {
/* Medium screen, non-retina */
}
@media only screen and (min-device-pixel-ratio: 2) and (min-width: 700px) {
/* Medium screen, retina, stuff to override above media query */
}
@media only screen and (min-width: 1300px) {
/* Large screen, non-retina */
}
@media only screen and (min-device-pixel-ratio: 2) and (min-width: 1300px){
/* Large screen, retina, stuff to override above media query */
}
我非常喜欢这个概念:您可以为较旧的、可能带宽受限的设备节省带宽,同时为新的高分辨率设备提供它们所需的东西。您必须放入像素密度媒体查询中的唯一代码应该是背景图像内容,因此高分辨率图像会覆盖旧设备上的像素化图像。
意识到你正试图击中一个移动的目标,我的 friend ;)这是一个不断发展的概念,css-tricks.com、stackoverflow 和其他博客似乎是跟上潮流的最佳方式。祝你好运。
关于css - 我应该使用媒体查询定位哪些设备/推荐尺寸?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12987078/