移动端使用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不仅可以设置字体大小,块大小也可以设置.而且可以良好的适配各种终端,所以这方案 ...
随机推荐
- centos yum 完全卸载依赖
centos yum 完全卸载依赖 you install a package with yum install, say pdftk, it will pull in a lot of dep ...
- [Linked List]Intersection of Two Linked Lists
Total Accepted: 53721 Total Submissions: 180705 Difficulty: Easy Write a program to find the node at ...
- STL_函数模板
#include <iostream>#include <string>using namespace std; #define MAX(T) \ T max_##T (T x ...
- ubuntu14.04中mysql的安裝及utf8编码集配置
mysql的安裝使用sudo apt-get install mysql-server即可安裝,我安裝的是5.6版.安装过程中会要求输入root账户的密码,按提示输入即可. Mysql Workben ...
- Django后台管理界面
之前的几篇记录了模板视图.模型等页面展示的相关内容,这篇主要写一下后台admin管理界面的内容. 激活管理界面 Django管理站点完全是可选择的,之前我们是把这些功能给屏蔽掉了.记得上篇中Djang ...
- winform制作自定义控件(入门)
原文链接:http://blog.csdn.net/bychentufeiyang/article/details/7081402 与原文基本一致,只是例子变成VS2012环境,语言采用博主常用的 ...
- Array 的五种迭代方法 -----every() /filter() /forEach() /map() /some()
ES5定义了五个迭代方法,每个方法都接收两个参数:要在每一项上运行的函数和运行该函数的作用域对象(可选的),作用域对象将影响this的值.传入这些方法中的函数会接收三个参数:数组的项的值.该项在数组中 ...
- Linux07--Shell程序设计03 通配符与正则表达式
通配符 通配符可用于代替字符. 通常地,星号“*”匹配0个或以上的字符,问号“?”匹配1个字符. 使用情况: 1.文件和目录 在CP/M.DOS.Microsoft Windows和类Unix操作系统 ...
- HttpContext.Current.Cache 过期时间
原文:HttpContext.Current.Cache 过期时间 为了更快的读取数据,我们一般会把常用到的数据加载到Cache中 在.NET中,Cache的存在可以依赖多中方式,主要用到HttpCo ...
- Div布局案例
通常看到这个页面,会想到它是有几块组成的. 第一块,分销佣金. 第二块,包括代言.商品.二维码 其中代言又是左右结构. 于是乎基本的div结构就出来了. <div class="row ...