您现在的位置是：网站首页> 编程资料编程资料

rem适配移动设备的方法示例Html5移动端适配IphoneX等机型的方法浅谈移动端适配大法详解如何使用image-set适配移动端高清屏图片移动 web 端屏幕适配(rem)详解H5 活动页之移动端 REM 布局适配方法html5实现移动端适配完美写法手机端用rem+scss做适配的详解移动端适配使px自动转换rem

2021-09-04 1094人已围观

简介这篇文章主要介绍了rem适配移动设备的方法示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

前言

移动端 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);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：详解CSS实现仿Windows10鼠标照亮边框效果纯CSS3制作的鼠标悬停时边框旋转鼠标经过图片显示边框的CSS代码

下一篇：从css 3d说到空间坐标轴附源码纯CSS3实现的3D阴阳八卦（太极）图旋转动画效果源码纯CSS3实现的3D木质尺子旋转动画效果源码CSS3实现鼠标滑过3D样式图片层叠切换动画特效CSS3实现鼠标滑过图片3D旋转动画特效源码纯CSS3实现3D展开动画的图标菜单特效源码CSS3实现鼠标悬停展开3D图标菜单特效源码纯CSS3实现风浪中前行的3D海盗船动画效果源码纯css3实现的3D宝贝猪猡动画效果源码

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢