使用%单位
css中body元素全局声明font-size=62.5%, 因为浏览器中默认字体高都是16px,
所以100%=16px, 62.5%=10px,
so 1rem = 10px, 2rem = 20px.
@media only screen and (min-width: 320px){
html {
font-size: 62.5% !important;
}
}
@media only screen and (min-width: 640px){
html {
font-size: 125% !important;
}
}
@media only screen and (min-width: 750px){
html {
font-size: 150% !important;
}
}
@media only screen and (min-width: 1242px){
html {
font-size: 187.5% !important;
}
}
可以改变html的字体大小,使其他字体具有响应式。
(function(designWidth, maxWidth) {
var doc = document,
win = window,
docEl = doc.documentElement,
remStyle = document.createElement("style"),
tid;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
maxWidth = maxWidth || 540;
width>maxWidth && (width=maxWidth);
var rem = width * 100 / designWidth;
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
}
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(remStyle);
} else {
var wrap = doc.createElement("div");
wrap.appendChild(remStyle);
doc.write(wrap.innerHTML);
wrap = null;
}
refreshRem();
win.addEventListener("resize", function() {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
if (doc.readyState === "complete") {
doc.body.style.fontSize = "16px";
} else {
doc.addEventListener("DOMContentLoaded", function(e) {
doc.body.style.fontSize = "16px";
}, false);
}
})(750, 750);
1)用法很简单,只需要在html文件head最上面加入视口代码
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2)然后新建一个js文件夹,将我们的佛祖和动态计算html字体大小的js代码放进去,然后在视口下面引入,就可以了,
3)使用过程中,这段js代码有两个参数可以传入,这两个参数就是你的设计师给你的设计稿宽度,填上就可以了,
4)使用很简单,设计稿宽度除以100使用即可(例如:设计稿宽度300px = 3rem,采用的是除100来换算,从而使在使用过程中更方便,无需使用rem单位换算工具)
5)rem不仅仅可以用在移动端布局,还可以用在PC端上,
例如:设计师给了你内容宽度1200px以上的设计搞要你做自适应时,你完全可以不用担心,只需要量一下设计稿宽度,修改我们js的两个参数修改为设计稿内容宽度即可。(提个醒,记得加上视口)
6)这段js主要是动态修改hrml字体大小,从而做到rem单位不动的情况下,自动适应所有手机端屏幕大小,想一下1rem在不同宽度手机上的值都是不一样的,是不是很完美呢。
7)此方法内有一段代码是可以修改的,修改为屏幕高度会有意想不到的效果
var width = docEl.getBoundingClientRect().width;//这段代码可修改