最新最全的移动资源,海量教程攻略!

网站首页 > 技术支持 > dede > dede辅助文档 > 利用@media screen实现网页布局的自适应

利用@media screen实现网页布局的自适应

作者: 资源猫 时间: 2020-02-14 14:38:06 人气: 7

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/

要注意的是由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要,否则会出现横向滚动条。

not: not是用来排除掉某些特定的设备的,比如 @media not print(非打印设备)

only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说,如果存在only关键字,移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持 Media Queries的设备但能够读取Media Type类型的Web浏览器,遇到only关键字时会忽略这个样式文件。

感谢访问资源猫吧,本站所有资源均来自互联网或用户分享,如您发现本站存在侵权或违规内容,请来邮件告知我们! 资源分享/侵权下架/商务合作联系邮箱:qiazou77ziyuan@126.com