!(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth < 750) {
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
} else {
docEl.style.fontSize = '100px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window); 使用比例:750/100

  

移动端单位rem计算的更多相关文章

  1. 移动端适配单位rem

    0 写在前面 本周惊喜地发现,其他各个老师的软工班(罗杰老师班和欧阳老师班)的软工项目的alpha版本都已经发布了!(然而我们软工项目还没开始写代码…逃…) 十分好奇的我第一时间下载了一些他们的产品进 ...

  2. 移动端rem计算

    教你如何用 lib-flexible 实现移动端H5页面适配 2017年07月22日 16:01:24 Pwcong 阅读数:18872    版权声明:本文为博主原创文章,未经博主允许不得转载. h ...

  3. python 全栈开发,Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)

    昨日内容回顾 ajax //get post 两种方式 做 请求 get 主要是获取数据 post 提交数据 同一个路由地址 既可以是get请求也可以是post请求 一个路由对应一个函数 get请求 ...

  4. CSS3新的字体尺寸单位rem

    CSS3引入新的字体尺寸单位 rem ,可以简单记忆为root rm. CSS3的出现,他同时引进了一些新的单位,包括我们今天所说的rem.在W3C官网上 是这样描述rem的——“font size ...

  5. css 相对单位rem详解

      CSS3新增了一个相对单位rem(root em,根em),这个单位引起了广泛关注.这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素. ...

  6. 一个因为系统字号设置导致的rem计算渲染异常问题

    测试同学突然拿着一部手机过来说,H5渲染各个元素都变大了,有些元素撑出了屏幕外面. 本来以为是某个Webview的渲染兼容问题,结果发现所有的浏览器都这样. 莫名其妙,隐约感觉是 rem计算出了问题, ...

  7. python全栈开发day51-jquery插件、@media媒体查询、移动端单位、Bootstrap框架

    一.昨日内容回顾 技术行业 (1)ajax技术 XMLHttpRequest() <1>创建XMLHttpRequest()对象 <2>检测状态(通过readyState的改变 ...

  8. 视口viewport与单位rem的本质

    结论: 视口viewport的设置是为了让字的显示在不同的屏幕下保持一致. 单位rem的使用是为了让页面中的布局元素的比例在不同的屏幕下显示的比例保持一致. 现象: 我们看电脑时候的网页的时候的字体大 ...

  9. 前端移动端的rem适配计算原理

    rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位.简单的说它就是一个相对单位.看到rem大家一定会想起em单位,em(font si ...

随机推荐

  1. 第三方jar包导入unity

    关于第三方SDK接入Unity工程方面,有许多坑,下面我把遇到的问题进行总结,希望能够帮到有需要的朋友们.1.把第三方SDK导入Eclipse遇到的问题.eclipse配置完成右键工程后没有andro ...

  2. [数]青蛙的约会&Strange function

    拓展欧几里得:求导&二分 POJ-1061 拓展欧几里得的应用,需要开long long 第一次做这个题的时候进行了毫无用处的找公式(?),是个现在的我看不懂的迷之思路. 第二发的时候还是不明 ...

  3. 小学生四则运算JAVA

    点我,github地址 组员:黄浩格,何坤 一.项目说明 1题目:实现一个自动生成小学四则运算题目的命令行程序. 2说明: 自然数:0, 1, 2, -. • 真分数:1/2, 1/3, 2/3, 1 ...

  4. 所有不同的序列串-----LCS算法的变种

    今天遇到LEETCODE的第115题: Distinct Subsequences Given a string S and a string T, count the number of disti ...

  5. Android Stdio 无法打开模拟器

    安装好了各种版本的AVD,有个版本4.1,API版本16,219MB的模拟器是可以打开的,但是基本不能用,只能看到首界面,跳转什么的完全不行. 除此之外其它高版本的模拟器都不能用(API版本>2 ...

  6. java导出Excel定义导出模板

    在很多系统功能中都会有Excel导入导出功能,小编采用JXLS工具,简单.灵活. JXLS是基于 Jakarta POI API 的Excel报表生成工具,它采用标签的方式,类似于jsp页面的EL表达 ...

  7. Linux常见命令快捷方式

    命令行编辑的辅助操作: Tab健:自动补齐 Ctrl +U :清空至首行 Ctrl +K:  清空至尾行 Ctrl +L:(或者clear) 清屏 Ctrl +C:  取消执行命令 获取帮助命令: 内 ...

  8. python异常(概念、捕获、传递、抛出)

    异常 目标 异常的概念 捕获异常 异常的传递 抛出异常 01. 异常的概念 程序在运行时,如果 Python 解释器 遇到 到一个错误,会停止程序的执行,并且提示一些错误信息,这就是 异常 程序停止执 ...

  9. MNIST机器学习进阶

    # -*- coding: utf-8 -*-"""Created on Wed Oct 17 08:49:28 2018 @author: Administrator& ...

  10. Python基础学习---位运算符

    <<   左移,每移动1位,相当于乘以2      例如:32<<2    等价于:32*4 ==128 >>   右移,每移动1位,相当于除以2      例如: ...