手机端rem无限适配
参考文档:
http://blog.csdn.net/xwqqq/article/details/54862279
https://github.com/amfe/lib-flexible/tree/master
http://blog.csdn.net/ful1021/article/details/9321207
https://mp.weixin.qq.com/s/DpLXJhfCHsgrbgbuk25Ekw
head设置 meta和js:
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width" />
rem单位=设计稿尺寸/100
var designWidth = 640, rem2px = 100;
var d = window.document.createElement('div');
d.style.width = '1rem';
d.style.display = "none";
var head = window.document.getElementsByTagName('head')[0];
head.appendChild(d);
var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'));
d.remove();
document.documentElement.style.fontSize =
window.innerWidth / designWidth * rem2px / defaultFontSize * 100 + '%';
手机端rem无限适配的更多相关文章
- 手机端rem如何适配_rem详解及使用方法
什么是rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对大小就可以实现自适应了,就不用什么 ...
- 手机端rem如何适配_rem详解及使用方法2
作为一个前端开发人员,我们的任务是将UI设计师的图稿运用计算机语言呈现在用户面前.而现在的设备大小尺寸不一,近年来智能手机的普及更是让网页的用户大部分来源与手机,所以让不同大小的移动端屏幕都能较好的还 ...
- 手机端rem简单配置相关
手机端rem简单配置相关 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 ...
- (淘宝无限适配)手机端rem布局详解(转载非原创)
从网易与淘宝的font-size思考前端设计稿与工作流 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问 ...
- (淘宝无限适配)手机端rem布局详解
从网易与淘宝的font-size思考前端设计稿与工作流 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问 ...
- 移动端适配(手机端rem布局详解)
1. 问题的引出 如果html5要适应各种分辨率的移动设备,应该使用rem这样的尺寸单位,同时给出了一段针对各个分辨率范围在html上设置font-size的代码: html{font-size:10 ...
- 手机端rem自适应布局实例
首先要书写核心js代码,控制住页面的初始大小:我是以750px(即iPhone6)的标准,设置font-size:100px:<script> (function (doc, ...
- 手机端rem适应
这段时间做了几个手机版的项目,因为没有用框架,所以用rem来做适应,下面就分享一下 //第一种是比较简单的代码 (function(win) { resizeRoot(); function resi ...
- 手机端rem 用法
!function(n){ var e=n.document, t=e.documentElement, i=720, d=i/100, o="orientationchange" ...
随机推荐
- 【Selenium-WebDriver实战篇】Eclipse上的maven使用JsonObject时,添加依赖后无法自动下载相应的jar包
==================================================================================================== ...
- js访问对象属性的方式“.”与“[]”的区别
. 和 [] 没多大区别,作用完全相同.但是 一般情况下建议使用 . 写法,这样比较接近其它语言的面向对象写法,易读 如果属性名是动态的(比如变量中),只能使用 [] 写法.如 var person= ...
- App版本更新接口的设计
前段时间公司业务调整,新开了新的移动端的项目,所以和朋友聊到了“版本号”和“版本更新所需的数据表设计”. 一般来讲大部分的软件版本号分3段,比如 A.B.C A 表示大版本号,一般当软件整体重写,或出 ...
- [VSCode] Adding Custom Syntax Highlighting to a Theme in VSCode
VSCode Themes are a quick way to update the color scheme and syntax highlighting of your code, but y ...
- codeforcesC - Berry Jam(折半枚举+1-1序列前后缀和)
Educational Codeforces Round 78 (Rated for Div. 2) C - Berry Jam C. Berry Jam time limit per test 2 ...
- learning at command AT+CPIN
[Purpose] Learning how to check sim ready? [Eevironment] Shell terminal, base on gcom command and gc ...
- 洛谷 P1063 能量项链 题解
P1063 能量项链 题目描述 在\(Mars\)星球上,每个\(Mars\)人都随身佩带着一串能量项链.在项链上有\(N\)颗能量珠.能量珠是一颗有头标记与尾标记的珠子,这些标记对应着某个正整数.并 ...
- Theano安装笔记
由于实验需要,近三个月来,安装过十几次Theano,基本上每次都是从最基本的nvidia driver装起.总结一些粗浅的安装心得. GPU:Nvidia K40, M40, M60 软件环境:Unb ...
- 【数据结构】Java版
有趣有内涵的文章第一时间送达! 喝酒I创作I分享 生活中总有些东西值得分享 @醉翁猫咪 想你吴亦凡;赵丽颖 - 想你 你是程序猿对吗?会写代码的那种? 我是打字猿?会打代码的那种? 现在告诉大家一个很 ...
- 一个禁用mac内置键盘的方法
一个禁用mac内置键盘的方法 强大的 karabiner, 非常好用. 可以直接在有外接键盘连接的情况下, 禁用掉内置键盘 另外一个方法是启用mac的 鼠标键, 感觉用处不是很大, 修饰健并没有被禁用 ...