移动端开发

前期准备

使用方案为淘宝无限适配方案。

在进行移动端开发时，首先需要进行一些配置。

在html文件中进行如下配置：

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
1

再引入js文件，js文件内容如下：

!function(e,t){function n(){t.body?t.body.style.fontSize=12*o+"px":t.addEventListener("DOMContentLoaded",n)}function d(){var e=i.clientWidth/10;i.style.fontSize=e+"px"}var i=t.documentElement,o=e.devicePixelRatio||1;if(n(),d(),e.addEventListener("resize",d),e.addEventListener("pageshow",function(e){e.persisted&&d()}),o>=2){var a=t.createElement("body"),s=t.createElement("div");s.style.border=".5px solid transparent",a.appendChild(s),i.appendChild(a),1===s.offsetHeight&&i.classList.add("hairlines"),i.removeChild(a)}}(window,document);
1

它的作用主要就是在页面的html标签上添加一个font-size。
例如，当浏览器调试尺寸宽度为375时，font-size=37.5px;

配置完毕之后，就可以进行移动端开发了。

使用技术

@media媒体查询

媒体查询常用的就是讲@media直接写在＜style＞标签里：

@media screen and (max-width: 1024px) {
	.myclass {
		background-color: red;
	}
}  //表示在可视区域宽度<=1024时，显示这里的样式

@media screen and (min-width: 1025px) {	
}  //浏览器可视区域宽度>=1025时，显示样式

@media screen and (min-width:321px) and (max-width:375px) {}  //321<=可视区域宽度<=375时
1
2
3
4
5
6
7
8
9
10

常见的移动端设备就是手机，平板，设备宽度最大就是1024，所以可以以1024为界限，来区分PC端和移动端。

注意：

min-width和max-width判断的都是浏览器的实际宽度，可以发现一个问题。在PC端显示的应该是PC端媒体查询的样式，但是，当浏览器窗口没有最大化的时候，窗口宽度小到了一定程度（如700），此时你就会发现，PC端的样式变成了移动端的样式。

解决办法：

使用max-device-width和max-device-width属性，判断你的设备屏幕实际的宽度，这样就不会存在上面的问题了，更好的适配PC端和移动端。

@media screen and (max-device-width: 1024px) {}   //移动端屏幕
1

flex布局

rem适配

rem 是一个相对单位，相对于根元素的字号大小进行计算。

例如，750宽度的屏幕下，根元素字号大小为75。

现在要做一个页面，页面有一个盒子，在750宽度的屏幕下，盒子宽度占600px，那么就可以设置盒子宽度为600/75 = 8rem。

@media screen and (max-device-width: 1024px) {
	.box {
		width: 8rem;
	}
}
1
2
3
4
5

这样设置的盒子宽度是可以响应式的，当屏幕变大时，宽度也变大。

vw适配

vw即Viewport’s width，是css3规范中的视口单位，它是相对单位，相对于视口大小。

视口宽度 = 100vw ----> 1vw = 视口宽度1%

相对于视口的宽度，视口被均分为100单位的vw。

750px = 100vw ，那么7.5px = 1vw。

除此之外还有vh单位 即Viewport’s height，相对于视口的高度，视口高度被均分为100单位的vh。