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

5,375 阅读4分钟

移动端适配,是一个老生常谈的问题了,具体的知识点和理论知识,我也就不说了,大家可以参考下面这篇文章

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

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

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


rem适配

记住一句话:rem是html标签的字体大小,即:1rem=html.style.fontSize

我们先以iphone6/7/8为基础适配其他的屏幕

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

1.建立如下目录

移动端适配目录.png

2.动态计算rem的

home.html引入less.jshome.less,在head标签动态计算rem,代码如下

<!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=25px

所以我们在home.less中定义变量@r:25rem

注意,如果不是分成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下的样式

i6.png


iphone6/7/8 plus下的样式

i6p.png


三星s5下的样式

s52.png


可以看出,在不同屏幕下,widthheight都是8rem10rem,至于别的属性的设置,如字体、边距、定位等等,只要知道px的大小,按照widthheight的设置方式即可,


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下的样式

i6v.png


iphone6/7/8 plus下的样式

i6vp.png


三星s5下的样式

s5v.png

可以看出 可以看出,在不同屏幕下,widthheight都是80vw,而1vw=1%*当前屏幕宽度,所以在任何手机上都能适配

总结

rem适配
  • 优点:兼容性好
  • 缺点:需要js进行动态计算,相对繁琐
vw适配
  • 优点:设置超级简单,结合less/sass一个变量即可
  • 缺点:兼容性低(貌似现在的手机都能兼容了吧)
建议

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