基础
rem(root em)是一个相对单位,基准是html元素字体大小;
em也是一个相对单位,基准是 父级元素的字体大小
优点:可以通过更改页面中html字体大小来更改页面中元素大小,从而实现整体控制
媒体查询:media Query 是CSS3新增语法,可以针对不同尺寸屏幕更改样式
语法规范
@media mediatype and | not | only (media feature){csscode}
@media screen and (max-width: 360px;){
html{
font-size: 20px;
}
}
- media feature 条件建议 从小到大
利用媒体查询引入资源
当样式繁多的时候,可以针对不同媒体设置不同的样式表;
原理:直接在link 中判断媒体尺寸,引入不同的css文件
<link rel="stylesheet" href="index1.css" media="screen and (max-width:900px)">
<link rel="stylesheet" href="index2.css" media="screen and (min-width:360px)">