移动h5开发记录

1.增加一下

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

 

2.移动端的设计稿 750； PC的设计是1080

 

3.增加一下script标签

<script type="text/javascript">

(function (doc, win, imgW) {

　　var docEl = doc.documentElement,

　　resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

　　recalc = function () {

　　　　var clientWidth = docEl.clientWidth;

　　　　console.log(clientWidth);

　　　　if (!clientWidth) return;

　　　　if (clientWidth >= imgW) {

　　　　　　docEl.style.fontSize = '100px';

　　　　} else {

　　　　　　docEl.style.fontSize = 100 * (clientWidth / imgW) + 'px';

　　　　}

　　};

　　if (!doc.addEventListener) return;

　　win.addEventListener(resizeEvt, recalc, false);

　　doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window, 750);

</script>

4.当做完以上操作的时候，可以量设计图的px，比如一个元素的高度是505px；那么rem就是505/100=5.05rem；