移动端适配方案
第一种:font-size+rem(最优解决方案)
html标签的font-size设置为40px通过js计算屏幕与设计稿的占比,例子设计稿是720px
// 定义rem单位大小,放在页面加载之前 解决闪屏问题
(function (){
var device=document.documentElement.clientWidth;
var scale=device/720;
html.style.fontSize=scale*40+'px';
})();
第二种:zoom+js控制页面缩放比
用zoom属性控制页面缩放比
var widths = $(window).width();
var view = 640;
$("html").css('zoom',widths/view);
$(window).resize(function(){
var widths = $(window).width();
var view = 640;
$("html").css('zoom',widths/view)
})
第三种:media+font-size + rem
通过media控制不同区间的font-size,例子指给了一个区间
@media only screen and (min-width: 640px){
html{
font-size: 62.5%;
}