rem.js

目前笔者解决移动端的尺寸带来的样式问题,都是通过viewport + rem的。viewport 相信大家都用过了,而rem需要用js动态设置html的字体大小。

动态设置rem的根字体大小

  1. 首先我们要确定你的设计稿大小是多少,一般移动端设计稿的宽度是750,当然也用些用1080的;
  2. 我们要确定rem和px的转换比例,前提是要注意浏览器的字体大小是有限制的,比如chrome的字体不能小于12px;
  3. 记得加上viewport,比如这样设置:<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">;
/**
* design: 是设计稿的宽度,也是页面的最大宽度
* 这里的比例是1:100; 1rem = 100px;
**/
function setRem(design=750){
rem();
window.onresize = function(){
rem();
} function rem(){
let winWidth = document.documentElement.getBoundingClientRect().width;
winWidth = Math.min(winWidth,design);
let fontSize = winWidth / design *100;
document.documentElement.style.fontSize = fontSize+'px';
document.body.style.fontSize = '16px';
// 这里要注意, 系统字体的缩放是会影响到rem的
let computedRem = window.getComputedStyle(document.documentElement)['font-size'].replace('px','');
document.documentElement.style.fontSize=fontSize*fontSize/computedRem+'px'; }
}

写一个js配合rem的更多相关文章

  1. 让我们纯手写一个js继承吧

    继承在前端逻辑操作中是比较常见的,今天我们就从零开始写一个js的继承方式 在es5中继承实质上是先创建子类的实例对象,然后再将父类的方法添加到this上Parent.call(this),在es6中则 ...

  2. 从 0 到 1 到完美,写一个 js 库、node 库、前端组件库

    之前讲了很多关于项目工程化.前端架构.前端构建等方面的技术,这次说说怎么写一个完美的第三方库. 1. 选择合适的规范来写代码 js 模块化的发展大致有这样一个过程 iife => commonj ...

  3. 如何写一个Js上传图片插件。

    项目里面需要一个上传图片的插件,找了半天没有找到满意的,算了 不找了,自己写一个吧,顺便复习一下js方面的知识.完成之后效果还不错,当然还要继续优化,源码在最后. 介绍一种常见的js插件的写法 ; ( ...

  4. 前端与编译原理——用JS写一个JS解释器

    说起编译原理,印象往往只停留在本科时那些枯燥的课程和晦涩的概念.作为前端开发者,编译原理似乎离我们很远,对它的理解很可能仅仅局限于"抽象语法树(AST)".但这仅仅是个开头而已.编 ...

  5. 如何手写一个js工具库?同时发布到npm上

    自从工作以来,写项目的时候经常需要手写一些方法和引入一些js库 JS基础又十分重要,于是就萌生出自己创建一个JS工具库并发布到npm上的想法 于是就创建了一个名为learnjts的项目,在空余时间也写 ...

  6. 写一个js向左滑动删除 交互特效的插件——Html5 touchmove

    需求描述 需要实现类似QQ中对联系人的操作:向左滑动,滑出删除按钮.滑动超过一半时松开则自动滑到底,不到一半时松开则返回原处. 纯js实现 使用了h5的touchmove等事件,以及用js动态改变cs ...

  7. 【转载】写一个js库需要怎样的知识储备和技术程度?

    作者:小爝链接:https://www.zhihu.com/question/30274750/answer/118846177来源:知乎著作权归作者所有,转载请联系作者获得授权. 1,如何编写健壮的 ...

  8. 自己写一个JS单向数据流动库----one way binding

    JS单向流动其实就是数据到视图的过程, 这几天突发奇想,想着弄一个插件, 把DOM结构使用JS进行描述: 因为DOM中的Class , content, id, attribute, 事件, 子元素全 ...

  9. 怎样写一个webpack loader

    div{display:table-cell;vertical-align:middle}#crayon-theme-info .content *{float:left}#crayon-theme- ...

随机推荐

  1. Leetcode697.Degree of an Array数组的度

    给定一个非空且只包含非负数的整数数组 nums, 数组的度的定义是指数组里任一元素出现频数的最大值. 你的任务是找到与 nums 拥有相同大小的度的最短连续子数组,返回其长度. 示例 1: 输入: [ ...

  2. JavaScript--数组与伪数组(特殊对象)的区别

    一.数组与伪数组的区别例子: 从原型链上解析: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  3. 一个基于Asterisk构建的VOIP应用软件:Elastix介绍

    Elastix 是一种应用软件,它整合了适用于那些基于 Asterisk 的 PBX 的最好工具,并将它们集成为单一的.易用的接口.同时,它增加了自己的工具集,以及允许创建第三方模块来使 Elasti ...

  4. Java安全——密钥那些事

    标签(空格分隔): Java 安全 概念 密钥是加密算法不可缺少的部分.密钥在安全体系中至关重要,正如其名,私密的钥匙,打开安全的大门.密钥分两种:对称密钥和非对称密钥.非对称密钥里又包含公开密钥和私 ...

  5. PHPCMS快速建站系列之标签循环嵌套

    标签循环嵌套方法,可以实现对PC标签循环调用,代码如下: 在此文件里/phpcms/lib/classes/template_cache.class.php 里的 template_parse 方法里 ...

  6. TIJ——Chapter Thirteen:Strings

    String 对象是不可修改的,对于被String 重载的'+' 和'+=' 运算符来说,当你用它们来连接两个String 对象的时候,它在底层并不会对于每一次连接均生成一个String 对象,取而代 ...

  7. 01-常见Dos命令、Java历史、Java跨平台、配置Path环境变量、第一个HelloWorld例子

    常见Dos命令 dir: 列出当前目录下的文件以及文件夹 md: 创建目录 rd: 删除目录 cd: 进入指定目录 del: 删除文件 copy: 复制文件 xcopy: 复制目录 tree: 列出目 ...

  8. @codeforces - 141E@ Clearing Up

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个 N 个点 M 条边的图,每条为黑色或者白色. 现在让你 ...

  9. docker oracle install

    https://hub.docker.com/r/9fevrier/oracle-11g Informations Oracle directory : /opt/oracle Data direct ...

  10. 威胁快报|新兴挖矿团伙借助shodan作恶,非web应用安全再鸣警钟

    近日,阿里云安全发现了一个使用未授权访问漏洞部署恶意Docker镜像进行挖矿的僵尸网络团伙.我们给这一团伙取名为Xulu,因为该团伙使用这个字符串作为挖矿时的用户名. Xulu并不是第一个攻击Dock ...