动态REM

动态REM是手机专用的自适应方案

REM是什么

我们常用的单位有(有问题看MDN)

• px
• em (一个汉字M的宽度,对面试官说)
• rem (root em根元素的font-size)
  • 根元素就是html 的 font-size 16px
• vh viewport 的height高度 视口高度 100vh == 视口高度
• vw viewport 的width 跨度 视口宽度 100vw == 视口宽度
• 页面默认font-size:16px
• chrome 默认最小12px,字体大小不要小于12px
• REM就是根元素(html)的font-size大小

rem 和 em区别

css单位个人博客

• 1em == 16px默认值
• em自己的font-size
• rem 根元素的font-size

动态REM

如果没有设计图,就不做响应式

给这些图再做响应式

• 所有手机显示的界面都是一样的，只是大小不同

响应式需做不同的适配,例如:

• 0~320px 一套css ?
• 320px~375px 一套css ?
• 375~414px 一套css ?

1. 百分比布局
   • 缺点: 高度不能和宽度做配合,不知道宽度的大小
2. 整体缩放
   • 一切单位以宽度为标准

// html的font-size宽度 等于 页面宽度
// 1 rem == html font-size == viewport width

 

// 动态REM示例



  
  
  
  


  

    
box
    
box
    
box
    
box
  

// 重要的
 

// 可以调节宽度

 

• border怎么办?
  • 太小的直接用px,和rem混用

REM 可以与其他单位同时存在
 font-size: 16px;
 border: 1px solid red;
 width: 0.5rem;

上面的这些可以解决我们在移动端是配上的单位动态rem,但是对于我们来说,还是有一个痛点.单位的换算特别麻烦,先px,再rem,该怎么解决呢???

px自动变为rem

给自己一个警告!!!!

• 为什么你学不好 LESS/SASS/Webpack/SCSS
  • 你不会命令行，你非要用 Windows (卸载windows)
  • 你不会英语（有些内容可以看中文翻译）
  • 你不会看文档（很重要的能力）

rem自动化转px 就用scss呗

• 先自己尝试使用scss