rem布局
rem是一个单位
类似于em,em是相对于父元素的字体大小
rem则是相对于html元素的字体大小
所以只要所有元素都使用rem单位,然后修改html的字体大小,就可以改变所有元素的大小
媒体查询(Media Query)
@media 可以针对不同的屏幕尺寸设置不同的样式
使用语法:
@media mediatype and|not|only (media feature) {
CSS-Code;
}
- mediatype 媒体类型
取值:
all 所有设备
print 打印机与打印预览
screen 电脑屏幕 平板 手机等
- and|not|only 关键字
将多个媒体特性连接到一起作为媒体查询的条件
and 且
not 非 可省略
only 只 可省略
- (media feature) 媒体特性 必须有小括号
取值:
width 定义可见区域的宽度
min-width 定义最小可见区域宽度
max-width 定义最大可见区域宽度
@media screen and (max-width: 800px) {
CSS-Code;
}
上面这句话的意思就是设置 屏幕上 并且 最大宽度是800px(也就是页面的宽度小于等于800px) 时的样式
媒体查询引入资源
就是通过媒体查询实现不同条件下,使用不同的CSS文件
实现方法:
直接在里面写 media=“screen and (max-width: 800px)” (注意没有@) 就行了
相当于给加了一个条件