rem的计算
(function (doc, win) {
console.log("dpr:"+win.devicePixelRatio);
var docEle = doc.documentElement,
isIos = navigator.userAgent.match(/iphone|ipod|ipad/gi),
dpr=Math.min(win.devicePixelRatio, 3);
scale = 1 / dpr,
resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize';
docEle.dataset.dpr = dpr; var metaEle = doc.createElement('meta');
metaEle.name = 'viewport'; metaEle.content = 'initial-scale=' + scale + ',maximum-scale=' + scale;
docEle.firstElementChild.appendChild(metaEle);
var recalCulate = function () {
var width = docEle.clientWidth; if (width / dpr > 640) { width = 640 * dpr; }
docEle.style.fontSize = 20 * (width / 750) + 'px'; };
recalCulate() if (!doc.addEventListener) return;
win.addEventListener(resizeEvent, recalCulate, false);
})(document, window);
rem的计算的更多相关文章
- rem怎么计算
		
px:相对长度单位.像素px是相对于显示器屏幕分辨率而言的 em:相对单位,继承父节点(层层继承,传递)基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px ...
 - REM布局计算,移动端,pc端有兼容性)
		
rem布局计算(移动端,pc端有兼容性) <!DOCTYPE html> <html> <head lang="en"> <script& ...
 - 这次我好像才真的明白了CSS Rem字体计算的原理
		
背景 如何按照设计稿中标注的尺寸,直接写页面的样式,不再需要px2rem这样的工具或者人工转换 ? 只要你明白了rem的计算原理,这个问题的答案超级简单. 根字体大小计算核心原理 设备的根字体大小 * ...
 - 关于rem的计算顺序
		
/*响应式字体*//* * 字体响应式 * 屏幕>640px时,html字体大小 * 屏幕<640px时,html字体根据屏幕做出相应 * */(function(doc,win){ ...
 - 第148天:js+rem动态计算font-size的大小,适配各种手机设备
		
需求: 在不同的移动终端设备中实现,UI设计稿的等比例适配. 方案: 布局排版都用rem做单位,然后不同宽度的屏,js动态计算根节点的font-size. 假设设计稿是宽750px来做的,书写css方 ...
 - 前端移动端的rem适配计算原理
		
rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位.简单的说它就是一个相对单位.看到rem大家一定会想起em单位,em(font si ...
 - rem布局计算(移动端,pc端有兼容性)
		
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <script> 5 functio ...
 - JS动态计算移动端rem的解决方案
		
首先介绍下rem 说起rem就的说px,em: PX为单位 在Web页面初期制作中,我们都是使用“px”来设置我们的文本,因为他比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的 ...
 - 了解真实的『REM』手机屏幕适配
		
rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...
 
随机推荐
- LeetCode-MinimumDepthOfBinaryTree
			
题目: Given a binary tree, find its minimum depth. The minimum depth is the number of nodes along the ...
 - MyBatis学习笔记(五)——实现关联表查询
			
转自孤傲苍狼的博客:http://www.cnblogs.com/xdp-gacl/p/4264440.html 一.一对一关联 1.1.提出需求 根据班级id查询班级信息(带老师的信息) 1.2.创 ...
 - Java SE 基础知识(String,Array)
			
String 类: 1. 对于String对象的相等性判断来说,请使用equals()方法,而不是==.String的equals()是判断当前字符串与传进来的字符串的内容是否一致. 2. Strin ...
 - MySQL Crash Course #21# Chapter 29.30. Database Maintenance & Improving Performance
			
终于结束这本书了,最后两章的内容在官方文档中都有详细介绍,简单过一遍.. 首先是数据备份,最简单直接的就是用 mysql 的内置工具 mysqldump MySQL 8.0 Reference Man ...
 - JAVA注解@Interface基础知识
			
java注解是在JDK5时引入的新特性,大多数框架(SpringBoot.MyBatis.Quartz)背后都在大量使用注解开发. 一.先进行一个小试验,了解注解开发流程 建立maven项目annot ...
 - codevs1001 舒适的路线 - 贪心 - 并查集
			
题目描述 Description Z小镇是一个景色宜人的地方,吸引来自各地的观光客来此旅游观光.Z小镇附近共有N(1<N≤500)个景点(编号为1,2,3,…,N),这些景点被M(0<M≤ ...
 - 函数引用参数加const
			
Fun(const Type& type); 在引用传递的时候,在函数内部改变参数,会改变参数实际值. 加上了const就不能被修改.
 - linux下如何查看当前机器提供了哪些服务
			
答:使用netstat工具 在命令行下输入netstat -atun即可列出当前机器提供的服务 netstat各选项解析: -a 列出所有服务 -t 列出tcp相关 -u 列出udp相关 -n 以数字 ...
 - vue.js组件(component)
			
简介: 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面 ...
 - orm框架综合
			
一, 目前ORM框架的产品非常之多,除了个大公司.组织的产品外,其他一些小团队也在推出自己的ORM框架.目前流行的ORM框架有如下这些产品: (1)Enitiy EJB:Enitiy EJB实际上也是 ...