'use strict';
(function(doc, win) {
var docEl = doc.documentElement, // 获取html对象
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', // 横屏是否支持,不支持则为浏览器大小改变
// 计算页面字体大小
recalc = function() {
// 获取页面宽度
var clientWidth = docEl.clientWidth;
// 获取不到页面宽度,直接返回
if (!clientWidth) return;
// 设置html字体大小(浏览器默认字体大小为16px)
docEl.style.fontSize = clientWidth / 375 * 16 + "px";
};
// 不支持addEventListener,返回
if (!doc.addEventListener) return;
// 监听事件,获取当前html标签的字体大小
win.addEventListener(resizeEvt, recalc, false);
// dom内容加在完成事件
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
移动端适配方法
- Media Queries媒体查询
@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/ /*你的css代码*/ }
- Flex弹性布局
- rem + viewport 缩放
// viewport也是固定的
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
// 通过以下代码来控制rem基准值(设计稿以720px宽度量取实际尺寸)
!function (d) {
var c = d.document;
var a = c.documentElement;
var b = d.devicePixelRatio;
var f;
function e() {
var h = a.getBoundingClientRect().width, g;
if (b === 1) {
h = 720
}
if(h>720) h = 720;//设置基准值的极限值
g = h / 7.2;
a.style.fontSize = g + "px"
}
if (b > 2) {
b = 3
} else {
if (b > 1) {
b = 2
} else {
b = 1
}
}
a.setAttribute("data-dpr", b);
d.addEventListener("resize", function () {
clearTimeout(f);
f = setTimeout(e, 200)
}, false);
e()
}(window);
下面这段CSS是最好的基于rem和vm和calc实践代码(转)
html {
font-size: 16px;
}
@media screen and (min-width: 375px) {
html {
/* iphone6的375px尺寸作为16px基准, 414px正好18px大小*/
font-size: calc(100% + 2 * (100vw - 375px) / 39);
font-size: calc(16px + 2 * (100vw - 375px) / 39);
}
}
@media screen and (min-width: 414px) {
html {
/* 414px-1000px 每100像素宽字体增加1px(18px-22px) */
font-size: calc(112.5% + 4 * (100vw - 414px) /586);
font-size: calc(18px + 4 * (100vw - 414px) /586);
}
}
@media screen and (min-width: 600px) {
html {
/* 600px-1000px 每100像素宽字体增加1px(20px-24px) */
font-size: calc(125% + 4 * (100vw - 600px) / 400);
font-size: calc(20px + 4 * (100vw - 600px) / 400);
}
}
@media screen and (min-width: 1000px) {
html {
/* 1000px以上每100像素宽字体增加0.5px */
font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
font-size: calc(22px + 6 * (100vw - 1000px) / 1000);
}
}