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工具中用手机模式进行调试

posted @ 2021-11-28 21:44  洛飞  阅读(131)  评论(0编辑  收藏  举报