十、rem适配方案

十、rem适配方案

1.1 rem适配方案

1、让一些不能等比例自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。

2、使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比例缩放的适配。

苏宁手机端用的就是rem+媒体查询

苏宁易购(Suning.com)-家电家装成套购，专注服务省心购！

1.2 rem实际开发适配方案

1、按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小；（媒体查询）

2、css中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem为单位的值。

1.3 rem适配方案技术使用（市场主流）

技术方案1：

less

媒体查询

rem

技术方案2（推荐）

flexible.js

rem

技术方案1与技术方案2 原理是一样的，只是方式不同。

总结：

1、两种方案现在都存在。

2、方案2更简单，现阶段大家无需了解里面的js代码。

1.4 rem实际开发适配方案1

rem+媒体查询+less技术（用来计算除法，计算出rem，用盒子的实际像素除以html元素的字体大小）

1、设计稿常见的尺寸宽度

 

一般情况下，我们以一套或两套效果图适应大部分的屏幕，放弃极端屏或对其优雅降级，牺牲一些效果，现在基本以750像素为准。

2 动态设置html标签font-size大小

3 元素大小取值方法

 1.5 项目实战

 

cmmon.css

a {

  text-decoration: none;

}

html {

  font-size: 50px;

}

@media screen and (min-width: 320px) {

  html {

    font-size: 21.33333333px;

  }

}

@media screen and (min-width: 360px) {

  html {

    font-size: 24px;

  }

}

@media screen and (min-width: 375px) {

  html {

    font-size: 25px;

  }

}

@media screen and (min-width: 384px) {

  html {

    font-size: 25.6px;

  }

}

@media screen and (min-width: 400px) {

  html {

    font-size: 26.66666667px;

  }

}

@media screen and (min-width: 414px) {

  html {

    font-size: 27.6px;

  }

}

@media screen and (min-width: 424px) {

  html {

    font-size: 28.26666667px;

  }

}

@media screen and (min-width: 480px) {

  html {

    font-size: 32px;

  }

}

@media screen and (min-width: 540px) {

  html {

    font-size: 36px;

  }

}

@media screen and (min-width: 720px) {

  html {

    font-size: 48px;

  }

}

@media screen and (min-width: 750px) {

  html {

    font-size: 50px;

  }

}

less的使用技巧

例如在index.less中导入common.less文件

在index.less中使用@import "common"

这样index.less就会包含common.less中的内容了

 

1.6 高效简洁的rem适配方案flexible.js

 不用实际写死html { font-size:75px } ，就用75像素计算就可以了。750px是设计稿的宽度。

flexible.js 只要屏幕宽度有一点变化，那么就会更改html的font-size的值，变化比较柔和，自己写的媒体查询没有这么柔和只有达到某个宽度才会变化font-size的值，从而达到缩放页面比例。

flexible.js下载地址：

GitHub - amfe/lib-flexible: 可伸缩布局方案

 

神器，vscode  px转换rem插件cssrem,从此就不用less计算rem了。写完像素值会弹出提示转为rem选择然后回车就可以了。这个插件默认的html文字大小是16px;所以要修改默认插件的html文字大小，改为设计稿的大小除以10后的大小。

修改步骤：

 

点右边的点点点

 

 搜索

 

修改

 

 在右边修改16为75

 

就设置完成了，重启vscode。

案例中的重点内容

 flexible.js 只要屏幕宽度有一点变化，那么就会更改html的font-size的值，变化比较柔和，自己写的媒体查询没有这么柔和只有达到某个宽度才会变化font-size的值，从而达到缩放页面比例。