关于前端学习:CSS样式移动端适配

理解 viewport 视口
- 挪动端 viewport 视口就是浏览器显示页面内容的屏幕区域
- viewport 视口包含布局视口（layout viewport）、视觉视口（visual viewport）、现实视口（ideal viewport）
布局视口（layout viewport）：布局视口与挪动端浏览器屏幕宽度独立开，CSS 布局依据布局视口进行计算视口大小，并被它束缚；挪动端布局视口默认宽度为 980px，在挪动端看 PC 端网页时内容很小，须要进行手动缩放查看
视觉视口（visual viewport）：视觉视口指用户看到的区域，用户可对视口进行缩放操作，且不影响布局视口
现实视口（ideal viewport）：布局视口默认值并不是一个现实宽度，所有浏览器厂商引入了现实视口概念，对于设施领有一个最现实的布局视口宽度，无需用户手动缩放操作网页查看，利用 <meta name="viewpost" content="width=device-width"> 可设置布局视口宽度与现实视口宽度统一
设置视口
```
<meta  name="viewport"  content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
```
- content 内属性值：
  - 视口宽度：width=” 正整数或 device-width”
  - 视口高度：height=“正整数或 device-height“
  - 初始缩放值：initial-scale=1.0
  - 最小缩放值：minimum-scale=1.0
  - 最大缩放值：maximum-scale=1.0
  - 用户缩放操作权限：user-scalable=no
挪动端适配计划
- 百分比（流式）布局： 将盒模型宽度设置为百分比，使盒模型宽度进行主动适应屏幕宽度，不受像素单位的束缚，内容向两侧填充
  长处：大屏显示内容更多
  毛病：宽屏下比例失调
- rem 布局：em 单位和 rem 单位是绝对单位，1em 是绝对于以后元素或父元素的 font-size 值，而 1rem 是绝对于根元素（html 元素）的 font-size 值

设置根元素的动静的 font-size 值

应用 JS 配合实现

<script>
// 获取浏览器以后视口宽度
var  fontsize=document.documentElement.clientWidth *100 / 375;
// 给 html 增加 font-size
document.documentElement.style.fontSize=fontsize+'px';
</script>

计算 VW 单位实现适配

// iPhone 6 为例进行计算：100 px / 375px * 100
html {font-size: 26.67vw;}
body {
  /* 设置回默认 16px 字体大小
  font-size: 0.16rem;
}

理解 viewport 视口

设置视口

挪动端适配计划