说说rem

作者: f275edb871f8 | 来源:发表于2016-02-14 15:50 被阅读188次

rem单位是在移动端布局中最常使用的单位
通常做法是设置html{font-size:62.5%},然后使用媒体查询去改变不同尺寸设备的font-size值。
这样做的不足之处:每个文件都需要引用一大串的font-size值很繁琐,另外值并不能达到连续变化的效果。

这个时候可以引入一段js,通过识别设备尺寸来动态改变font-size值

var currClientWidth,fontValue,originWidth;
//originWidth用来设置设计稿原型的屏幕宽度(这里是以 Iphone 6为原型的设计稿)
originWidth=375;
__resize();
//注册 resize事件
window.addEventListener('resize', __resize, false);
function __resize() {
    currClientWidth = document.documentElement.clientWidth;
    //这里是设置屏幕的最大和最小值时候给一个默认值
    if (currClientWidth>640){currClientWidth = 640};
    if (currClientWidth<320){currClientWidth = 320};
    fontValue = ((62.5 * currClientWidth) /originWidth).toFixed(2);
    document.documentElement.style.fontSize = fontValue + '%';
}

相关文章

  • 说说rem

    rem单位是在移动端布局中最常使用的单位通常做法是设置html{font-size:62.5%},然后使用媒体查询...

  • web移动端UI适配之rem

    移动端适配大致两种,一种是百分比还有一种就是rem,这里就说说rem适配要怎么做,原理是什么。先说说为什么要做适配...

  • 修改修改控制台的默认代码页步骤

    一次性 rem 英文chcp 437 rem 日文chcp 932 rem 简体中文chcp 936 rem 韩文...

  • 移动端rem.js

    使用 rem.js 文件1:rem.js 或者 文件2:rem.js

  • 09-px与em的区别

    简单的说说 px 、em 和 rem 的区别 * 个人初步认知: 在前端页面开发初期,特别是给页面添加样式的时候,...

  • Rem布局

    移动web开发之rem布局 rem基础 rem单位 rem (root em)是一个相对单位,类似于em,em是父...

  • vue打包的时候自动将px转成rem

    px2rem-loader 需要与 flexible 配合使用,不然px2rem仅仅只是转成rem却不会设置rem...

  • vue打包的时候自动将px转成rem的操作方法

    px2rem-loader 需要与 flexible 配合使用,不然px2rem仅仅只是转成rem却不会设置rem...

  • rem和em的区别

    # 关于rem和em的区别 ### rem > rem:`表示根元素的字体大小`(通常为``) > ##### 下...

  • 移动web开发,rem适配布局

    rem的定义以及用法 rem(font size of the root element)rem是CSS3新增的一...

网友评论

      本文标题:说说rem

      本文链接:https://www.haomeiwen.com/subject/lsxpkttx.html