浅谈Web自适应

<head>

(function() {

// deicePixelRatio ：设备像素

var scale = 1 / devicePixelRatio;

//设置meta 紧缩界面模仿设备的高分辨率

document.querySelector('meta[name="viewport"]').setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

//debounce 为撙节函数，本身实现。或者惹人underscoure即可。

var reSize = _.debounce(function() {

var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;

//按照640像素下字体为100px的标准来，获得一个字体缩放比例值 6.4

document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';

}, 50);

window.onresize = reSize;

})();

</script>

html {

height: 100%;

width: 100%;

overflow: hidden;

font-size: 16px;

}

div {

height: 0.5rem;

widows: 0.5rem;

border: 0.01rem solid #19a39e;

}

........

</style>

3/5 首页上一页 1 2 3 4 5 下一页尾页

　　推荐阅读

　　京东“618”在即，这些“京东版”的黑科技你知道吗?

【51CTO.com原创稿件】2017年贵阳数博会方才停止，京东“618”狂欢节却早已打响……早在6月1日，京东集团提议的“618年中购物节”就正式拉开了序幕，京东>>>详细阅读

本文标题：浅谈Web自适应

地址：http://www.17bianji.com/lsqh/35584.html

1/2 1