五分钟弄懂移动端适配之 —— rem,vw方案-Js中文网

前言：

首先

这篇文章讲的是网页在移动端的适配问题，这里面没有物理像素之类的事，这是两个东西，别混为一谈！有些人为了博眼球，一上来就是什么物理像素，像素比之类的字眼，这俩东西对移动端确实有影响，但是没那么大，基础的同学不需要去深究。

Javascript中文网是以前端进阶资源教程分享为主的专业网站

第二

适配是一件特简单的事情，别想太复杂。像什么数学换算之类的，如果数学不太好的同学也不用太焦虑，现在开发有很多辅助工具，世界上有几个人能弄懂1+1为什么等于2？开开心心的敲代码它不香么？ Javascript中文网是以前端进阶资源教程分享为主的专业网站

第三

这篇文章讲得会比较简单直接，如果想要更加深入的了解，以及想知道为什么会有物理像素，像素比之类的概念，以及它们对于移动端的影响，期待下一篇

我们知道，随着移动互联网的发展，现在已经很少人会再电脑上去看网站了，所以作为开发者，我们顺其自然，必须要去优化自己的网站，让它在手机上依然可以正常显示，这也是为什么会出现适配这个问题的根本原因：要把一个那么大的网站放到手机上去

首先，来看看手机上网站的效果 Javascript中文网是以前端进阶资源教程分享为主的专业网站

先来思考一个问题，如果想要像右边手机上那样，在页面中显示一个宽度为屏幕宽度50%的色块，应该怎么做？这个我估计大家都知道，写个div，宽度50%不就好了？

Javascript中文网是以前端进阶资源教程分享为主的专业网站

但是如果box的外面有一个父级，并且不确定父级的宽度时多少的时候，如何保证box的宽度是屏幕宽度的一半呢？

 html
<div class="main">
  <div class="box"></div>
</div>

Js中文网 – 前端进阶资源教程 www.javascriptC.com,typescript 中文文档
Javascript中文网是以前端进阶资源教程分享为主的专业网站，包括：前端、大厂面试题、typescript教程、程序人生、React.js……等，以帮助开发者成长为愿景的社区

因为css中，宽度如果给百分比，那么这个元素的宽度时根据其父级的宽度来计算的，也就是说在上面的代码中，如果main的宽度是屏幕宽度的一半，那么box的宽度就只有屏幕宽度的四分之一了，所以大多数情况下，在移动端上使用百分比都是不太好的一个单位。因为它的参考对象是不固定的

所以我们需要一个具有唯一参考对象的相对单位，rem应运而生

先来看看rem 它是个相对单位，它相对的是根元素（html）的font-size大小，也就是说，如果html的font-size设置为20px, 那么一个rem就是20px;

我们正是利用这一点，让页面在不同宽度的手机上进行放大缩小，从而达到适配的目的的。当屏幕宽度大，我们只需要把html的font-size属性变大，整个页面就变大了，当屏幕宽度变小，font-size相应减小就可以了。这是移动端适配的基本思路，其他的都是万变不离其宗。

Javascript中文网是以前端进阶资源教程分享为主的专业网站

那问题来了，怎么做呢？

第一步，调整页面视口设置

 html
<meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

就是这串代码，估计不说你们也知道是用来做什么的。

为什么会有这个呢，那是因为浏览器厂商在开发手机浏览器的时候，考虑到很多网站没有针对移动端去做适配，所以不管手机多大，默认在手机上打开浏览器，里面的宽度都是980px。

那既然我们都讨论移动端适配了，那么这个980就没用了，我们的目的是要让手机的分辨率还原，你手机分辨率大，自然宽度就大一些，分辨率小，页面的宽度就小一些，这样显示的效果也是最合适的，眼睛看着才舒服。

第二步，把单位换算成rem

！！！这里是重点，敲黑板啦。

还是刚才的那个box，我现在把它的宽度变成写成 5rem，这个数字随便写，无所谓 ma

 css
body{
    margin: 0;
}
.box{
    width: 5rem;
    height: 200px;
    background: #0b2e13;
}

然后用手机打开，是这个样子的：

Javascript中文网是以前端进阶资源教程分享为主的专业网站

现在我用了浏览器里的模拟器，模拟iPhone6 Plus，这个手机的屏幕宽度时414px。然后我们知道文字大小在没有设置的情况下一般是16px 所以现在的box宽度是80，上图能看到

现在，我不想修改box的宽度值，也就是说这个5rem不动，但是我想让box的宽度变成屏幕宽度的一半，也就是207px怎么办呢？

那么我肯定就需要去修改html的font-size了，我们想要让5rem 等于207，那么1rem应该等于多少？这个算式大家应该没问题吧？也就是207除以5，得到41.4了。数学不好的用计算器敲一下哈

现在我们去修改html的font-size，把它变成41.4 看看效果：

 css
html{
    font-size: 41.4px;
}
body{
     margin: 0;
}
.box{
    width: 5rem;
    height: 200px;
    background: #0b2e13;
}

Javascript中文网是以前端进阶资源教程分享为主的专业网站

果然，box的宽度就变成207了，也就是屏幕宽度的一半了。

现在我再换一个小一点的设备看看，换iPhone5

Javascript中文网是以前端进阶资源教程分享为主的专业网站

可以看到box的宽度还是207没变，但是它已经占据屏幕宽度的一大半了，但是我们要的效果是box依然只占屏幕宽度的一半怎么办？那就再次修改html的font-size咯。

目前iPhone5 的宽度可以看到是320，一半也就是160。所以用160除以5 得到32。所以设置html的font-size为32px, 得到效果：

Javascript中文网是以前端进阶资源教程分享为主的专业网站

果然，只要我们修改html的font-size就能达到效果，但是我们不可能说换一个设备就去换一下html的font-size呀，因为我们不知道用户用的是什么手机。所以这时候我们就需要找人帮忙了，找谁呢？找js，js我们会，没问题，不需要太高深的js技巧。

但是找到js怎么做呢？我们不妨来观察一下。

第一次用iPhone6去看的时候，iPhone6的宽度时414，然后font-size设置成41.4px；

第二次换iPhone5，iPhone的宽度是320，然后需要把font-size设置成32px;

发现问题了么？再仔细看看？有没有发现font-size总是屏幕宽度的十分之一？

那么这时候好办了，我们只需要用js获取一下屏幕宽度，然后动态修改一下html的font-size不就好了？So Easy！

 javascript
var Root = document.documentElement;
Root.style.fontSize = window.innerWidth/10 + 'px';

现在把css里的font-size设置去掉就OK啦！

 html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var Root = document.documentElement;
        Root.style.fontSize = window.innerWidth/10 + 'px';
    </script>
    <style>
        body{
             margin: 0;
        }
        .box{
            width: 5rem;
            height: 200px;
            background: #0b2e13;
        }
    </style>
</head>
<body>

<div class="box"></div>

</body>
</html>

这是现在的所有代码，现在box在任何手机上显示都是屏幕宽度的一半啦！

不过别急，还有一个问题！！！ box的5rem到底是怎么来的？

现在我们知道5rem代表屏幕宽度的一半，如果设计稿是750宽度，那么代表的就是 375px,

那如果再设计搞上量得一个元素的宽度是180呢？312呢?

不着急，我们来看看375px和5rem的关系，

375px 等于 5个rem，那么1个rem等于多少px ? 75px对吧

那么，如果设计稿上量到的宽度是182px，那么等于多少rem呢？

Javascript中文网是以前端进阶资源教程分享为主的专业网站

嗯，有点晕，来来来，列一下算式：

1rem = 75px

182px = ?rem

是这样没错吧，那么换算一下是不是182除以75, 得到的就是rem的个数了呢？

所以，最终的结果就是：设计稿上，量得的宽度直接除以75 得到的就是rem数了

换算之后，得到182px = 2.4267rem

我们把这个结果放到代码上去看看（注意，设计稿的宽度时750，所以放到750的设备上才会1：1还原）

 css
.box{
    width: 2.4267rem;
    height: 200px;
    background: #0b2e13;
}

现在我们就用一个宽度750的设备去看看，得到的宽度会不会是182呢？

Javascript中文网是以前端进阶资源教程分享为主的专业网站

如此，我们的移动端适配就算是完美成功啦！

总结移动端适配：

1，设置视口
2，用js动态修改html的font-size 如: font-size = 屏幕宽度 / 10
3，换算rem 如： 182 / 75

最后的最后，你有没有发现这个75有点特殊呢？嘿嘿，等你有更重大的发现哦~

你问我vw去哪了？

再想想vw是啥意思？1vw等于屏幕宽度的1/100对不，再回去看看总结里面的第二条，我们是不是用js修改了font-size的大小，让他始终保持是屏幕宽度时十分之一？这样的话，换算一下，屏幕宽度的十分之一不就是10vw么？

接下来怎么做还需要我继续说么？保持点神秘感吧，还不知道的评论区见…

Javascript中文网是以前端进阶资源教程分享为主的专业网站

这是我们团队的开源项目 element3
一个支持 vue3 的前端组件库

作者：Mr_无忧
链接：https://juejin.im/post/6894134575094562824

看完两件小事

如果你觉得这篇文章对你挺有启发，我想请你帮我两个小忙：

关注我们的 GitHub 博客，让我们成为长期关系
把这篇文章分享给你的朋友 / 交流群，让更多的人看到，一起进步，一起成长！
关注公众号 「画漫画的程序员」，公众号后台回复「资源」免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区，目前已经覆盖和服务了超过 300 万开发者，你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有，如若转载，请注明出处

转载请注明：文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题：五分钟弄懂移动端适配之 —— rem,vw方案

链接：https://www.javascriptc.com/4633.html

五分钟弄懂移动端适配之 —— rem,vw方案

原文标题：五分钟弄懂移动端适配之 —— rem,vw方案 -Js中文网 · 前端进阶资源教程

首先

第二

第三

第一步，调整页面视口设置

第二步，把单位换算成rem

！！！这里是重点，敲黑板啦。

你问我vw去哪了？

原文标题：五分钟弄懂移动端适配之 —— rem,vw方案 - Js中文网 · 前端进阶资源教程

看完两件小事

五分钟弄懂移动端适配之 —— rem,vw方案

原文标题：五分钟弄懂移动端适配之 —— rem,vw方案 -Js中文网 · 前端进阶资源教程

首先

第二

第三

第一步，调整页面视口设置

第二步，把单位换算成rem

！！！这里是重点，敲黑板啦。

你问我vw去哪了？

原文标题：五分钟弄懂移动端适配之 —— rem,vw方案 - Js中文网 · 前端进阶资源教程

看完两件小事

相关推荐

请登录