html中rem的理解&简单运用示例

作为一名前端开发工程师,很有必要梳理并记录下自己成长过程中的问题,以温故知新。

目标:

  1. 把前端开发成长中遇到的概念,原子性的拆分开,单独的去理解学习;
  2. 会运用,不等于理解,文章侧重于理解
?rem是什么

rem是css中的单位。

类同举例:

height: 1px

表示height的值为1个css像素;

vertial-align: 50%

表示vertial-align的值为设置该样式的元素的当前line-height 的高度的一半;

width: 1rem

表示width的值为1 倍的dom文档的html标签上font-size的值,即如果html的font-size为14px,那么width的值就是1倍的14px,即14px.
 
px, %, rem均表示一种单位

? 进一步理解rem

一些效果需要根据外部盒子的大小自适应,是一个因变量。

div {
	width: 50%;
}

例如设置div宽度为50%,表示匹配的div会是外部盒子宽度的一半,通过这种设置,改变了外部盒子宽度后,这些div会跟着调整宽度,即这些div表示为响应式的。
可以理解为:响应的布局需要有一个参照点,对于上面的例子,该参照点为父级元素
响应式页面中,通常整个页面的大部分元素都要根据参照点表现为响应式的,而统一的参考点的最好选择就是dom最外层的html。
至此,应该不难理解rem的存在意义了。

?如何使用rem

通常设计师提供的效果图都是指定宽度的效果,如750px等,因此可以在编写html时,一开始就设置整个dom文档html标签的font-size,假设设置的font-size为x,然后页面的其他元素便可以根据这个参照点,计算出大小并以rem作为单位。

?如何适配分辨率不同的设备

可以动态的改变上述中的x值,即可使得页面中设置了rem的元素大小对应变化。
因此可以在html文档中添加javascript脚本,动态设置x。相关代码:

;(function(win, doc) {
    'use strict';
    var options = { width: 750, dpr: win.devicePixelRatio };
    var html = doc.documentElement,
        width = html.getAttribute('data-width') || options.width,
        dpr = html.getAttribute('data-dpr') || options.dpr,
        viewPort = doc.querySelector('meta[name="viewport"]'),
        rotate = win.onorientationchange ? 'orientationchange' : 'resize';

    // 设置html fontSize
    function setSize() {
        var winWidth = win.innerWidth || html.clientWidth;
        html.style.fontSize = 100 * winWidth / width + 'px';
    };

    // 设置 initial-scale
    function setScale() {
        setSize();
        var viewContent = viewPort.getAttribute('content');
        var reg = /initial-scale=(\d(.\d+)?)/i;
        var matchRes = viewContent.match(reg);
        var scale = 1 / parseInt(dpr);
        if (matchRes && matchRes[1] == scale) {
            return;
        }
        var newContent = viewContent.replace(reg, function(a, b) {
            return a.replace(/\d(.\d+)?/i, scale);
        });
        viewPort.setAttribute('content', newContent);
    };
    
    win.addEventListener(rotate, setSize);
    window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame;
    requestAnimationFrame(setScale);
}(window, document));

至此,结束。

  • 6
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值