【移动端适配方案一弹性布局】@media标签+rem+viewport实现移动端屏幕适配

Dear 丶 2022-05-22 13:24 609阅读 0赞

另一篇布局 方案：[【移动端适配方案二 弹性布局】Flex弹性布局+rem实现移动端适配（JS+rem+viewport）][_Flex_rem_JS_rem_viewport]

# 一、从设计稿说起： #

采用rem来布局，其实设计稿是多大都没有关系，设计稿给480、600或者750都可以，其他尺寸也可以，你就想成它是一张A4纸，然后这些数字只是对这张纸的最大计量单位。反正一张图就那么大，无论计量单位是多少，UI设计师能够在一张A4上给的东西都是一样的。比如说要在这个A4纸的设计稿上横向排列连个元素一个占比1:2，那么在设计稿上的体现就是下图：

![70][]

对，关键词是元素在设计稿上的**占比、比例，**划重点啊~，它设计稿的大小没有关系，那只是设计师的最大计量单位，如上图如果480的设计稿，要放1:2的元素那么就是160px:320px，如750的设计稿这两个元素在设计稿上体现出来就是250px:500px。总之rem的核心就是百分比还原设计稿。

为了更形象的说明，我给出如下图：给定设计稿750px，设置viewport为理想视口，然后通过计算屏幕与设计稿的缩放比例，再用比例乘以font-size基准值100px得到对应屏幕下设置的html的font-size

![70 1][]

总结：

前端开发工程师根据UI设计师给的设计稿进行开发。
    为了保证在各种屏幕上的不失真，就要根据实际屏幕宽度做等比例换算，才能写进CSS：需要满足
    
    1、写入CSS的尺寸/屏幕宽度 = UI图标注的尺寸/UI图宽度    （由于设置了理想视口，所以视口宽度=屏幕宽度，这里在比值的时候就直接用屏幕宽度）
       即：写入CSS的尺寸 = (UI图标注的尺寸*屏幕宽度)/UI图宽度
    2、我们将根元素基准值设置为100px
       然而为了不失真要计算出对应的比例，于是1rem = 屏幕宽度/UI设计图宽度*100px
       即：屏幕640px，给的设计稿宽640px，那么这种情况下1rem就表示100px
       如果屏幕320px，给的设计稿宽640px，那么这种情况下1rem就表示50px
       要想做成响应式，只需要配合@media计算好对应屏幕下html font-size的值。
    3、于是：写入CSS的尺寸 = UI图标注的尺寸/100px*1rem

# **二、同一尺寸设计稿在不同屏幕下：** #

接下来我们以iphone6的屏幕375来说明，如何将设计稿转化成前端页面。

使用黑科技rem，rem是什么，看这里[一些名词介绍][Link 1]。

根据上面给出的计算公式

1rem = 屏幕宽度/UI设计图宽度\*100px

我们计算出iphone6的375尺寸：

设计稿375px情况下。1rem=100px

设计稿480px情况下。rem=78.125px

设计稿600px情况下。1rem=62.5px

设计稿750px情况下。1rem=50px

**接下来，我们现在关注设计稿375**

设计稿375px的时候要想在iphone6的375下显示完整，由于设置viewport为理想视口ideal viewport（[关于三种viewport的介绍][viewport]），发现原来是1:1的（屏幕375px，设计稿也是375px），那么好办了。直接两个元素125px和250px就好了。对这样在这个屏幕下是可以了，但是屏幕变了比如

我们计算出iphone6p的414尺寸：

设计稿375px情况下。1rem=110.4px

设计稿480px情况下。1rem=86.25px

设计稿600px情况下。1rem=69px

设计稿750px情况下。1rem=55.2px

那么这样直接设置元素为px就比较麻烦。于是我们用rem单位。设置好html的font-size为对应屏幕大小下的对应尺寸（就是1rem=后面的数字px）

**比如现在设计稿375**

@media (min-width: 375px) {
          html {
              font-size: 100px;
          }
      }

@media (min-width: 414px) {
        html {
            font-size: 110.4px;
        }
    }

于是两个元素可以这么设置，不管这样都除以100就可以了，然后不用管屏幕，因为对应屏幕的根元素大小已经设置好了，所以元素大小1.25rem和2.5rem。

ok，来验证一下:

屏幕375=1.25\*100+2.5\*100

屏幕414=1.25\*110.4+2.5\*110.4

可能大家有疑问414的屏幕中元素尺寸变了呀。没错在375的设计稿在414的屏幕中显示的这两个元素的尺寸变成了这样125px==>138px、250px==>276px。但是138:276=125:250=1:2，对吗？

**因此，在还原设计稿的时候关键是计算设计稿中元素相对设计稿的比例，从而根据这个比例计算出不同屏幕尺寸中元素占屏幕宽度的多少**

所以只要用@media设置好对应屏幕中html的font-size之后，代码中的元素只要用设计稿上的元素除以100单位用rem就可以适应各个屏幕了。看图更具体~~

![70 2][]

# **三、不同尺寸设计稿在同一尺寸屏幕下：** #

那么问题来了，设计是给一个750的设计稿呢？其实，我们只需要计算各个屏幕下1rem是多少（公式**1rem = 屏幕宽度/UI设计图宽度\*100px**），然后设计稿上元素再换算的时候全部除以100，具体看下图：

(如果对为什么是100没搞明白可以看这里[为什么根元素font-size设置成100px][font-size_100px])。

![70 3][]

**原理讲完了，开始下面是拿来即用的代码~**

**方式一：采用@media在css中设置对应屏幕下的html的font-size**

首先是sass代码：

@charset "utf-8";
    /*
    1、写入CSS的尺寸/屏幕宽度 = UI图标注的尺寸/UI图宽度
    即：写入CSS的尺寸 = (UI图标注的尺寸*屏幕宽度)/UI图宽度
    2、我们将根元素设置为100px，则1rem=100px
    然而为了不失真要计算出对应的比例，于是1rem = 屏幕宽度/UI设计图宽度*100px
    即：屏幕640px，给的设计稿宽640px，那么这种情况下1rem就表示100px
    如果屏幕320px，给的设计稿宽640px，那么这种情况下1rem就表示50px
    要想做成响应式，只需要配合@media计算好对应屏幕下html font-size的值。
    当然为了好计算，我们全部以100px为基准
    3、于是：写入CSS的尺寸 = UI图标注的尺寸/100px*1rem
    */
    // 计算rem的基准字体
    $rem-base-font-size: 100px;
    // UI设计图的分辨率宽度
    $UI-width: 750px;
    // 需要适配的屏幕宽度
    $device-widths: 240px, 320px, 360px, 375px, 384px, 411px, 414px, 424px, 480px, 540px, 640px, 720px, 750px, 768px, 800px, 980px, 1024px, 1080px, 1152px, 1366px, 1440px, 2160px;
     //根据不同设备的屏幕宽度，定义<html>的基准font-size
    @each $current-width in $device-widths {
      @media (min-width: $current-width) {
        html {
          font-size: $current-width * $rem-base-font-size/$UI-width;
        }
      }
    }

**转化成css代码**

@charset "UTF-8";
    /*
    1、写入CSS的尺寸/屏幕宽度 = UI图标注的尺寸/UI图宽度
    即：写入CSS的尺寸 = (UI图标注的尺寸*屏幕宽度)/UI图宽度
    2、我们将根元素设置为100px，则1rem=100px
    然而为了不失真要计算出对应的比例，于是1rem = 屏幕宽度/UI设计图宽度*100px
    即：屏幕640px，给的设计稿宽640px，那么这种情况下1rem就表示100px
    如果屏幕320px，给的设计稿宽640px，那么这种情况下1rem就表示50px
    要想做成响应式，只需要配合@media计算好对应屏幕下html font-size的值。
    当然为了好计算，我们全部以100px为基准
    3、于是：写入CSS的尺寸 = UI图标注的尺寸/100px*1rem
    */
    @media (min-width: 240px) {
        html {
            font-size: 32px;
        }
    }
    @media (min-width: 320px) {
        html {
            font-size: 42.66667px;
        }
    }
    @media (min-width: 360px) {
        html {
            font-size: 48px;
        }
    }
    @media (min-width: 375px) {
        html {
            font-size: 50px;
        }
    }
    @media (min-width: 384px) {
        html {
            font-size: 51.2px;
        }
    }
    @media (min-width: 411px) {
        html {
            font-size: 54.8px;
        }
    }
    @media (min-width: 414px) {
        html {
            font-size: 55.2px;
        }
    }
    @media (min-width: 424px) {
        html {
            font-size: 56.53333px;
        }
    }
    @media (min-width: 480px) {
        html {
            font-size: 64px;
        }
    }
    @media (min-width: 540px) {
        html {
            font-size: 72px;
        }
    }
    @media (min-width: 640px) {
        html {
            font-size: 85.33333px;
        }
    }
    @media (min-width: 720px) {
        html {
            font-size: 96px;
        }
    }
    @media (min-width: 750px) {
        html {
            font-size: 100px;
        }
    }
    @media (min-width: 768px) {
        html {
            font-size: 102.4px;
        }
    }
    @media (min-width: 800px) {
        html {
            font-size: 106.66667px;
        }
    }
    @media (min-width: 980px) {
        html {
            font-size: 130.66667px;
        }
    }
    @media (min-width: 1024px) {
        html {
            font-size: 136.53333px;
        }
    }
    @media (min-width: 1080px) {
        html {
            font-size: 144px;
        }
    }
    @media (min-width: 1152px) {
        html {
            font-size: 153.6px;
        }
    }
    @media (min-width: 1366px) {
        html {
            font-size: 182.13333px;
        }
    }
    @media (min-width: 1440px) {
        html {
            font-size: 192px;
        }
    }
    @media (min-width: 2160px) {
        html {
            font-size: 288px;
        }
    }

**关于安装sass，请参考[phpstorm安装sass][phpstorm_sass]**

**用法**

1、页面顶部加上

<metaname="viewport"content="width=device-width, initial-scale=1.0, maximun-scale=1.0, user-scalable=no">

2、将上面给的css代码复制到页面里面。

3、所有的设计稿上面的实际px全部除以100之后单位是rem就可以了

4、我是以设计稿750计算的，所以在750px的时候font-size是100px，如果你的设计稿尺寸不一样，在sass代码中修改一下重新生成即可。

这里还有一套对应每个像素屏幕的sass代码，css代码太多自己生成吧。但是上面那个已经将主流屏幕包含了，没必要每个像素都适配。只需要在发布新机型的时候，将新机型尺寸适配一下就ok

// 计算rem的基准字体
    $rem-base-font-size: 100px;
    
    // UI设计图的分辨率宽度
    $UI-width: 750px;
    
    @for $device-width from 1px through 2000px {
      @media (min-width: $device-width) {
        html {
          font-size: $device-width * $rem-base-font-size/$UI-width;
        }
      }
    }

**方式二：采用js的动态设置当前屏幕下的html的font-size**

[【移动端适配方案二 弹性布局】Flex弹性布局+rem实现移动端适配（JS+rem+viewport）][_Flex_rem_JS_rem_viewport]

[_Flex_rem_JS_rem_viewport]: https://blog.csdn.net/TCF_JingFeng/article/details/80814015
[70]: /images/20220522/dae6724d736e413483347a6aafa2b3d4.png
[70 1]: /images/20220522/a1e89d601e35433cbb167973dab23684.png
[Link 1]: https://blog.csdn.net/tcf_jingfeng/article/details/80801079
[viewport]: https://www.cnblogs.com/2050/p/3877280.html
[70 2]: /images/20220522/e7618f5a43044d378cad4fb513ecda70.png
[font-size_100px]: https://blog.csdn.net/TCF_JingFeng/article/details/80813799
[70 3]: /images/20220522/0cd213b5ab1841ec803d133c1bab33e7.png
[phpstorm_sass]: https://blog.csdn.net/TCF_JingFeng/article/details/80803424