受限于流量太少，以前的手机网站无法做成像现在一样的效果，只能通过超链接的形式实现简单的网页
随着3G，4G，5G的商用，我们的流量越来越多，网速越来越快。越来越多的应用开始去开发网页版。
移动端仿真
未来我们开发移动端网站，需要在电脑先看看对应的移动端的效果，所以我们需要一个“模拟器”，浏览器的F12中都带有“模拟器”——仿真模式。
打开F12，点击左上角按钮，切换设备仿真模式，可以进入到对应的“模拟器”
设备选择
iphoneSE的设备选择可以选择对应的相关设备，一般企业开发都是按照iphone6/7/8/SE2的尺寸进行开发
- iphone5 320
- iphone6 375
- iphone6p 414
所以现在的设计图标准，大多都是按照375px(750px)这是标准。
移动端开发中的适配问题
移动端没有版心，但是因为手机屏幕分辨率过多，所以没办法给每一个手机分辨率写一套页面，所以我们的网页需要自适应。那么在移动端，如何自适应是我们需要注意的问题。移动端布局要比PC端更简单。移动端适配，如果想要完全搞明白，有些难，但是如果想要上手写，很简单。
rem布局方案
什么是rem
rem单位 是相对于HTML字体大小的单位，把HTML字体大小作为我们网页的统一参照尺寸，当我们按照这个大小进行布局时，最终改变对应的HTML字体大小，我们的所有元素都会等比缩放。
自动缩放的机制
我们需要一个js，来实现屏幕宽度改变时，自动根据标准计算出来html字体大小
设计图标准：750px / 100px
如何使用rem方案
在网页中引入rem.js，这个js是自己写的。但是现在我们不需要自己写，直接引入到我们的项目中即可
function getRem(design_w, unit) {var html = document.getElementsByTagName("html")[0];var real_w = document.documentElement.clientWidth;(real_w > design_w) && (real_w = design_w);html.style.fontSize = real_w / design_w * unit + "px";
}
getRem(750, 100);
//window.addEventListener("resize",getRem);
window.onresize = function () {getRem(750, 100)
};
把这个js放在我们的项目中，网页里未来引入即可。尽量放在head中。
<!-- 引入js --> <script src="./js/rem.js"></script>
不如记住一句话：
引入rem.js，设计图上量出来是多少px，就除以100 + rem单位。
VSCode px自动转rem插件
安装完成后，点击扩展设置
把箭头位置改成100即可。
下面的插件可以自动转换，上面的插件需要按alt+z转换。
vw方案
视口设置
<meta name="viewport" content="width=device-width, initial-scale=1.0">
在我们的网页的基本结构上，都有上面的代码，他不影响电脑网页的布局，但是它可以让网页上的元素的大小，在手机上显示的时候和正常大小一样大。
移动端，这个代码必须要添加
vw单位
vw指视口单位，通俗来讲，就是1vw表示屏幕宽度的100分之1，视口单位还有一个vh单位，表示屏幕高度的100分之1，vh和我们对应的适配方案没有关系。因此我们只需要考虑vw。
100vh是浏览器可用的区域高度，100vw是浏览器可用的区域宽度
vw方案带来的好处
不用引入额外的js，原生支持。
vw方案的布局方法
设计图上量出来多少，除以 7.5 + vw单位
我们可以使用vw作为我们的单位进行布局，需要借助vscode帮我们进行计算。
安装对应的插件，帮助我们快速的转vw
视网膜屏的问题
多倍屏，高分屏，视网膜屏，在一个对应的尺寸中，塞下成倍的像素点。这些屏幕的显示效果会比1倍屏显示效果更清晰，但是，如果还用1倍图，会变模糊，所以在开发过程中，我们需要使用2倍图甚至三倍图
一般UI设计师应该给前端提供视觉稿，做对应的布局使用，他们自己需要有放大稿，做切图使用放大稿，切多倍图，让图片在手机上显示不模糊
未来设计师不一定写750，也不一定做放大稿
DPR
设备像素比 = 物理像素 / 逻辑像素
- iphonese 物理像素750 * 1334 逻辑像素 375 * 667 dpr 2
- iphone6p 物理像素 1240 逻辑像素 414 dpr 3
如果我们想知道对应的设备是几倍屏，显示设备像素比即可
移动端的问题
- 移动端没有hover，如果真的想要点击变样式，搜开消失，可以使用:active伪类。
- 超链接点击高亮
给reset里添加一个样式
a {-webkit-tap-highlight-color: transparent;
}
- 网页弹性滑动
我们不想添加左右的弹性滑动效果
* {touch-action: 值;
}
- pan-x 只能横向滑动
- pan-y 只能纵向滑动
- pan-down 只能向下滑动
- pan-up 只能向上滑动
