移动端使用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>=640){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
}
}; if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
引用这个js定下基数,
引自:http://www.jianshu.com/p/b00cd3506782
换算方法:http://pxtoem.com/
一般以56为基数
移动端使用rem方法的更多相关文章
- M端计算rem方法
(function(){var a=document.documentElement.clientWidth||document.body.clientWidth;if(a>460){a=460 ...
- 移动端H5适配方法(盒子+图片+文字)
一.怎么让H5页面适应手机 a.利用meta标签 <meta name="viewport" content="width=device-width,initial ...
- Axure中移动端原型设计方法(附IPhoneX和IPhone8最新模板)
Axure中移动端原型设计方法(附IPhoneX和IPhone8最新模板) 2018年4月16日luodonggan Axure中基于设备模板的移动端原型设计方法(附IPhoneX和IPhone8最新 ...
- keyup在移动端失效解决方法
keyup在移动端失效解决方法: $("#OBJ").on("input propertychange", function(){ }); 采用 input 与 ...
- viewport原理和使用和设置移动端自适应的方法(移动适应电脑)
viewport原理和使用和设置移动端自适应的方法 HTML中: <meta name="viewport" content="width=device-width ...
- PHP防止被重复请求接口的方法(网页端签名验证的方法)
PHP防止被重复请求接口的方法(网页端签名验证的方法) 可以采取签名验证的方式来 解决这个问题 1 time和随机数都是PHP生成的显示在前端 2 前端生成sign 3 进行每次请求的sign计数 这 ...
- 5种kafka消费端性能优化方法
摘要:带你了解基于FusionInsight HD&MRS的5种kafka消费端性能优化方法. 本文分享自华为云社区<FusionInsight HD&MRSkafka消费端性能 ...
- 响应式布局rem、rem方法封装、移动端响应式布局
相信大家在做移动端的时候都会做各个手机的适配这种适配就是响应式布局在之前做网站的响应式从pc到手机用的是媒体查询 @media screen and (max-width: 300px){} 最大宽度 ...
- 移动端使用rem适配及相关问题
移动端适配方案,说多也很多.可以使用百分比布局,但百分比与em都是基于父元素进行计算的,在实际应用中不是很方便.使用rem不仅可以设置字体大小,块大小也可以设置.而且可以良好的适配各种终端,所以这方案 ...
随机推荐
- JQuery 拖动层
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- elegant 的长整数加法 string 实现
string strAdd(string &v1, string &v2){ string res = ""; ; int len1 = v1.size(), le ...
- python函数与方法装饰器
之前用python简单写了一下斐波那契数列的递归实现(如下),发现运行速度很慢. def fib_direct(n): assert n > 0, 'invalid n' if n < 3 ...
- [ZT]图像处理库的比较:OpenCV,FreeImage,CImg,CxImage
1.对OpenCV 的印象:功能十分的强大,而且支持目前先进的图像处理技术,体系十分完善,操作手册很详细,手册首先给大家补计算机视觉的知识,几乎涵盖了近10年内的主流算法: 然后将图像格式和矩阵运算, ...
- linux系统下memcached启动正常但程序无法连接的问题解决
在虚拟机linux安装好memcached之后,试着用java程序连接一下memcached的服务端,但却出现了以下错误 com.schooner.MemCached.SchoonerSockIOPo ...
- 获取ajax对象
function ajaxFunction(){ var xmlHttp; try{ // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest ...
- 使用device.js检测设备并实现不同设备展示不同网页
现在很多时候会用@media来控制页面在不同分辨率的设备商展示不同效果,但是有些时候想在直接在PC上展示一个做好的页面,在mobile展示另一个页面.这个时候可以借助device.js来检测设备,然后 ...
- React 同构
React 同构 搬运 https://segmentfault.com/a/1190000004671209 究竟什么是同构呢? 同构就是希望前端 后端都使用同一套逻辑 同一套代码 Nodejs出现 ...
- linux日志(常用命令)
LinuxIDERedHat防火墙活动 cat tail -f 日 志 文 件 说 明 /var/log/message 系统启动后的信息和错误日志,是Red Hat Linux中最常用的日志 ...
- jQuery创建节点
注:摘自<锋利的jQuery(第二版)> 创建元素节点 例如要创建两个<li>元素节点,并且要把它们作为<ul>元素节点的子节点添加到DOM节点树上.完成这个任务需 ...