@media

1.媒体查询   针对不同的媒体类型定制不同的css样式。

 

 

设备视口: 设备屏幕的大小 常见的320 375 414(iphone) android  320 360 480

浏览器视口 在移动端中，如果没有做视口处理，浏览器默认适口大小是980px

在pc端 浏览器视口和pc设备视口保持一致。

 

常见设计稿？

设备宽度乘以2甚至乘以3，这是因为跟我们屏幕分辨率（设备像素比）有关

设备像素比 dpr:2 一个物理像素 需要两个逻辑像素去填充。

如果参考设备是 375x667 dpr是2  那么设计稿得750x1354

属性box-sizing:border-box;

Rem布局

1. em 

em也是一种像素单位，1em的大小由他的父级元素的字体大小决定。

1. rem

rem也是一种像素单位，1rem的大小由网页的根节点html的字体大小决定

2019-09-17