解决移动端适配问题

方法一：使用rem

准备：在实际开发中，一般设计稿都是给定的，而且设计稿中的元素的大小也是给定px值的，比如一般给定设计稿适应的屏幕宽度为750px；

问题：ui设计师给定的设计稿是在移动设备屏幕为750px下的显示效果，而针对于使用不同设备的用户，其显示屏幕宽度必然是不同的，因此我们需要根据ui设计图做相应的适配；

思路：假设一个元素宽度为200px，那么我要是的这个为w:200px的元素在750px设备和375px（或者其他设备）上显示的效果一样

rem怎么做配置_移动端

可以得到x=100，但是这只是针对了屏幕为375px的设备，也就是相当于写定了元素的宽度，那么，我们是不是可以想到通过一种方案，设置一种方案使得当设备屏幕改变时，元素的大小也随之改变呢？

解决：由于在尺寸单位中，1rem=根元素字体大小（html），控制当屏幕大小改变是，改变根元素字体大小，使得其他元素的大小使用rem单位来参照根元素字体大小变化而变化：

比如设计稿宽度为750px，字体大小font-size：32px，那么我其他所有设备都要以这个设计稿为基准，去动态改变不同设备下根元素字体的大小；

其中转换关系如下：

rem怎么做配置_ui设计_02

其中，设备上屏幕的宽度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；，则有其相应的关系如下：

rem怎么做配置_rem怎么做配置_03

普通：
即当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适配

    1. 对于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";
	})()