我需要为iphone/android手机开发一些html页面,但是max-device-width和之间的区别是max-width什么？我需要为不同的屏幕尺寸使用不同的css.
@media all and (max-device-width: 400px)
@media all and (max-width: 400px)
有什么不同？
使用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.