前端简单实现移动端，web端自适应的写法
简单实现移动端，web端自适应
1.第一种方法：利用vw
在页面中 宽度100% = 100vw，vw表示的是实时的页面宽度，我们可以通过设计图宽度，和显示div的宽度和高度的比例，来实现自适应，
例如：
//显示一个盒子宽1100px,高1140px， 设计稿的宽度是1920px；
//要实现自适应， 宽 = 1100/1920*100 vw 高 = 1140/1920*100vw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html{
}
body{
margin: 0;
padding: 0;
}
.box {
margin: 0 auto;
width: 57.29vw; /* 宽 = 1100/1920*100 vw*/
height: 59.38vw /* 高 = 1140/1920*100vw */;
background-color: #ffffff;
border: solid 1px #116e3a;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
2. 第二种方式 利用rem实现自适应。
rem是什么
相信大多数同学都写过移动端，那么对rem就很熟悉了，它是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数的一个css单位，也就是我们
前端常说的适配单位rem。
我们可以通过 document.documentElement 获取到根元素root。
1rem等于多少px呢？
1rem等于html根元素设定的font-size的px值，假如我们在css里面设定下面的css。
html{font-size:14px}
那么后面的CSS里面的rem值则是以这个14来换算，例如设定一个div宽度为3rem,高度为2.5rem.则它换算成px为width:42px.height:35px，同理，假如一个设计稿为宽度42px,高度为35px，则换成成rem，则是42/14=3rem，35/14=2.5rem。
如果css里面没有设定html的font-size，则默认浏览器以1rem=16px来换算
我们也没必要自己一个一个算，可以用编辑器自带的插件，我用的是vscode,可以在安装插件 px to rem 或者 px2rem
自动转换。
接下就是实现：
首先我们要把默认值改成 100px，
在插件的设置中将默认的16px 改成100px，再来使用转换
不用16px,来转换这样是有原因的，（改成100相当于放大了改变比例，如果是16px会导致，改变到一定程度后，宽高几乎不发生改变）
这样不管你是web端，还是移动端互换都能自适应
我们将默认值100px。当做常规比例。（浏览器宽/设计稿宽）*100px;
我们可以动态改变 html的font-size,大小来实现自适应。
封装一个方法，监听页面旋转，和大小的改变。（使用时直接引入js即可）
(function () {
function setFontSize() {
var winWidth = document.documentElement.clientWidth//获取浏览器宽
//设置root的fontSize
document.documentElement.style.fontSize = (winWidth / 1920)*100 + 'px'//（浏览器宽/设计稿宽）*100px;
console.log(winWidth)
console.log(document.documentElement.style.fontSize)
}
var evt = 'onorientationchange' in window ? 'orientationchange' : 'resize'//判断是否有旋转属性(有旋转的为平板和移动端)
console.log(evt)
var timer = null
//监听，屏幕旋转，和web端，大小改变事件，
window.addEventListener(
evt,
function () {
clearTimeout(timer)
timer = setTimeout(setFontSize, 300)//防止改变过快还未执行
},
false
)
window.addEventListener(
'pageshow',
function (event) {
if (event.persisted) {
clearTimeout(timer)
timer = setTimeout(setFontSize, 300)//页面显示(pageshow)事件
}
},
false
)
// 初始化加载js文件时
setFontSize()
})()
上一篇： 【HTML】如何判断当前浏览器是否是IE
下一篇： Vue 点击li动态改变元素样式