您的位置：首页 > 其它

响应式布局 max-device-width 与 max-width 的区别

2017-11-24 21:52 423 查看

闲来没事，研究了一下多屏适配和响应式布局的 CSS。

第一种写法

@media screen and (max-device-width: 320px) {

}

@media screen and (min-device-width: 321px) and (max-device-width: 640px)  {

}

@media screen and (min-device-width: 641px) and (max-device-width: 1000px)  {

}

第二种写法

@media screen and (max-device-width: 640px)  {

@media screen and (max-device-width: 320px) {

}

@media screen and (max-device-width: 360px)  {

}
}

@media screen and (min-device-width: 641px) and (max-device-width: 1000px)  {

}

max-device-width 与 max-width 的区别


max-device-width	max-width
根据设备屏幕的宽度进行适配	根据显示区域的宽度进行适配
PC浏览器随意缩放时不会响应	PC浏览器随意缩放时会响应
-	同时兼容max-device-width

页面示例

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航