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. [Vue CLI 3] 配置解析之 parallel

    官方文档中介绍过在 vue.config.js 文件中可以配置 parallel,作用如下: 是否为 Babel 或 TypeScript 使用 thread-loader. 该选项在系统的 CPU ...

  2. <第一周>降维

    PCA 矩阵的主成分就是其协方差矩阵对应的特征向量,按照对应的特征值大小进行排序,最大的特征值为第一主成分,以此类推 主要过程 对所有样本进行中心化 计算样本的协方差矩阵 XX.T 对协方差矩阵做特征 ...

  3. 对象无法注册到Spring容器中,手动从spring容器中拿到我们需要的对象

    当前对象没有注册到spring容器中,此时无法new object()  的方式创建对象,否则所有@Autowired 注入的对象都为null; 处理方式: 手动创建一个类@Component注册到S ...

  4. idea导入gradle项目后,找不到右边gradle窗口

    解决方案:关闭当前项目idea,随便打开个其他的项目 选择你刚刚的gradle项目 一定要选择你的gradle文件,然后OK就行了..剩下的按照指示打开就会显示gradle右边窗了 原文弟子:http ...

  5. mongodb的一些简单操作

    mongo 使用 mongod 开机mongod --dbpath c:\mongo mongod --storageEngine mmapv1 --dbpath c:\mongo mongoimpo ...

  6. JavaScript--DOM操作例子:隔行变色

    上效果: 实现思想: 主要是js动态创建标签,还有动态结合css实现样式 <!DOCTYPE html> <html lang="en"> <head ...

  7. UITextField 自定义clearButton背景色

    一个鸡贼的解决方案,适用于自定义clearButton的样式,直接修改背景图即可 1. 实现基于UITextField的category并添加如下方法及声明 - (void)setLightStyle ...

  8. BZOJ 1008 越狱题解

    其实这题很水,显然n个房间有m种宗教,总共有n^m种情况, 我们再考虑不合法的情况,显然第一个房间有m种情况,而后一种只有m-1种情况(因为不能相同) 所以不合法的情况有(m-1)^(n-1)*m种情 ...

  9. 亚洲唯一,阿里云SLB位列Gartner全球网络负载均衡市场前五

    近日,Gartner发布了最新的全球企业级网络设备市场份额报告“Market Share: Enterprise Network Equipment by Market Segment, Worldw ...

  10. NDK(1)简介

    AndroidNDK Android NDK 是在SDK前面又加上了“原生”二字,即Native Development Kit,因此又被Google称为“NDK”. Android程序运行在Dalv ...