如何rem解决移动端适配问题？

最新推荐文章于 2024-07-19 22:55:18 发布

学学学无止境

最新推荐文章于 2024-07-19 22:55:18 发布

阅读量1.5k

点赞数

分类专栏： CSS HTML 响应式布局

本文链接：https://blog.csdn.net/weixin_46872121/article/details/110245302

版权

CSS 同时被 3 个专栏收录

20 篇文章 0 订阅

订阅专栏

HTML

9 篇文章 1 订阅

订阅专栏

响应式布局

3 篇文章 0 订阅

订阅专栏

解决移动端适配问题

方法一：使用rem
准备：在实际开发中，一般设计稿都是给定的，而且设计稿中的元素的大小也是给定px值的，比如一般给定设计稿适应的屏幕宽度为750px；
问题：ui设计师给定的设计稿是在移动设备屏幕为750px下的显示效果，而针对于使用不同设备的用户，其显示屏幕宽度必然是不同的，因此我们需要根据ui设计图做相应的适配；
思路：假设一个元素宽度为200px，那么我要是的这个为w:200px的元素在750px设备和375px（或者其他设备）上显示的效果一样
200px/750px=x/375px

可以得到x=100，但是这只是针对了屏幕为375px的设备，也就是相当于写定了元素的宽度，那么，我们是不是可以想到通过一种方案，设置一种方案使得当设备屏幕改变时，元素的大小也随之改变呢？
解决：由于在尺寸单位中，1rem=根元素字体大小（html），控制当屏幕大小改变是，改变根元素字体大小，使得其他元素的大小使用rem单位来参照根元素字体大小变化而变化：
比如设计稿宽度为750px，字体大小font-size：32px，那么我其他所有设备都要以这个设计稿为基准，去动态改变不同设备下根元素字体的大小；
其中转换关系如下：
在这里插入图片描述

其中，设备上屏幕的宽度w是可以通过js获取到的

var w = document.documentElement.clientWidth / 16;//获取视口大小
var styleNode = document.createElement("style");
/* 设置此时根元素的fontsize，向html的style样式中添加font-size属性*/ 
styleNode.innerHTML = "html{font-size:" + w + "px!important}"; //向head标签中添加style标签，其中包含html{font-size:w;} document.head.appendChild(styleNode);

注意：这里的16可以任意（但不能小于12，因为浏览器中最小字不能小于12）

由于1rem=font-size（这里将根元素字体设置为clientWidth / 16，即可以理解为将屏幕均分为16等分。即16rem=16fontSize-----
16rem=16 clientWidth / 16= clientWidth—也就是说16rem相当于屏幕总宽（这里说的总宽是你在实际设备变化的总宽，也就是我们通过js监测到你使用设备的宽度）

那么接下来即是要讨论这个根元素字体大小、屏幕总宽（16rem）与设计稿（750px）之间的关系了!

比如在屏幕宽度为w1=750px设计稿下，其中ui设计师设定了某个元素的大小为x1=40px（注意这是在w1=750px设备上显示的效果，那么问？在我获取到你正在使用的设备屏幕时（可能与w1=750px不同也可能相同，这里先假设为w2=375px；，则有其相应的关系如下：
在这里插入图片描述

普通：
即当w1=750px，x2=40px，w2=375px
解得x1=20px；

即当w1=750px，x2=40px，w2=320px
解得x1=17.066667px；
使用rem之后：（动态）
1.获取到到胡屏幕宽：16rem
2.当元素大小为40px时：x1/40=16rem/750---------》 x1=(1640)/750 rem
3.当元素大小为100px时：x1/100=16rem/750-------》x1=(16100)/750 rem
4.因此根据以上规律：我们可以使用less+rem结合解决移动端适配问题
比如在less文件中定义变量@rem： 16rem/750;那么对于设计稿上指定x1px元素大小可以使用x1*@rem来表示（此时便可以解决元素大小根据根元素字体大小变而变）
16rem在不同屏幕下值不同

当@rem：750/16rem时
元素的w为300px可以设置为：300/@rem（即将px换位@rem）
当@rem：16rem/750时
元素的w为300px可以设置为：300*@rem（即将px换位@rem）

@rem: 750/16rem;
#test {
width: 300/@rem;
height: 200/@rem;
background-color: pink;
}

rem适配
rem适配原理：改变了一个元素在不同设备上占据的css像素的个数
rem适配的优缺点

优点:没有破坏完美视口
缺点:px值到rem的转换太复杂*/

总结：
1.在js中添加如下代码：

<script type="text/javascript">		
	
			
		(function(){
            var styleNode = document.createElement("style");
            var w = document.documentElement.clientWidth/16;//获取视口大小
            /* 设置此时根元素的fontsize，向html的style样式中添加font-size属性*/
			styleNode.innerHTML = "html{font-size:"+w+"px!important}";
			//向head标签中添加style标签，其中包含html{font-size:w;}
			document.head.appendChild(styleNode);
		})()
	</script>

2.当不是使用less时css样式：（html代码）

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#test{
				width: 2rem;
				height: 2rem;
                background: pink;
                text-align: center;
                line-height: 2rem;
			}
		</style>
	</head>
	<body>
		<div id="test">test</div>
	</body>

3.当是使用rem与less结合时（使用less是为了解决复杂换算问题，使用stylus或者sass同理）

@rem: 750/16rem;

#test {
  width: 300/@rem;
  height: 200/@rem;
  background-color: pink;
}

方法二：viewport适配

对于viewport适配，实际是更改视口的大小，也就是说可以将其当作近大远小的原理，当减小视口宽度之后当前元素的可视大小也会减小，当增加视口宽度之后当前的元素可视大小会增大。从而进行移动端的适配。（主要思想是根据设计稿中所给的w和设备上的w的比值之间的关系进行适配）

(function(){
			 /* targetW的值为设计图的宽度大小,此时设置的宽度大小为750 */
            var targetW = 750;
            /* 获取视口缩放的比例 -----即设备上的w1/设计稿上的宽w2*/
            var scale = document.documentElement.clientWidth/targetW;
            /* 获取到meta标签 */
            var meta =	document.querySelector("meta[name='viewport']");
            /* 向其添加缩放的比例 */
			meta.content="initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no";
	})()