一、从设计稿说起：

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

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

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

总结：

前端开发工程师根据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是什么，看这里一些名词介绍。

根据上面给出的计算公式

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

我们计算出iphone6的375尺寸：设计稿375px情况下。1rem=100px

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

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

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

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

设计稿375px的时候要想在iphone6的375下显示完整，由于设置viewport为理想视口ideal 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就可以适应各个屏幕了。看图更具体~~

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

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

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

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

方式一：采用@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

用法

1、页面顶部加上

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

采用js动态设置当前屏幕html的font-size

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

一、从设计稿说起：

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

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

猜你喜欢

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

一、从设计稿说起：

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

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

猜你喜欢

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