移动端使用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不仅可以设置字体大小,块大小也可以设置.而且可以良好的适配各种终端,所以这方案 ...
随机推荐
- 图片占位 css
手机端图片高度和宽度不能自动比例缩小的问题 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
- 如何灵活利用免费开源图标字体-IcoMoon篇
http://www.zhangxinxu.com/wordpress/2012/06/free-icon-font-usage-icomoon/
- ListView及Adapter的使用
一.使用ArrayAdapter 其中ArrayAdapter的构造函数有如下几个,其中resource是指每个列表项的布局文件,objects是指列表项的数据源,此处通常指一个数组 ArrayAda ...
- 跳转APP(app之间互相通信)
摘要 步骤: 1,添加URL Types项 2,配置URL Scheme 3,其他应用的跳转 4,参数的接收 开发IOS项目的时候,有可能会遇到两个APP应用相互调用的需求,比如说:支付宝支付.. ...
- HDU 3030 - Increasing Speed Limits
Problem Description You were driving along a highway when you got caught by the road police for spee ...
- python练习_购物车(2)
用python写了一个购物车程序,主要是练习,代码如下 主入口文件:main.py #!/usr/bin/env python # -*- coding:utf-8 -*- #先调用用户登录函数,在进 ...
- 四轴飞行器1.2.1 RT-Thread 环境搭建
买的飞控板到了,开始写下位机的程序了,本来打算用UCOS的,因为以前用过,比较熟悉,可以很快上手,不过板子的卖家推荐了RT-Thread,以前虽然有接触过,但是没用过,于是去官网看了下,感觉还不错.其 ...
- 2014第11周一word样式
今天摸索使用了word的样式替换功能感觉不错,简单记录下: 1.将某一个样式的标题统一替换为另一样式,之前一般是格式化一个个找到标题设置格式, 今天才发现可以选中标题->在浮动框上单击样式或开始 ...
- libcurl提交表单上传文件
不多说了,curl的http上传文件代码示例,有需要的可以参考. int http_post_file(const char *url, const char *user, const char *p ...
- 仍需"敬请期待"的微信沃卡
从2013年7月30日广东联通联合腾讯公布将合作推出联通沃卡,到8月5日在易迅网上进行预订,8月8日正式发售,再到本人最近几日拿到预订的实卡,已经过去20多天了.于是乎,我怀着无比期待的 ...