移动端单位rem计算
!(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计算的更多相关文章
- 移动端适配单位rem
0 写在前面 本周惊喜地发现,其他各个老师的软工班(罗杰老师班和欧阳老师班)的软工项目的alpha版本都已经发布了!(然而我们软工项目还没开始写代码…逃…) 十分好奇的我第一时间下载了一些他们的产品进 ...
- 移动端rem计算
教你如何用 lib-flexible 实现移动端H5页面适配 2017年07月22日 16:01:24 Pwcong 阅读数:18872 版权声明:本文为博主原创文章,未经博主允许不得转载. h ...
- python 全栈开发,Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)
昨日内容回顾 ajax //get post 两种方式 做 请求 get 主要是获取数据 post 提交数据 同一个路由地址 既可以是get请求也可以是post请求 一个路由对应一个函数 get请求 ...
- CSS3新的字体尺寸单位rem
CSS3引入新的字体尺寸单位 rem ,可以简单记忆为root rm. CSS3的出现,他同时引进了一些新的单位,包括我们今天所说的rem.在W3C官网上 是这样描述rem的——“font size ...
- css 相对单位rem详解
CSS3新增了一个相对单位rem(root em,根em),这个单位引起了广泛关注.这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素. ...
- 一个因为系统字号设置导致的rem计算渲染异常问题
测试同学突然拿着一部手机过来说,H5渲染各个元素都变大了,有些元素撑出了屏幕外面. 本来以为是某个Webview的渲染兼容问题,结果发现所有的浏览器都这样. 莫名其妙,隐约感觉是 rem计算出了问题, ...
- python全栈开发day51-jquery插件、@media媒体查询、移动端单位、Bootstrap框架
一.昨日内容回顾 技术行业 (1)ajax技术 XMLHttpRequest() <1>创建XMLHttpRequest()对象 <2>检测状态(通过readyState的改变 ...
- 视口viewport与单位rem的本质
结论: 视口viewport的设置是为了让字的显示在不同的屏幕下保持一致. 单位rem的使用是为了让页面中的布局元素的比例在不同的屏幕下显示的比例保持一致. 现象: 我们看电脑时候的网页的时候的字体大 ...
- 前端移动端的rem适配计算原理
rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位.简单的说它就是一个相对单位.看到rem大家一定会想起em单位,em(font si ...
随机推荐
- js身份证号码验证
验证身份证号码的有效性,包含15位和18位: 根据[中华人民共和国国家标准 GB 11643-1999]中有关公民身份号码的规定,公民身份号码是特征组合码,由十七位数字本体码和一位数字校验码组成.排列 ...
- java8中optional和.stream().map()
使用optional的好处:是一个可以包含或不可以包含非空值的容器对象,更加友好的处理程序中的空对象. Optional<T>有方法 isPresent() 和 get() 是用来检查其包 ...
- 活代码LINQ——04
一.主模块代码: 'Fig.4.16:GradeBookTest.vb 'Create and manipulate a GradeBook object;illustrate validation ...
- 使用spring:aop中修改增强方法中的参数
大家都知道,在增强方法中,使用jp.getArgs()[index]可以获取传进来的参数,但是参数传进来之后,怎么改变它的值呢? 因为jp.getArgs()[index]获取到的只是数据的备份,所以 ...
- Get teststep of specific type
SoapUI Groovy : Check if test step is of specific type, such as : Wsdl, Rest, Jdbc, HTTP, Groovy etc ...
- 如何快速地开发一个微信小程序
如何快速地开发一个微信小程序呢?我觉得作为初学者,最好能有一个模板,然后改这个模板. 同样作为初学者,刚开始的时候我有下面的几个问题,后来通过问同学,我弄清楚了. 微信小程序可以连接MySQL或者Sq ...
- c#线程池ThreadPool实例详解
1. 如何查看线程池的最大线程数和最小线程数 static void Main(string[] args) { Console.WriteLine("----------线程池开始,线程I ...
- python爬虫基础_scrapy
其实scrapy想要玩得好,还是需要大量全栈知识的.scrapy 被比喻为爬虫里的django,框架和django类似. 安装: Linux/mac - pip3 install scrapy Win ...
- idea 打包springboot项目报错:404
1. 在本地的idea中,我们必须通过context-path(这里是volkswagen)+controller中的路径名访问项目,但是打包后,就不需要这个context-path,需要的是war包 ...
- Zynq系列程序逻辑固化方法
1.创建一个BOOT镜像 该小节主要讲述zynq平台利用软件套件SDK创建一个可固化BOOT镜像. 1.1 选择Ad9361_Eque1工程,选择Xilinx Tools → Create Boot ...