媒体查询及响应式布局

媒体查询

@media

1. screen 就表示所有的电子设备的屏幕
2. print 表示打印机的屏幕

3. all 所有的设备

and：和，两个条件之间需添加

max-width：表示小于等于这个宽度的时候 屏幕显示、min-width： 表示大于等于这个宽度的时候 屏幕显示。

理想视口

meta name="viewport"：理想视口

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

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

em：相对于父元素的大小

rem：相对于根元素html的大小

使用物理单位在不同宽度和不同分辨率的手机上会有一定的差异，我们一般使用rem作为移动端的主流单位，因为rem是相对于根元素html的大小来显示的 html的大小相对固定。