CSS @media媒体查询你


功能

通过media属性,可以针对要显示的页面中的设备类型(桌面、笔记本电脑、平板电脑、手机、甚至是打印机的印刷版本)来调整页面的样式。

方法一

可以在中增加media属性,使用与指定设备加载样式文件,那么指定的设备就会载入这个css

  

方法二:

直接在css中使用,如下所示:

@media screen and (min-device-width:481px) {
	div{
		background-color: blue;
	}
}

 这个屏幕的使用方法,要放在css通用版定义css的位置的后面,这样子才可以覆盖。

关于屏幕大小的话,可以在浏览器的debug工具中用手机模式进行调试