手机端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" ...
随机推荐
- python dijkstra 最短路算法示意代码
def dijkstra(graph, from_node, to_node): q, seen = [(0, from_node, [])], set() while q: cost, node, ...
- docker学习4-docker安装mysql环境
前言 docker安装mysql环境非常方便,简单的几步操作就可以了 拉取mysql镜像 先拉取mysql的镜像,可以在docker的镜像仓库找到不同TAG标签的版本https://hub.docke ...
- sql分割函数
drop function [dbo].[f_split] create function [dbo].[f_split] ( ),--需要分割的字符串(例如:1,2,3,4,5 我|和|你) )-- ...
- 案例实战之如何写一个webpack loader
通过以下几个实例掌握webpack loader的写法 1.写一个多语言替换的loader 在index.js在页面上插入了一个{{title}}文本,我们需要在打包的时候将其替换成对应的多语言 fu ...
- treegrid 折叠全部节点
$(".easyui-treegrid").treegrid({ url: '@Url.Action("GetDataDictionaryList", &quo ...
- 04 Vue Router路由管理器
路由的基本概念与原理 Vue Router Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器. 它和vue.js的核心深度集成 ...
- apache commons-configuration包读取配置文件
1.pom依赖添加 <!-- 配置文件读取 --> <dependency> <groupId>commons-configuration</groupId& ...
- Build Post Office II
Description Given a 2D grid, each cell is either a wall 2, an house 1 or empty 0 (the number zero, o ...
- [Go] Slices vs Array
It is recommended to use 'slice' over 'Array'. An array variable denotes the entire array; it is not ...
- 微信小程序敏捷开发实战
wxml->wcc编译->javascript 用户javascript-> wawebview->view 小程序原理 微信 小程序-> webview appserv ...