根据750的设计稿为例
方法一:引入rem.js文件,具体的文件代码可参考:
(function (doc, win) {
var docEl = doc.documentElement,
// orientationchange 当设备的方向变化(设备横向持或纵向)此事件被触发
//判断窗口有没有orientationchange这个方法,有就赋值给一个变量,没有就返回resize方法。
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
//clientWidth:对象内容的可视区的宽度,不包滚动条等边线
if (!clientWidth) return;
//把document的fontSize大小设置成跟窗口成一定比例的大小
if(clientWidth>=750){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
};
if (!doc.addEventListener) return; //DOMContentLoaded是firefox下特有的Event, 当所有DOM解析完以后会触发这个事件。
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
方法二:js+less适配
rem.js:
(function (win) {
function setUnitA() {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + "px";
}
var h = null;
window.addEventListener("resize", function () { clearTimeout(h); h = setTimeout(setUnitA, 300); }, false);
setUnitA();
})(window);
**common.less:**文件顶部定义@rem: 750/10rem,然后css全文件的单位直接用@rem。如:100px = 100/@rem
初始化style:
<style>
/* 如果屏幕超过了750px,那么我们就就按照750px设计稿来走,不会让页面超过750px ,使用媒体查询来设置*/
@media screen and (min-width: 750px) {
html {
font-size: 75px !important;
}
}
body {
min-width: 320px;
max-width: 750px;
width: 10rem;
margin: 0 auto;
}
</style>
方案三:less适配。
html {
font-size: 20px;
}
@media only screen and (min-width: 401px) {
html {
font-size: 25px !important;
}
}
@media only screen and (min-width: 428px) {
html {
font-size: 26.75px !important;
}
}
@media only screen and (min-width: 481px) {
html {
font-size: 30px !important;
}
}
@media only screen and (min-width: 569px) {
html {
font-size: 35px !important;
}
}
@media only screen and (min-width: 641px) {
html {
font-size: 40px !important;
}
}
@rem: 40rem;