移动端开发rem模式开发

1，通过js来改变html的根目录字体大小来动态改变界面的字体大小来自适应，

2，最好放在全局变量里面，让整个页面都共用，

3，每个盒子里面要设置字体大小不然变大屏幕字体会看不见，

原生js代码

其中document.addEventListener("touchstart", function() {},false);是为了伪类兼容ios

/* * rem适配函数 * html 内容 * width 浏览器宽度 * */ function rem(){ var html = document.documentElement; var width = html.getBoundingClientRect().width; html.setAttribute('style','font-size: ' + width/15 + 'px !important;'); } /* 页面加载完成触发 */ window.onload = function(){ rem(); } /* 窗口大小发生改变时触发 */ window.onresize = function(){ rem(); } /*兼容ios a标签的伪类*/ document.addEventListener("touchstart", function() {},false);

jquery代码

var oWidth;

function pm(){

  oWidth = $(window).width();

$('html').css('font-size',oWidth/15);

}

pm();

$(window).resize(function(){

pm();

});

document.addEventListener("touchstart", function() {},false);

Tags：设计

转载：转载说明/xd/23.html

很赞哦！ ()