CSS @media媒体查询你
功能
通过media属性,可以针对要显示的页面中的设备类型(桌面、笔记本电脑、平板电脑、手机、甚至是打印机的印刷版本)来调整页面的样式。
方法一
可以在<link>中增加media属性,使用与指定设备加载样式文件,那么指定的设备就会载入这个css
<link rel="stylesheet" href="lounge.css" media="screen and (max-device-width:460px)">
方法二:
直接在css中使用,如下所示:
@media screen and (min-device-width:481px) { div{ background-color: blue; } }
这个屏幕的使用方法,要放在css通用版定义css的位置的后面,这样子才可以覆盖。
关于屏幕大小的话,可以在浏览器的debug工具中用手机模式进行调试