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) 根字体大 ...
随机推荐
- LoadRunner【第五篇】关联
关联的定义及使用场景 关联:将服务器提供动态变化的值存放在变量中,当需要使用该变量时,由LoadRunner自动从服务器响应的信息中获取该值,并在后面使用的过程中进行替换.(也可能是前端页面动态生成的 ...
- cogs2479 偏序(CDQ套CDQ)
题目链接 思路 四维偏序 \(CDQ\)套\(CDQ\),第一维默认有序.第二维用第一个\(CDQ\)变成有序的.并且对每个点标记上第一维属于左边还是右边.第二个\(CDQ\)处理第三维,注意两个\( ...
- PTA数组作业一查找整数
代码 #include<stdio.h> int main(void){ int a[20],n,flag=0,x; int i; scanf("%d%d",& ...
- CMDB服务器管理系统【s5day89】:深入理解Java的接口和抽象类
对于面向对象编程来说,抽象是它的一大特征之一.在Java中,可以通过两种形式来体现OOP的抽象:接口和抽象类.这两者有太多相似的地方,又有太多不同的地方.很多人在初学的时候会以为它们可以随意互换使用, ...
- 深入剖析Kubernetes学习笔记：开篇词（00）
一.关于Kubernetes初学的疑惑 就在这场因"容器"而起的技术变革中,kubernetes项目已经成为容器技术的事实标准,重新定义了基础设置领域对应用编排与管理的种种可能 1 ...
- G1 垃圾收集器入门
最近在复习Java GC,因为G1比较新,JDK1.7才正式引入,比较艰难的找到一篇写的很棒的文章,粘过来mark下.总结这篇文章和其他的资料,G1可以基本稳定在0.5s到1s左右的延迟,但是并不能保 ...
- Linux shell脚本启动 停止 重启jar包
最近做的微服务jar包想弄在持续集成中自动化部署,所以首先得有一个操作jar包的脚本 只需将jar文件的路径替换到APP_NAME的值就可以了,其他不用改 注意:window编辑的shell文件,通过 ...
- Node.js实战项目学习系列(3) CommonJS 模块化规范
前言 想开始编写Node.js代码,那么我们就必须先熟悉它的模块化规范CommonJS,本文将详细讲解CommonJS规范 本文代码 >>> github 地址 CommonJS N ...
- SpringBoot系列: 制作Docker镜像的全过程
本文主要参考了 https://segmentfault.com/a/1190000016449865 , 感谢作者的付出. 另外, 在本文中, 演示了Windows+Maven+Docker To ...
- tex中pdf外链
\documentclass{article} \usepackage{hyperref} \begin{document} \href{run:d:/my folder/test.pdf}{This ...