媒体查询、响应式布局、移动端兼容

媒体查询

屏幕的查询类型mediatype有多种， 比如电脑屏幕 、打印机等

sreen 就表示所有电子设备的屏幕

print 表示打印机的屏幕

all 用于所有设备

关键字

and   可以将多个媒体特性连接到一起，相当于“且”的意思

not   排除某个媒体类型。相当于"非"的意思，可以省略

only 指定某个特定的媒体类型，可以省略

媒体特性（屏幕的尺寸）

width 定义输出设备中页面可见区域的宽度

min-width 定义输出设备中页面最小可见区域宽度

max-width 定义输出设备中页面最大的可见区域宽度

响应式布局

如下 ：表示在屏幕上，并且最大的宽度是1100像素，里面设置我们想要的样式

@media screen and (max-width:1100px){ }

移动端兼容

理想视口

meta name="viewport" content="width=device-width, initial-scale=1.0"

meta name="viewport"表示理想视口

width=device-width 显示的宽度为设备的宽度

initial-scale=1.0 是否对屏幕的尺寸进行缩放 1.0表示不缩放

移动端单位

一般使用物理单位在不同宽度和不同分辨率的手机 上会有一定的差异

在这里推荐使用rem 或者em 作为移动端的单位 来兼容不同的手机设备

em是相对于父级单位的大小来显示的，不够固定  一般使用rem作为移动端的主流单位

因为rem是相对于根元素html的大小来显示的  html的大小相对固定

rem的换算方式：实际想要的宽度/ 根元素的大小= 多少rem

（目前谷歌浏览器的html默认的font-size的大小是16px，但是不能保证其他浏览器的根元素的字体大小都是一致的，所以我们推荐手动设置根元素的大小）