rem实现移动端自适应页面
一、把px转换成rem方案
1、cssrem插件
2、css预处理器
3、rem-unit插件
4、px2rem插件
rem就是相对于根元素的font-size来做计算，设置好根结点字体大小，子节点用rem做单位，实现自适应。
二、动态改变字体大小方案
1、css方案之媒体查询
设置html的font-size
@media screen and (min-width: 320px) {
html {font-size: 14px;}
}
@media screen and (min-width: 360px) {
html {font-size: 16px;}
}
@media screen and (min-width: 400px) {
html {font-size: 18px;}
}
@media screen and (min-width: 440px) {
html {font-size: 20px;}
}
@media screen and (min-width: 480px) {
html {font-size: 22px;}
}
@media screen and (min-width: 640px) {
html {font-size: 28px;}
}
2、js方案A
window.onload=function() {
function reCalc() {
var windowWidth = document.documentElement.clientWidth || window.innerWidth || document.body.clientWidth;
// windowWidth = windowWidth > 750 ? 750 : windowWidth;
var rootSize = 28 * (windowWidth / 375);
var htmlNode = document.getElementsByTagName("html")[0];
htmlNode.style.fontSize = rootSize + 'px';
}
reCalc();
window.addEventListener('resize', reCalc, false);
}
3、js方案B
!(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
reCalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 28 * (clientWidth / 375) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, reCalc, false);
doc.addEventListener('DOMContentLoaded', reCalc, false);
})(document, window);
4、js方案C
设备像素比 ＝ 物理像素 / 设备独立像素
A、设备像素比
通过window.devicePixelRatio来获取设备像素比，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询，对不同DPR的设备，做一些样式适配。
B、物理像素
肉眼能够看到的大小，往往不真实。
C、设备独立像素
一般是个绝对值，比如css像素。
如果css边框为1px，放在iphone的retina屏(设备像素比=2)下，会以为看到的是2px。
在此手淘方案中，为了在一些设备中，保持文本大小相同，文本大小依然用px为单位，宽高，内外边距要用rem为单位。安装pxtorem插件，写一个div，即可生成不同dpr的div样式。
div {
width: 1rem;
height: 0.4rem;
font-size: 12px; /* 默认写上dpr为1的fontSize */
}
[data-dpr="2"] div {
font-size: 24px;
}
[data-dpr="3"] div {
font-size: 36px;
}
该js手淘适配方案，模拟viewport，只对iOS设备进行dpr的判断，对于Android系列，始终认为其dpr为1。该手淘方案在iframe中有bug。
- 动态改写<meta>标签；
- 给<html>元素添加data-dpr属性，并且动态改写data-dpr的值；
- 给<html>元素添加font-size属性，并且动态改写font-size的值。
!function(win, lib) {
var timer,
doc = win.document,
docElem = doc.documentElement,
vpMeta = doc.querySelector('meta[name="viewport"]'),
flexMeta = doc.querySelector('meta[name="flexible"]'),
dpr = 0,
scale = 0,
flexible = lib.flexible || (lib.flexible = {});
// 设置了 viewport meta
if (vpMeta) {
console.warn("将根据已有的meta标签来设置缩放比例");
var initial = vpMeta.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
if (initial) {
scale = parseFloat(initial[1]); // 已设置的 initialScale
dpr = parseInt(1 / scale); // 设备像素比 devicePixelRatio
}
}
// 设置了 flexible Meta
else if (flexMeta) {
var flexMetaContent = flexMeta.getAttribute("content");
if (flexMetaContent) {
var initial = flexMetaContent.match(/initial\-dpr=([\d\.]+)/),
maximum = flexMetaContent.match(/maximum\-dpr=([\d\.]+)/);
if (initial) {
dpr = parseFloat(initial[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}
if (maximum) {
dpr = parseFloat(maximum[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}
}
}
// viewport 或 flexible
// meta 均未设置
if (!dpr && !scale) {
var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
if (isIPhone) {
// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
dpr = 3;
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
dpr = 2;
} else {
dpr = 1;
}
} else {
// 其他设备下，仍旧使用1倍的方案
dpr = 1;
}
scale = 1 / dpr;
}
docElem.setAttribute("data-dpr", dpr);
// 插入 viewport meta
if (!vpMeta) {
vpMeta = doc.createElement("meta");
vpMeta.setAttribute("name", "viewport");
vpMeta.setAttribute("content",
"initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no");
if (docElem.firstElementChild) {
docElem.firstElementChild.appendChild(vpMeta)
} else {
var wrap = doc.createElement("div");
wrap.appendChild(vpMeta);
doc.write(wrap.innerHTML);
}
}
function setFontSize() {
var winWidth = docElem.getBoundingClientRect().width;
if (winWidth / dpr > 540) {
(winWidth = 540 * dpr);
}
// 根节点 fontSize 根据宽度决定
var baseSize = winWidth / 10;
docElem.style.fontSize = baseSize + "px";
flexible.rem = win.rem = baseSize;
}
// 调整窗口时重置
win.addEventListener("resize", function() {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}, false);
// 方向改变时重置
win.addEventListener("orientationchange", function() {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}, false);
// 从浏览器读取缓存时触发，pageshow每次加载页面时触发。
win.addEventListener("pageshow", function(e) {
if (e.persisted) {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}
}, false);
// 设置基准字体
if ("complete" === doc.readyState) {
doc.body.style.fontSize = 12 * dpr + "px";
} else {
doc.addEventListener("DOMContentLoaded", function() {
doc.body.style.fontSize = 12 * dpr + "px";
}, false);
}
setFontSize();
flexible.dpr = win.dpr = dpr;
flexible.refreshRem = setFontSize;
flexible.rem2px = function(d) {
var c = parseFloat(d) * this.rem;
if (typeof d === "string" && d.match(/rem$/)) {
c += "px";
}
return c;
};
flexible.px2rem = function(d) {
var c = parseFloat(d) / this.rem;
if (typeof d === "string" && d.match(/px$/)) {
c += "rem";
}
return c;
}
}(window, window.lib || (window.lib = {}));
对于不同dpr，通过上面的js运行会产生不同的meta。
<!-- dpr = 1-->
<meta name="viewport" content="initial-scale=scale,maximum-scale=scale,minimum-scale=scale,user-scalable=no">
<!-- dpr = 2-->
<meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">
<!-- dpr = 3-->
<meta name="viewport" content="initial-scale=0.3333333333,maximum-scale=0.3333333333,minimum-scale=0.3333333333,user-scalable=no">
rem实现移动端自适应页面的更多相关文章
- 使用rem设计移动端自适应页面三（转载）
使用rem 然后根据媒体查询实现自适应.跟使用JS来自适应也是同个道理,不过是js更精确一点.使用媒体查询: html { font-size: 62.5% } @media only screen ...
- 使用rem设计移动端自适应页面一（转载）
1.困扰多时的问题 在这之前做Web App开发的的时候,在自适应方面一般都是宽度通过百分比,高度以iPhone6跟iPhone5之间的一个平衡值写死,我们的设计稿都是iPhone5的640 * 11 ...
- 使用rem设计移动端自适应页面二（转载）
由于日常需求以无线居多,所以可以在业务中做一些尝试,如 rem,刚接触这个特性的时候,曾经一度爱不释手,仿佛在无线开发的坎坷路上寻找到一条捷径.然而随着使用范围的扩大,慢慢的发现了一些使用 rem 带 ...
- 基于rem的移动端自适应解决方案
代码有更新,最好直接查看github: https://github.com/finance-sh/adaptive adaptivejs原理: 利用rem布局,根据公式 html元素字体大小 = d ...
- rem测试用实现移动端自适应页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 使用rem配置PC端自适应大屏
效果如下 使得大屏不论在什么宽高比例依然能展示全部数据 安装 npm install -S postcss-pxtorem rem配置思路 原先的rem函数是能解决大部分的问题的,如果展示不全,也可以 ...
- vw实现移动端自适应页面
一.设备支持情况 测试网站:https://caniuse.com/#search=vw css3test:https://airen.github.io/css3test/,https://gith ...
- flexible.js结合rem实现移动端自适应布局
1. 配置开发工具(sublime)插件 https://github.com/flashlizi/cssrem 注意: 只有在‘.css’后缀文件才能使用此插件功能 2. 在h ...
- rem 结合 scss 移动端自适应 初级入门demo
首先说明 本篇 内容 适合初级使用 rem 开发移动端 自适应 公式计算 推导过程, 高手绕路. 目标尺寸 = rem * 根字体大小 Px = rem * (html根字体px) 根字体大 ...
随机推荐
- docker的基础命令
详细命令参考http://www.runoob.com/docker/docker-command-manual.html
- 11.11CTF答案
签到题 flag{0ca175b9c0f726a831d895e269332461 } 下载WIN HEX,用WIN HEX打开“海贼王图片”, ...
- shell 通过EOF在脚本中输入需要的用户名或密码
参考地址:https://www.cnblogs.com/liyuanhong/p/10390786.html expect使用参考:https://www.cnblogs.com/liyuanhon ...
- prometheus rules
prometheus 持久查询 有三种方法可以使我们的持久查询(不用每次都要输入查询规则): 记录规则 - 从查询中创建新的指标. 警报规则 - 从查询生成警报. 可视化 - 使用像Gra ...
- UML建工工具
本篇博文简单介绍一下自己在搜索UML建模工具的过程中收集到的一些信息. 如果想用中文的,可以考虑楚凡科技的Trufun Plato,不过最近好像没有怎么更新了. 很多前辈以前用的是Rational R ...
- burp suite 基础入门超详细教程
介绍: 都是我个人了解到的信息,,分享给大家 欢迎指正 burp suite 被誉为web安全工具中的瑞士军刀. 大家知道,瑞士军刀,都是体积小,功能强悍,.西方军队的标配.说这么多,只是想强调这款工 ...
- 清北学堂学习总结day1
上午篇 一.高精度计算: [以下内容先只考虑非负数情况] •高精度加法: 思路:[模拟竖式运算] 注意:[进位] •高精度减法: 思路:[同加法类似,模拟竖式运算,进位变退位] 注意: [结果为负数的 ...
- 重新定义Pytorch中的TensorDataset，可实现transforms
class TensorsDataset(torch.utils.data.Dataset): ''' A simple loading dataset - loads the tensor that ...
- Ansible------角色
什么是角色 角色是一种解决问题的思想,也是一种规范. 目录 角色的目录结构如下: files: 存放由copy或script模块等调用的文件. templates: template模块查找所需要模板 ...
- Linux环境下安装SQL Server 2017
参考链接 https://docs.microsoft.com/zh-cn/sql/linux/quickstart-install-connect-red-hat?view=sql-server-2 ...