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

时间:2021-1-18 作者:admin

前言:

首先

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

第二

适配是一件特简单的事情,别想太复杂。像什么数学换算之类的,如果数学不太好的同学也不用太焦虑,现在开发有很多辅助工具,世界上有几个人能弄懂1+1为什么等于2?开开心心的敲代码它不香么?

第三

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

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

首先,来看看手机上网站的效果

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

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

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

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

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

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

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

那问题来了,怎么做呢?

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

<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

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

然后用手机打开,是这个样子的:

现在我用了浏览器里的模拟器,模拟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  看看效果:

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

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

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

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

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

果然,只要我们修改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!

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

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

<!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呢?

嗯,有点晕,来来来,列一下算式:

1rem = 75px

182px = ?rem

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

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

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

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

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

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

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

总结移动端适配:

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

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

你问我vw去哪了?

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

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

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。