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. com.alibaba.dubbo.remoting.TimeoutException

    maven项目 update clean install 重启 服务消费者

  2. “获取access_token”接口新增IP白名单保护

  3. LA4094 WonderTeam

      杯哥题解.   //Serene #include<algorithm> #include<iostream> #include<cstring> #inclu ...

  4. PLAY2.6-SCALA(八) comet

    Comet是指基于 HTTP 长连接的“服务器推”技术,是一种不需要客户端主动请求,服务端可以主动给客户端推送消息的技术. 1.使用chunked response来实现Comet chunked r ...

  5. 三.使用JDBC处理MySql大数据

    一.基本概念 大数据也称之为LOB(Large Objects),LOB又分为:clob和blob,clob用于存储大文本,blob用于存储二进制数据,例如图像.声音.二进制文等. 在实际开发中,有时 ...

  6. phpcms url路由规则、多站点、PC手机切换

    解决一个分站点pc手机共存的问题 首先需要有PC手机两套模板.通过修改url路由规则,在同一目录下生成PC手机两套静态网站,PC使用默认url路由规则,手机端使用文件名追加“_m”的路由规则. 然后通 ...

  7. UVA_414:Machined Surfaces

    Language : C++ 4.8.2 #include<stdio.h> #include<string.h> int main(void) { int n; int su ...

  8. @hdu - 6687@ Rikka with Stable Marriage

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个稳定婚姻匹配问题,其中第 i 个男生与第 j 个女生之间 ...

  9. Android7.0 添加快速设定Quick Settings Tile

    Android7.0新推出了一个非常实用的功能--添加快速设定(或者翻译成快速设置),但是感觉社区里关注的人比较少,可能目前为止国内还没有Android7.0的手机,但是越早接触越好,甚至可以告诉产品 ...

  10. UVa 10285【搜索】

    UVa 10285 哇,竟然没超时!看网上有人说是记忆化搜索,其实不太懂是啥...感觉我写的就是毫无优化的dfs暴力....... 建立一个坐标方向结构体数组,每个节点dfs()往下搜就好了. #in ...