rem 单位:是一个相对单位,类似于em,em是父元素字体大小,不同的是rem的基准是相对于HTML元素的字体大小。比如:根元素设置font-size = 12px,非根元素设置width:2rem;则换成px表示就是24px
媒体查询(Media Query)是CSS3新语法:
使用@media查询,可以针对不同的媒体类型定义不同的样式
@media 可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果果手机、安卓手机,平板等设备都用得到多媒体查询
语法规范:
@media mediatype and|not|only(mediafeature){
CSS-Code;
}
注意:用@media开头注意@符号
mediatype 媒体查询
关键字 and not only
media feature 媒体特性 必须有小括号包含
mediatype 查询类型
关键字:
and:可以将多个媒体特性连接到一起,相当于“且”的意思
not:排除某个媒体类型,相当于“非”的意思,可以省略
only:指定某个特定的媒体类型,可以省略
媒体特性:
width:定义输出设备中页面可见区域的宽度
min-width:定义输出设备中页面最小可见区域宽度
max-width:定义输出设备中页面最大可见区域宽度
媒体查询 + rem实现元素动态大小变化
rem单位是跟着html来走的,有了rem页面元素可以设置不同带下尺寸
媒体查询可以根据不同设备宽度来修改样式
媒体查询+rem就可以实现不同设备宽度,实现页面元素大小的动态变化