移动端适配、响应式布局、网格布局

移动端适配

• rem适配.
  • rem相对于根标签字体大小计算。
• vw适配
  • vw（viewport’s width）,相对于视口的大小。把视口分为100份
  • deviceWidth = 100vm
  • 750px = 100vm 1vm = 7.5px
  • 375px = 100vm 1vm = 3.75px
  • 100px = 13.3333vm
  • 直接以vw为单位，使用插件px2vw（设置初始width=750）
• vw和rem
  • 以rem适配为基础，把设置根标签字体的单位变成vw
    • 100px = 13.3333vw;
  • 正常的pc端布局方式，单位rem
• 了解： vh（viewport’s height）

移动端的特殊处理

• 小字体设置
  • 正常写元素
  • 使元素元素整体缩放
    • tranform:scale()
    • transform-origin:
• placeholder 有时候不处于居中状态（偏上）
  • 设置line-height无效。设置padding-top
• input圆角无效

input{
   
	background-clip:padding-box | content-box
}

• 3d硬件加速

ele{
   
	transform:translate3d(0,0,0)
}

像素的分类：

• 设备像素
  • 也称为物理像素，像素的大小是固定
• 设备独立像素
  • 也称为逻辑像素，相对的大小。根据dpr决定一个逻辑像素代表几个物理像素
• css像素
  • 也称为虚拟像素，css像素也是相对的，是web独有的像素。
  • 一般pc端，一个css像素就是一个物理像素
  • 移动端中，由dpr决定
    • 像素比（dpr）dpr = 物理像素 / 设备独立像素
      • 注意： 一个方向的像素
        Retina屏，dpr

flexible + rem 适配：

• 屏幕宽 = 10rem
  <