移动端开发<meta name="viewport" content=" width=device-width, ini

<meta name="viewport" content=" width=device-width, initial-scale=1.0 "/>

width=device-width使视口与手机端宽度一致
initial-scale=1.0不允许手机页面放大缩小
content属性值
- width为可视区域的宽度。值为数字或device-width
- height为可视区域的宽度。值为数字或device-height
- initial-scale为页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
- maximum-scale=1.0,minimum-scale=1.0;为可视区域的缩放级别
- maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
- user-scalable:是否可对页面进行缩放，no 禁止缩放

dpr设备像素比

dpr = 物理像素/设备独立像素

物理像素是截屏得到的像素。如：750px
设备独立像素是CSS中书写的像素值(视口)。如：375px
UI提供的图片为物理像素，编程时需先除以dpr的值（安卓一般为1，苹果为2或3）

页面布局

弹性布局、百分比布局、流式布局
- 当屏幕过大，页面比例不协调
- 高度不变，宽度自适应
- 图片等比缩放
- 文字流失
等比缩放布局、rem布局
- 比例协调
- 宽高等比例缩放

单位

rem是相对html中字体大小的倍数
- 例：在设置html{ font-size: 15px }后，设置div{ width: 2rem }
  - 此时2rem = 2*15px = 30px
  - 在html中设置字号对所有的行内块元素都有影响，需要另在body中设置一个合理的font-size元素
vm是视口占比
- 1vm = 1%的视口宽
- 例：width: 100vm指视口宽的100%
- 注：width: 100vm不等于width: 100%
  - 100%不包括屏幕中的滚动条宽度
  - 100vm包括屏幕中的滚动条宽度
  - 手机中的滚动条不占用空间，PC端的滚动条占用空间

例

UI提供的页面像素为640px

则可以推出 => 640px的视口宽为320px

=> 1vm = 1% * 320px = 3.2px

=> 100px = 31.25vm

=> 2rem = 2 * 31.25vm = 2 * 100px = 200px

UI提供的页面像素为750px

则可以推出 => 750px的视口宽为375px

=> 1vm = 1% * 375px = 3.75px

=> 100px = 26.67vm

=> 2rem = 2 * 26.67vm = 2 * 100px = 200px

字号的写法

//宽度小于320px时，字号为14px
@media screen and (max-width: 320px){
  body{
    font-size: 14px;
  }
}

//宽度大于321px小于375px时，字号为16px
@media screen and (min-width: 321px) and (max-width: 375px){
  body{
    font-size: 16px;
  }
}

//宽度大于376px时，字号为18px
@media screen and (min-width: 376px){
  body{
    font-size: 18px;
  }
}