响应式布局 max-device-width 与 max-width 的区…
2018-06-24 02:02:17来源:未知 阅读 ()
闲来没事,研究了一下多屏适配和响应式布局的 CSS。
第一种写法
1 @media screen and (max-device-width: 320px) { 2 3 } 4 5 @media screen and (min-device-width: 321px) and (max-device-width: 640px) { 6 7 } 8 9 @media screen and (min-device-width: 641px) and (max-device-width: 1000px) { 10 11 }
第二种写法
1 @media screen and (max-device-width: 640px) { 2 3 @media screen and (max-device-width: 320px) { 4 5 } 6 7 @media screen and (max-device-width: 360px) { 8 9 } 10 } 11 12 @media screen and (min-device-width: 641px) and (max-device-width: 1000px) { 13 14 }
max-device-width 与 max-width 的区别
max-device-width | max-width |
---|---|
根据设备屏幕的宽度进行适配 | 根据显示区域的宽度进行适配 |
PC浏览器随意缩放时不会响应 | PC浏览器随意缩放时会响应 |
- | 同时兼容max-device-width |
页面示例
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:HTML 字符实体
下一篇:sass基础常用指南
- DIV居中的经典方法 2020-06-13
- CSS Grid 布局 2020-06-01
- 构建一个杂志布局(译文) 2020-05-14
- 【2020Python修炼记】前端开发之 CSS基础布局 2020-05-13
- [书籍精读]《响应式Web设计 HTML5和CSS3实战(第二版)》精读 2020-05-07
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash