Jar*_*red 76 css css3 media-queries responsive-design
使用CSS媒体查询,您可以使用max-device-width目标设备宽度(例如iPhone或Android设备)和/或max-width以页面宽度为目标.
如果您使用max-device-width,当您更改桌面上浏览器窗口的大小时,CSS将不会更改,因为您的桌面不会更改大小.
如果您使用max-width,当您更改桌面上浏览器窗口的大小时,您可能会看到面向移动的样式,例如触摸友好元素和菜单等等.
现在不推荐使用针对特定浏览器(和设备？),您应该对目标设置更加不可知.这也适用于媒体查询吗？
你为什么要瞄准另一个？推荐哪一个？
这是我在生产网站上使用的媒体查询示例:
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (min-device-height: 480px) and (max-device-height: 640px) {
/* Change a menu to fit the screen better, etc... */
}
我倾向于使用max-device-width和max-width.
Jos*_*ier 102
如果您正在制作自适应网站,请在媒体查询中使用min-width/ max-width而不是min-device-width/ max-device-width以定位更广泛的屏幕尺寸.
根据2018年媒体查询级别4规范草案,不推荐使用device-width媒体功能.它将保留以便向后兼容,但应该避免.
要查询的视口的大小(或页面媒体页面箱),
width,height和aspect-ratio媒体功能应该被使用,而不是device-width,device-height并且device-aspect-ratio,它指的是设备的物理尺寸,无论有多少空间可用于正在编制的文件.所述device-*媒体特征有时也被用作代理,以检测移动设备.相反,作者应该使用更能代表他们试图反对的设备方面的媒体功能.
作为旁注,请记住在文档的部分中指定一个视口元标记<head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
由于给定设备可能具有所有不同的可能屏幕分辨率和像素密度,因此像素不是像素,因为有几件事需要考虑(变焦,像素密度,屏幕分辨率和尺寸,设备方向,宽高比等) ..).在这种情况下,像素实际上被称为"光学参考单元"而不是物理硬件像素.
幸运的是,您可以在文档的部分中指定视口元标记,<head>以便控制浏览器视口的宽度和缩放比例.如果此标记的content值为width=device-width,则屏幕的宽度将与设备无关的像素匹配,并确保所有不同的设备都应该缩放并且表现一致.
<meta name="viewport" content="width=device-width, initial-scale=1">
在媒体查询方面,您可能希望使用max-width而不是max-device-width,因为max-width将定位视口(当前浏览器窗口),而max-device-width将定位设备的实际全屏大小/分辨率.
换句话说,如果您正在使用max-device-width,则在调整桌面浏览器大小时不会看到应用不同的媒体查询,因为不同的是max-width,只考虑设备的实际全屏大小; 不是浏览器窗口的当前大小.
如果您尝试创建自适应布局,则会产生巨大差异,因为在调整浏览器大小时网站不会响应.此外,如果您正在使用max-device-width媒体查询,那么用于定位具有较小屏幕的设备的媒体查询将不适用于桌面,即使在调整浏览器窗口大小以匹配所述较小的屏幕尺寸时也是如此.
截至2018年,最新的媒体查询规范草案实际上已经弃用了device-width媒体功能,因此应该避免使用.
此外,这篇关于Google Developers的文章强烈反对使用以下内容max-device-width:
Google Developers - Web Fundamentals - 响应式CSS媒体查询
也可以基于以下方式创建查询
*-device-width; 虽然这种做法非常气馁.差异很微妙但非常重要:
min-width基于浏览器窗口的大小,而min-device-width基于屏幕的大小.遗憾的是,某些浏览器(包括旧版Android浏览器)可能无法正确报告设备宽度,而是以设备像素而不是预期的视口宽度报告屏幕大小.此外,使用
*-device-width可以防止内容适应桌面或允许调整窗口大小的其他设备,因为查询基于实际设备大小,而不是浏览器窗口的大小.
避免设备宽度.原因是您无法知道用户浏览器如何响应它.
对于IOS来说,它似乎很简单,至少对于Safari来说.它似乎是一个独立于方向的设备宽度响应.此外,器件宽度仅适用于器件的短边.我在iPhone 4S和iPad上测试了这个.无论朝哪个方向,他们分别对320和768作出回应.
对于Android来说,它更难以预测.我在华为Ascend Y330(Android默认浏览器,Chrome,Opera,Firefox,Firefox Beta,Dolphin)上测试了六款浏览器.响应因浏览器类型和方向而异.
我在一个带有查询的页面上测试(max-device-width:***px),并找出我需要填写的px值以使查询处于真实状态.根据浏览器类型和方向,需要四个不同的值(320,480,534,800).这使得设备宽度无法使用.
小智 5
如果使用max-width,当您更改桌面上浏览器窗口的大小时,可能会显示面向移动的样式,例如触摸友好元素和菜单等.
令我震惊的是,这似乎是受欢迎的意见,这是可取的.我还没弄清楚移动设备之前的流体/液体设计是否被认为是错误或正确的原因.在我看来,这只是液体布局的一个更好的版本,但是设计师出于某种原因而拥抱的版本.
当设计界在2000年代中期选择使用固定布局而不是液体时,这是因为文本回流阻碍了易读性,经常导致寡妇和其他典型的文物.此外,维护代码库从设计到设计通常都很棘手,以防止元素碰撞等.液体布局和响应式设计之间的唯一区别在于响应性,由于更好的浏览器和类似砖石的框架的扩散使其更容易实现.
我个人使用min/max-device-width,因为我更喜欢遵循具有数十年优先权的桌面文档约定.并非您在互联网上打开的所有文档都会以这种方式在桌面上运行,也不会在桌面上加载其他类型的文档或应用程序.在移动主导之前设计的页面,就像MS Word,Photoshop等一样,保持其滚动位置并且不改变它们的布局,允许用户在执行窗口管理的无关任务时跟踪页面流中的内容.
我通常使用3个断点:一个用于手机,一个用于平板电脑,一个用于桌面.桌面和通常至少是横向肖像是固定的,平板电脑肖像和下面是液体.这种自适应和响应的组合使桌面可以像桌面站点一样运行,同时使我无需布局10多个独立的固定宽度移动设备布局.文本不会在移动设备上重排,因为视口无法调整大小.