750设计图 px单位 / 100 = rem ;
使用时候写进header script 标签
/*** 自适应布局*/
initPageScale() || rem();
function initPageScale() {
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
//设置一个最小值,防止当浏览器里有top和bottom条时候,缩放比例太小
if (height < 520) { //height = 520; }
var ratio = 1;
var clientRatio = height / width;
var standardRatio = 1325 / 750; //视觉基准
if (clientRatio < standardRatio) { //扁屏幕要进行缩放处理
ratio = clientRatio / standardRatio; }
document.querySelector('html').style.fontSize = (document.documentElement.clientWidth / 750 * ratio) * 100 + "px";}
function rem() {
document.querySelector('html').style.fontSize = ((window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) / 750) * 100 + "px";
}
rem-自适应兼容
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- H5-WebApp 自适应方案 - rem 对于WebApp来说,为了更通用地满足各机型屏幕的自适应布局要求,我们...
- 姓名:谢艾芳 学号:16040410073 转自http://www.jianshu.com/p/ee200a67...