移动端网站开发

受限于流量太少，以前的手机网站无法做成像现在一样的效果，只能通过超链接的形式实现简单的网页

随着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

如果我们想知道对应的设备是几倍屏，显示设备像素比即可

移动端的问题

1. 移动端没有hover，如果真的想要点击变样式，搜开消失，可以使用:active伪类。
2. 超链接点击高亮

给reset里添加一个样式

a {
  -webkit-tap-highlight-color: transparent;
}

1. 网页弹性滑动

我们不想添加左右的弹性滑动效果

* {
  touch-action: 值;
}

• pan-x 只能横向滑动
• pan-y 只能纵向滑动
• pan-down 只能向下滑动
• pan-up 只能向上滑动