@media

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

 

 

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

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

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

 

常见设计稿?

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

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

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

属性box-sizing:border-box;

Rem布局

  1. em 

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

  1. rem

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

2019-09-17

原文地址:https://www.cnblogs.com/yuanyeds/p/11673495.html