H5移动端—移动端布局及适配（rem）

比眉伴天荒 2023-06-09 04:56 40阅读 0赞

### 1.rem适配原理 ###

首先清除一下默认样式，这个基本上所有写H5的都通用

a,
    input,
    button {
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    input,
    button {
      -webkit-appearance: none;
      border-radius: 0;
    }
    body {
      margin: 0;
      -webkit-user-select: none;
    }
    body * {
      -webkit-user-select: none;
      font-family: Helvetica;
    }
    body {
      -webkit-text-size-adjust: 100%;
    }
    h1 {
      margin: 0;
    }
    a {
      text-decoration: none;
    }
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    img {
      vertical-align: top;
    }
    html,
    body {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

现在我们看看如何使用rem解决适配问题

>             rem vs em (rem的r代表root)
> 
>                           rem 是相对根节点的字体大小进行计算的
> 
>                           em 是相对长度单位。相对于当前对象内文本的字体尺寸。

所以，rem的关键是根结点的字体大小

接下来看一下完整的代码

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width,user-scalable=no"/>
    		<title></title>
    		<script>
    		    (function(){
    		    	var html = document.documentElement;
    		    	var hWidth = html.getBoundingClientRect().width; //拿到html的宽度。打印出来是320
    				 // 320/16 = 20  所以1rem = 20px  
    				//  因为此处除以16，所以16rem刚好把屏幕占满
    				html.style.fontSize = hWidth/16 + "px";
    
    				// 那么80px === 4rem  
    		    })()
    		</script>
    		<style>
    			body{
    				margin: 0;
    			}
    			div{
    				float: left;
    				box-sizing: border-box;
    				width: 4rem;  //此处之前写的是80px,转换成就是4rem
    				height: 4rem;  //此处之前写的是80px,转换成就是4rem
    				border: 1px solid #000;
    			}
    			div:nth-of-type(1){
    				background-color: red;
    			}
    			div:nth-of-type(2){
    				background-color: yellow;
    			}
    			div:nth-of-type(3){
    				background-color: green;
    			}
    			div:nth-of-type(4){
    				background-color: pink;
    			}
    		</style>
    	</head>
    	<body>
    		
    		<div></div>
    		<div></div>
    		<div></div>
    		<div></div>
    	</body>
    </html>

看到这里相信很多人和我一样还是云里雾里，没关系，继续往下看。

<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width,user-scalable=no"/>
    		<title></title>
    		<script>
    		    (function(){
    		    	var html = document.documentElement;
    		    	var hWidth = html.getBoundingClientRect().width;
    				html.style.fontSize = hWidth/15 + "px";  //font-size ==》
    			})()
    		// 给的设计稿w = 750px
    		// 所以量出来var hWidth = html.getBoundingClientRect().width === 750
    		// 750/15 = 50   也就是把这个屏幕平分成15份，font-size = 50px  1rem = 50px
    		
    		// 那么开发的时候，假如在设计稿中量出来一个103px,那么就在css中写成103/50 = 2.06rem就好了
    		// 那么问题来了，每一次从px转成rem是不是还要用计算器去除一下，很多人推荐了koala这个工具，
    		// 自动把px可以转成rem。现在vscode有了相应的插件cssrem。
    		</script>
    		<link rel="stylesheet" type="text/css" href="bs/css/bootstrap.css"/>
    		<link rel="stylesheet" href="css/index.css" />
    	</head>

其实这个界面已经实现了适配。具体代码可以在我的github中去下载。[https://github.com/JiaojSun][https_github.com_JiaojSun]（h5basic）

有人可能觉得这个做法怎么和网上说的大多数适配不太一样，其实原理是一样的，只是理解起来更简单，现在看看网易的做法。

document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';

这个6.4怎么来的，当然是根据设计稿的横向分辨率/100得来的。下面总结下网易的这种做法：

先拿设计稿竖着的横向分辨率除以100得到body元素的宽度：

\- Hide code

如果设计稿基于iphone6，横向分辨率为750，body的width为750 / 100 = 7.5rem
    如果设计稿基于iphone4/5，横向分辨率为640，body的width为640 / 100 = 6.4rem

所以这个是6.4还是7.5是看你的设计稿的。这样的话px=>rem   只需要除以100而不是50这样纯粹是为了好计算。

有一篇博文写的非常好，推荐看看[从网易与淘宝的font-size思考前端设计稿与工作流][font-size]

### 2.rem使用 ###

总结一下，假如你初次j接触移动端h5，来不及看上面的原理，那么直接引入下面代码，然后设计稿中有个宽度是109px，那么你直接写成1.09rem。(前提是设计稿是750px哦，如果设计稿是375那么7.5也要改)

以上已经把移动端适配讲的清清楚楚了。