移动端使用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不仅可以设置字体大小,块大小也可以设置.而且可以良好的适配各种终端,所以这方案 ...
随机推荐
- Banner 切换
在线项目 : Banner 切换 时间 : 2个小时 (15:00 - 17:00)满分 : 100分------------------------------------------------ ...
- chrome浏览器的桌面通知
最近在使用朋友网(不加链接,避免有打广告的嫌疑),发现会出现提示“是否允许网站显示桌面通知?”,如下图所示: 这种做法,在页面加载完时直接调用请求,比起开心网的这种提示感觉有些野蛮了.开心网的桌面通知 ...
- C 各种数据类型介绍
1.各种数据类型介绍: 基本数据类型最主要的特点是,其值不可以再分解为其它类型.也就是说,基本数据类型是自我说明的. 1.1整型 整形包括短整型.整形和长整形. 1.1.1短整形 short a=1; ...
- ApiGen4.1 windows安装教程
一. ApiGen4.1版本介绍 1.ApiGen介绍 ApiGen是自动生成PHP项目的阅读文档工具. 用于从PHP源代码创建专业的API文档,类似于phpDocumentor/phpDoc. Ap ...
- VS2010 CLR20r3 devenv.exe 错误的解决--vs重启解决方案
VS2010 CLR20r3 devenv.exe 错误的解决 最近我的vs2010经常过段时间就报CLR20r3错误的解决,出现这个异常我的vs2010就要重启,很是烦人,这么搞没法干活也. 搜 ...
- 一步一步学习SignalR进行实时通信_6_案例
原文:一步一步学习SignalR进行实时通信_6_案例 一步一步学习SignalR进行实时通信\_6_案例1 一步一步学习SignalR进行实时通信_6_案例1 前言 类的定义 各块功能 后台 上线 ...
- WPF按钮清空自带样式,以及透明按钮时,Grid的Background属性设置引起"点击"问题.
1.空样式按钮 <Style x:Key="EmptyButtonStyle" TargetType="Button"> &l ...
- C++字符串之一(字符表示)
在C++中有两种类型可以用于表示字符,char和wchar_t. 但是字符串格式的标准却有很多种,如ASCII,UTF8,UTF16,UTF32等等.字符串的格式和char/wchar_t 的关系是什 ...
- leetCode 31.Next Permutation (下一个字典序排序) 解题思路和方法
Next Permutation Implement next permutation, which rearranges numbers into the lexicographically ne ...
- Web API核查表:设计、测试、发布API时需思考的43件事[转]
Web API核查表:设计.测试.发布API时需思考的43件事 当设计.测试或发布一个新的Web API时,你是在一个原有的复杂系统上构建新的系统.那么至少,你也要建立在HTTP上,而HTTP则是 ...