一、移动端布局和适配：
1. viewport视口（可视区窗口）：
<!--1. 视口 name='viewport'
width:设置可视区宽度为设备的宽度（width=device-width）。
user-scalable:以及禁止用户通过双指缩放（user-scalable=no），但在ios10无效。
initial-scale:初始缩放比例，与最小缩放比例保持一样。
minimum-scale:最小缩放比例，与初始缩放比例保持一样。
maximum-scale:最大缩放比例。
devicePixelRatio:像素比，即将1个像素（即1px）放大成window.devicePixelRatio个像素去显示。
-->
<meta name='viewport' content="width=device-width,user-scalable=no,initial-scale=1,
minimum-scale=1,maximum-scale=1">更多移动端viewport相关信息：https://blog.csdn.net/qq_42231156/article/details/80636990。
2. rem适配：即根据根节点html标签的字体大小设置。
<htnl>
<meta name='viewport' content="width=device-width,user-scalable=no">
<body></body>
<script>
(function(){
const count=16; //可以设置的倍数
var htmlDom=document.documentElement; //获取html标签
var htmlWidth=htmlDom.getBoundingClientRect().width; //获取html标签的宽度。
htmlDom.style.fontSize=htmlWidth/count+'px';//设置根节点html标签的字体大小。
//使用：如ui设计稿是320*667的，那么 1rem=320/16=20px,如果一个标签是在320*667的UI设计稿上是80px*80px的尺寸，那么该标签的换算成rem为80/20=4rem,以此达到屏幕的适配。
})()
</script>
</html>
二、盒模型：
1. 两种盒模型：标准盒模型和怪异盒模型。主要属性：包括宽（width），高（height），内边距（padding），外边距（margin），边框（border）。
1.1 标准盒模型：除了低版本的IE，其他浏览器都兼容的盒模型。在标签盒模型中，盒子的宽（width）和高（height）就是盒子内容的宽高。而盒子实际的大小：横向/纵向=width/height + 左右padding/上下padding + 左右border/上下border。
标准盒模型的缺点：如果4个盒子（如div）平方一行，每个盒子的设置宽（width）25%，但是会存在的问题是，盒子若存在border和padding，从而使得4个盒子实际大小大于4*25%=100%，即会超出换行。所以在css3中存在一个属性box-sizing:border-box。即变更为怪异盒模型，就不会存在实际大小超出换行了。
1.2 怪异盒模型：只在低版本的IE6，IE7，IE8中使用的盒模型。在怪异盒模型中，盒子的宽（width）和高（height）就是盒子实际的大小。而盒子内容的大小：横向/纵向=width/height - 左右padding/上下padding - 左右border/上下border。
2. 弹性盒模型：弹性布局（Flexible Layout ,又叫可伸缩布局，常用来替换<frame>）。
2.1 为了解决某元素中子元素的布局方式，为布局提供最大的灵活性。
2.2 弹性布局的容器，即父元素。弹性布局的项目，即要实现布局效果的元素，简称为项目。主轴（Aain Axsis），决定项目们排列顺序的一根轴，如果按X（Y）轴排列，那X（Y）就是主轴。交叉轴（Cross Axsis），与主轴相交叉的那根轴。
2.3 语法：
2.3.1 弹性布局的容器：只有将元素变为弹性布局的容器后，子元素们才能按照弹性布局的方式进行排列。将该父元素添加一个属性display:flex/inline-flex;分别表示将块级元素边弹性容器，将行内元素边弹性容器。注意：元素变弹性容器后，子元素的float,clear,vertical-align将全部失效，且子元素变为块级元素，可以修改尺寸，且容器的text-align也会失效。
2.3.2 容器的属性：该组属性加载容器上，负责控制所有项目的特征的。属性——
2.3.2.1 flex-direction：指定容器的主轴及其排列方向，X轴为默认主轴。取值：row/row-reverse/column/columu-reverse分别表示默认值主轴为X轴且从左到右排列，主轴为X轴且从右向左排列，主轴为Y轴且起点在顶端，主轴为Y轴且起点在底端。
2.3.2.2 flex-wrap：当一个主轴排列显示不了所有子元素（项目）时，可以指定换行方式。取值：nowrap/wrap/wrap-reverse/;分别表示默认值不换行直接压缩子元素（项目）宽度，向下左边换行，向上左边换行。
2.3.2.3 flex-flow：是flex-direction和flex-wrap的缩写；取值：row nowrap/direction wrap;分别表示默认值，分别取值。
2.3.2.4 justify-content：作用——定义项目在主轴上对齐方式。取值：flex-start/flex-end/center/space-between/space-around;分别表示在主轴的起点对齐，在主轴的终点对齐，在 主轴的居中对齐，两端对齐，让每个项目两端的距离是相等的。
2.3.2.5 align-items：定义项目在交叉轴上的对齐方式。取值：flex-start/flex-end/center/baseline/strentch;分别表示在交叉轴的起点对齐，终点对齐，居中对齐，基线对齐，将在交叉轴上占满所有的空间。
2.3.2.6 flex-basis：用于指定弹性盒子基准宽度，因为在弹性盒子中，盒子的最终宽度不是width值决定的。所以用flex-basis=80px优先级高度width=80px,所以用flex-basis来设置弹性盒子的宽度。
注意：flex: 是flex-grow,flex-shrink,flex-basis三个属性的缩写。
三、移动端事件：
1. touch事件：包括touchstart、touchmove、touchend事件。
div.addEventListener("touchstart",(e)=>{ //touchmove，touchend
e.preventDefault(); //阻止移动端点透事件
e.stopPropagation(); //阻止事件冒泡
e.touchs.length; //当时移动端屏幕上手指的个数。
console.log(e)
})2. tap事件：
备注：移动端存在300ms延迟。
四、移动端的transform（-webkit-transform）：移动端推荐通过transform实现高性能动画，不推荐left,top之类的定位。
1. vue/原生js中设置标签的style的transform：
let divDom=this.$refs.div;
let divDom1= doucment.getElementById('box');
divDom.style.WebkitTransform=divDom.style.transform='rotate(20deg)';
divDom1.style.WebkitTransform=divDom.style.transform='rotate(20deg)';