1.利用meta的viewport做适配
<meta name="viewport" id="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no,viewport-fit:contain">
在<head></head>里面加一个script的处理
<script>
! function() {
function a() {
var dw = 640; //设计稿尺寸
var viewport = document.getElementById('viewport');
viewport.setAttribute('content', 'width=' + dw + ', user-scalable=no,viewport-fit:contain')
}
var b = null;
window.addEventListener('resize', function() {
clearTimeout(b);
b = setTimeout(a, 600)
}, !1);
a()
}(window);
</script>
然后css的写法就是按照正常量到的设计稿尺寸就可以了，单位为px
2.利用 手淘+rem+less 做适配 less编译成css，页面只需要引入css就可以了，
引入文件（1）flexible.js （2）less编译后的css文件
index.less文件--->
@remBase :75;
@rem: round(1 / @remBase, 6) * 1rem;
div{
width:500*@rem;
height：200*@rem
}
关于viewport更多用法的参考：
https://blog.csdn.net/kissing7/article/details/45307115
扫一扫
3873
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
