rem适配移动设备

韩冰发布于2019-08-29 18:41 / 1786人阅读

摘要：前言移动端适配方案回顾总结如何使用单位的计算参考的根节点进行计算，根节点的字体变化，布局参考的页面也会相应进行缩放，此为布局的本质。动态改变的值几乎在每个浏览器都将的初始化为，我们动态改变的话可以暂时将设置为适配的根节点初始值。

前言

移动端 rem 适配方案回顾总结

如何使用 rem

rem 单位的计算参考 html 的根节点 font-size进行计算，根节点的字体变化，布局参考的 rem 页面也会相应进行缩放，此为 rem 布局的本质。

1. 动态改变 html 的 font-size 值

几乎在每个浏览器都将 html 的 font-size 初始化为 16px ，我们动态改变的话可以暂时将 16px 设置为 rem 适配的根节点 font-size 初始值。

那么如何进行适配动态修改？

假定设计稿宽度为 750px，我们定义了自己使用 1rem = 16px 的单位去布局，如何适配呢？

在 chrome 的手机 iphone 模拟器宽度为 375px，正好为设计稿的一半，我们可以口算: 当时的 1rem 应该等于初始化时 html 节点 font-size 的一半,即 newFontSize = 16/2 = 8px,这样一半对一半不就适配了吗...

从中得到公式 设计稿宽度/16px = 需要适配的设备宽度/8px,能够看出新的 font-size 是参考当前的设备宽度与原设计稿的宽度，进行等比缩放的

最终得到 newFontSize = 16px * 需要适配的设备宽度 / 原设计稿宽度

(function(doc, win) {
  var resizeEvt =
      "orientationchange" in window ? "orientationchange" : "resize",
    setRemResponse = function() {
      var vM = 750;
      var vfontSize = 16;
      var html = doc.documentElement;
      var newfontSize = (vfontSize * html.clientWidth) / vM;
      html.style.fontSize = newfontSize + "px";
    };
  doc.addEventListener("DOMContentLoaded", setRemResponse, false);
  win.addEventListener(resizeEvt, setRemResponse, false);
})(document, window);

2. 实际使用

将测量得出的btn 按钮的样式从 px转换为 rem

.btn {
  width: 699px; /* 699/16 => 43.6875rem; */
  height: 90px; /* 90/16px => 5.625rem;  */
  background: rgba(90, 173, 246, 1);
  border-radius: 6px; /* 6/16=> 0.375rem; */
}

自己计算太繁琐，使用 scss 定义函数代替计算过程

@function pxToRem($initialStyle) {
  @return $initialStyle/16 * 1rem;
}

那么上面的 css改写为:

.btn {
  width: pxToRem(699);
  height:pxToRem(90);
  background: rgba(90, 173, 246, 1);
  border-radius:pxToRem(6);
}

补充： vscode 的插件 cssrem 支持计算 将我们在 css,scss 中输入的 px 转换为 rem 单位，默认设置的 font-size 为 16px

计算方法变形，口算 rem 1. 简单分析

分析上一节我们最终得到 newFontSize = 16px * 需要适配的设备宽度 / 原设计稿宽度

每次计算要除以 16 很是繁琐，我们若将初始的 html 根节点 font-size变为方便计算的，反正它最终做为一个除数，变为多少呢? 是否 100 更为方便呢？对了！

const oHtml = document.documentElement;
const clientWidth = oHtml.clientWidth;
var vM = 750;
var vfontSize = 100;
// 移动设备
oHtml.style.fontSize = (vfontSize * clientWidth) / vM + "px";

2. 实际使用

还是上面熟悉的那个 btn, 将px转换为 rem, 口算得出结果。

.btn {
  width: 699px; /* 699/100 => 6.99rem; */
  height: 90px; /* 90/100 => 0.9rem;  */
  background: rgba(90, 173, 246, 1);
  border-radius: 6px; /* 6/100=> 0.06rem; */
}

不得不说，有了 scss 是真的方便！

@function reduced100($initialStyle) {
  @return $initialStyle/100 * 1rem;
}

那么上面的 css函数方法改写为:

.btn {
  width: reduced100(699);
  height:reduced100(90);
  background: rgba(90, 173, 246, 1);
  border-radius:reduced100(6);
}

怎么样，rem 原来就是这么简单！！！

工具函数

上面的方法，二选其一就可以了，毕竟现在 javascript 的执行效率不差！

(function(doc, win) {
  var resizeEvt =
      "orientationchange" in window ? "orientationchange" : "resize",
    setRemResponse = function() {
      var vM = 750;
      var vfontSize = 16;
      var html = doc.documentElement;
      var newfontSize = (vfontSize * html.clientWidth) / vM;
      html.style.fontSize = newfontSize + "px";
    };
  doc.addEventListener("DOMContentLoaded", setRemResponse, false);
  win.addEventListener(resizeEvt, setRemResponse, false);
})(document, window);

专线服务私有云移动适配移动端适配 cdn适配移动关于适配移动端的

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114506.html

移动端的3种适配方法

摘要：做移动端页面以来，经常会听说移动端的适配这个问题，但是并没有认真分析过是如何适配各种机型的。目前公司用的是手淘的进行页面适配的。手淘那个还有的地方看不懂，还是自己太了，但是看不懂车不影响老司机开车。做移动端页面以来，经常会听说移动端的适配这个问题，但是并没有认真分析过是如何适配各种机型的。目前公司用的是手淘的flexible.js进行页面适配的。适配的根本原理其实就是将设计稿按一定的...

SwordFly 2019-08-23 18:31 评论0 收藏0
移动端的3种适配方法

摘要：做移动端页面以来，经常会听说移动端的适配这个问题，但是并没有认真分析过是如何适配各种机型的。目前公司用的是手淘的进行页面适配的。手淘那个还有的地方看不懂，还是自己太了，但是看不懂车不影响老司机开车。做移动端页面以来，经常会听说移动端的适配这个问题，但是并没有认真分析过是如何适配各种机型的。目前公司用的是手淘的flexible.js进行页面适配的。适配的根本原理其实就是将设计稿按一定的...

dockerclub 2019-08-30 11:20 评论0 收藏0
移动端适配方案

摘要：业务环境是决定整体项目的适配方案的核心因素。而淘宝的主站和类似，分为移动端页面和端页面，端页面同样有着左右的留白，这也是为了让用户能够在宽屏的时候将注意力集中在中间区域。移动端适配方案移动端适配方案是一个老生常谈的话题，但是对于不同的项目、不同的业务场景可能会需要不同的适配方案来进行移动端适配，向下兼容的baseline也需要提前订好。整体宽高其实移动端适配就和下面的玩具一样，...

feng409 2019-08-30 15:54 评论0 收藏0
一次搞清楚移动端适配这几个坑爹的单位慨念

摘要：真的是给我们新手学习移动端适配造成不少困惑英语真的很重要呀。细节高清屏上的处理其实并不是所有做移动端适配的人都一定会遇到这个问题。一次搞清楚移动端这几个坑爹的单位慨念目录: 一、让坑爹的单位,不再坑爹二、需要准备什么样的设计稿三、rem方案的原理和细节高清屏上,位图的处理高清屏上,关于border: 1px的处理移动端屏幕的自动适配的处理移动端屏幕上字体大小的处理...

objc94 2019-08-30 14:05 评论0 收藏0