手机端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" ...
随机推荐
- Linux的rwx
- 安卓Termux安装ssh及jupyter编程
软件名称:Termux ssh安装 安装openssh apt update apt install openssh 启动ssh服务 sshd 配置公钥私钥 将电脑的公钥(id_rsa.pub)放入/ ...
- Linux TTY介绍
1. TTY介绍 TTY(TeleType)指Linux中的一类终端(Terminal)设备, 是一种字符设备 在Linux中, tty可分为如下几类- 串行端口终端(serial port term ...
- Alpha冲刺(6/10)——2019.4.29
所属课程 软件工程1916|W(福州大学) 作业要求 Alpha冲刺(6/10)--2019.4.29 团队名称 待就业六人组 1.团队信息 团队名称:待就业六人组 团队描述:同舟共济扬帆起,乘风破浪 ...
- python 批量打印PDF
有一批PDF文件,好几百个,每个只打印第2,3页,双面打印. 网上搜索一波,方案如下: 安装Ghostscript,GhostView,使用gsprint命令打印pdf文件. gsprint命令参数说 ...
- redis node 常用命令
命令窗口 flushall //清空全库 keys * //查看所有 HMSET user1 name liujinyu age 25 //哈希 添加多个值 HSET user1 sex man // ...
- 闷声发大财,中国 App 出海编年史及方法论
https://zhuanlan.zhihu.com/p/26700406 第一代 iPhone 发布于 2007 年初,至今已有十年有余.中国互联网公司出海的新篇章,也正始于这 iPhone / A ...
- 10-Flutter移动电商实战-使用FlutterSwiper制作轮播效果
1.引入flutter_swiper插件 flutter最强大的siwiper, 多种布局方式,无限轮播,Android和IOS双端适配. 好牛X得介绍,一般敢用“最”的一般都是神级大神,看到这个介绍 ...
- 004——转载—Word2016“此功能看似已中断 并需要修复”问题解决办法
解决办法如下: 在Win10系统上安装 Office 2016 之后,每次打开Word文档可能都会提示“很抱歉,此功能看似已中断,并需要修复,请使用Windows 控制面板中的“程序和功能”选项修复M ...
- cyyz : Day 1 数论整理
声明:感谢修改这篇博客的dsr Day 1 先说一下上午的听课吧,哎~,简直了,简直(⊙o⊙)…咋说呢,引人入胜???No! 是昏昏欲睡好吧...一点听课欲都没有(强撑....),一上午停下来简直怀疑 ...