rem自适应原理

vincent_xyb 发布于2019-08-30 15:44 / 2460人阅读

摘要：需要了解的知识和类似，相较于父元素的字体大小，而相较于的字体大小实现原理有了这个以上的前提可以通过监测屏幕大小改变的字体大小，从而实现自适应大小的效果获取设备宽度与设计稿宽度的比例作为的大小假如是那么设计稿上代码就要写这样写太大通常

需要了解的知识

html{font-size:16px}
p{font-size:1rem}
1rem = 16px;

rem 和 em 类似，em相较于父元素的字体大小，而rem相较于html的字体大小；

实现原理

有了这个以上的前提可以通过监测屏幕大小改变html的字体大小，从而实现自适应大小的效果；

获取设备宽度与设计稿宽度的比例作为html font-size的大小；

假如是750/750 那么font-size：1px;设计稿上200px,代码就要写200rem;这样写太大.

通常750/750*100,多除100；100作为px转化为rem的换算比例，100px = 1rem;那么设计稿750px代码里就要写7.5rem;

function getRem () {
    var html = document.getElementsByTagName("html")[0];
    var  deviceWidth = document.body.clientWidth || document.documentElement.clientWidth;
    var rem = deviceWidth / designWidth * 100;
    console.log(rem)
    html.style.fontSize = rem+ "px";
}

设计稿为750px时，html{font-size:50px;} 50px * 7.5 = 375px;正好是设备的宽度；

当设计稿750px,设备320px时， 320/750100 = 42.6666667;42.66667 7.5 = 320px;

所以当设备为375时 7.5rem是maxWidth,设备是320时，7.5rem也是maxWidth，这样就达到了自适应设备的目的；

简陋版完整代码：

 (function (designWidth,n) {
    function getRem () {
        var html = document.getElementsByTagName("html")[0];
        var  deviceWidth = document.body.clientWidth || document.documentElement.clientWidth;
        var rem = deviceWidth / designWidth * n;
        console.log(rem)
        html.style.fontSize = rem+ "px";
    }
    getRem ()
    window.addEventListener("resize",function (){
        getRem()
    })

})(750,100)

专线服务云服务器 rem宽度自适应自适应文本自适应文字自适应

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

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

rem 单位实现页面自适应布局

摘要：单位介绍既然扯到了这个单位，那就有必要先解释下这个单位具体含义，上的解释注意图中的画线部分，这个单位需要高版本的浏览器支持，不过，一般用于移动端布局，所以，基本上无需考虑浏览器版本问题，放心用吧。相对于根元素的大小，自动计算出其具体值。 A. 先看一个函数： /* * 设置根元素字体大小 * @param Number minSW 最小缩放的设备屏幕宽度 * @param Nu...

xavier 2019-08-21 14:31 评论0 收藏0
rem 单位实现页面自适应布局

摘要：单位介绍既然扯到了这个单位，那就有必要先解释下这个单位具体含义，上的解释注意图中的画线部分，这个单位需要高版本的浏览器支持，不过，一般用于移动端布局，所以，基本上无需考虑浏览器版本问题，放心用吧。相对于根元素的大小，自动计算出其具体值。 A. 先看一个函数： /* * 设置根元素字体大小 * @param Number minSW 最小缩放的设备屏幕宽度 * @param Nu...

newtrek 2019-08-05 10:10 评论0 收藏0
移动端自适应布局方案

摘要：背景现在工作中有超过一半的时间用于移动端项目的开发，包括嵌入页，微信页面和移动页。经过研究，我在公司的多个移动端项目使用了布局来解决移动端自适应布局的问题。简单的说它就是一个相对单位，布局是一个流行的解决移动端响应式布局的方案。背景现在工作中有超过一半的时间用于移动端项目的开发，包括app嵌入页，微信页面和移动wap页。开发移动端页面跟开发PC页面的一个大区别就是移动端对响应式布...

zacklee 2019-08-26 11:50 评论0 收藏0
谈谈rem移动端布局

摘要：有些人可能会注意到第二行代码跟淘宝的那个有所区别，区别就在于的换算比例，这里你可以任意改动为实际中的情况，比如有人喜欢用，那你可以将上面的改为，换算比例则改为。使用rem实现自适应布局，应该算是当前移动前端的一大趋势，有些人对此还有点迷惑，搞不懂rem是如何实现自适应布局，如何根据设计稿来调整rem的值？rem布局如何用雪碧背景图片？rem一定要加载JS吗？rem的根html fon...

legendmohe 2019-06-25 12:16 评论0 收藏0
也谈多终端屏幕适配

摘要：当在感叹终于不需要兼容端低端浏览器时却面临了移动多终端屏幕适配这一问题。适配的原因相比也不用多说了就是为了使网站各终端的用户都不流失。写在前面在移动网民规模不断扩大的今天，手机、平板等移动设备俨然已成了网民主要上网终端。迎着这个势头，我们这些前端汪们也接下了不少的移动web页面开发需求。当在感叹终于不需要兼容pc端低端浏览器时却面临了移动多终端屏幕适配这一问题。本人经验尚浅，在大...

longmon 2019-08-05 17:47 评论0 收藏0