持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

移动端样式适配，即大屏显示大图案，小屏显示小一些。

@media媒体查询

screen 设置min-width and max-width 设备宽度在一定范围内时，采用的样式。

rem

样式基准为根元素html上的font-size大小；根据当前设备大小调整基准，则可以实现其他元素的样式适配。

• 怎么实现根据当前设备大小调整基准？
  1. media媒体查询：设置一定范围内的font-size大小
  2. 根据js代码动态获取屏幕大小,再根据该大小与设计稿宽度(750px)求比例：min(screen.width,document.documentElement.getBoundingClientRect().width)/750*32
• 怎么进行单位换算？
  1. dpr：devicePixelRatio，表示物理像素与虚拟像素的比值
     • 物理像素=虚拟像素（css）* dpr
     • 为保证物理像素与设计稿的一致：虚拟像素（css）= 设计稿/dpr
     • rem：虚拟像素（css）= 设计稿/dpr/rootValue
     • 另外一种方案：设置meta viewport的init-scale属性为1/dpr，表示将虚拟像素映射到物理像素
  2. 插件:直接写设计稿的px value，插件自动转换为rem单位
     • autoprefixer
     • postcss-pxtorem

%

相对于父元素

不同属性相对的父元素属性不同：

• width/height:直接父元素的width/heigh
• padding/margin:直接父元素的width
• top/bottom/left/right:非static父元素的width/heigh
• border-radius/translate/background-size:自身的width

em

相对于父级元素的font-size（最上层body）

vw/vh

• 1vw：视口宽度window.innerWidth等分为100份；

• 1vh：视口高度window.innerHeight等分为100份; webpack的插件：px-to-viewport