前端必须知道的移动端rem和vw适配

时间 2019-11-06

标签前端必须知道移动 rem 适配栏目无线繁體版

原文原文链接

移动端适配，是一个老生常谈的问题了，具体的知识点和理论知识，我也就不说了，你们能够参考下面这篇文章javascript

不要再问我移动适配的问题了css

超详细的rem+vw移动端屏幕适配方案html

下面用到的名词 rem vw less 设备独立像素等等都在这两篇文章里java

rem适配

记住一句话：rem是html标签的字体大小，即：1rem=html.style.fontSizesegmentfault

咱们先以iphone6/7/8为基础适配其余的屏幕浏览器

以iphone6/7/8为例，设备宽度为 375px(设备独立像素，即css像素)sass

1.创建以下目录

2.动态计算rem的

在home.html引入less.js和home.less,在head标签动态计算rem,代码以下bash

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
	    <meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="format-detection" content="telephone=no" >		
		<link rel="stylesheet/less" href="css/home.less" />
		<title>首页</title>
		<script > //当即执行函数 ()(function(){ //动态计算rem，以屏幕宽度375px为例  function resetRem(){ //1.获取html标签 var html=document.body||document.documentElement; //2.获取html标签的宽度,并限制最大宽度 var htmlWidth=html.getBoundingClientRect().width; if(htmlWidth>768){ htmlWidth=768 } //3.动态计算rem，将屏幕宽度分红15份（20份、25份、30份都行，整数好计算），每一份的大小就是1rem html.style.fontSize = htmlWidth / 15 + "px"; //此时为1rem=25px=html.style.fontSize } //4.页面加载时调用 resetRem(); //5.页面尺寸发生变化时再调用一下 window.onresize=function(){ resetRem(); } }) </script>
	</head>

	<body>
		
		<div class="box">
			测试用的box
		</div>
	
		<script src="js/less.js"></script>	
	</body>

</html>
复制代码

3.使用less.js将px转为rem

前面将屏幕分红15份经算出 1rem=25pxless

因此咱们在home.less中定义变量@r:25remiphone

注意，若是不是分红15份，好比分红20份，那么1rem=375/20=18.5px,则变量@r:18.5rem,；若是分红25份，那么1rem=375/25=15px,则变量@r:15rem

而后设置.box样式,宽高为200px和300px

200/25rem=8rem

300/25rem=10rem

将宽高除以变量@r，就能够获得以rem为单位的大小

@r:25rem;
 .box {
     width: 200/@r; //8rem
     height: 300/@r; //12rem
     background-color: red;
 }
复制代码

前面说到当前1rem=25px是在屏幕尺寸为375px下计算的

即1rem=html.style.fontSize=当前屏幕宽度/份数

//3.动态计算rem，将屏幕宽度分红15份（20份、25份、30份都行，整数好计算），每一份的大小就是1rem
html.style.fontSize = htmlWidth / 15 + "px";  //此时为1rem=25px=html.style.fontSize
复制代码

因此每当屏幕发生宽度发生变化时（用户手机类型不一样时）

就会从新计算rem，这样咱们获得的rem值就是根据当前屏幕宽度动态计算的，这样能够适配多种手机屏幕

4.浏览器打开查看样式

iphone6/7/8下的样式

iphone6/7/8 plus下的样式

三星s5下的样式

能够看出，在不一样屏幕下，width和height都是8rem和10rem，至于别的属性的设置，如字体、边距、定位等等，只要知道px的大小，按照width和height的设置方式便可，

vw适配

还以iphone6/7/8为例，设备宽度为 375px(设备独立像素，即css像素)

记住：100vw=当前屏幕宽度=375px

因此：1vw=3.75px=1%*当前屏幕宽度

1. 使用less.js将px转换vw

在home.less中定义一个变量@v=3.75vw

而后设置.box样式，宽高都是300px

将宽高除以变量@v，就能够获得以vw为单位的打大小

@v: 3.75vw;
 .box {
    width: 300/@v; 
    height: 300/@v;
    background-color: blue;
}
复制代码

2.浏览器打开查看样式

iphone6/7/8下的样式

iphone6/7/8 plus下的样式

三星s5下的样式

能够看出能够看出，在不一样屏幕下，width和height都是80vw，而1vw=1%*当前屏幕宽度，因此在任何手机上都能适配

总结

rem适配

优势：兼容性好
缺点：须要js进行动态计算，相对繁琐

vw适配

优势：设置超级简单，结合less/sass一个变量便可
缺点：兼容性低（貌似如今的手机都能兼容了吧）

建议

适配没有银弹，没有最优解，以上只是最简单的适配方法，另外我也是一个菜鸟，搬砖的