js 关于网易淘宝移动端适配的学习 

(function (doc, win) {
            // orientationchange:用户水平或者垂直翻转设备（即方向发生变化）时触发的事件;(屏幕大小发生变化)
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;//获取当前可视的宽度
                    if (!clientWidth) return;//不存在返回
                    if(clientWidth>=640){//大于640时字体设置
                        docEl.style.fontSize = '100px';
                    }else{//小于640时 可视宽度/640*100
                        docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                    }
                };

            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);//是firefox下特有的Event, 当所有DOM解析完以后会触发这个事件。
        })(document, window);

 



 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
 7     <script>
 8         
 9     </script>
10     <style>
11         *{margin: 0;padding: 0;}
12         #title{width: 100%;height: 2rem;background: deepskyblue;}
13         #imgBox{width: 100%;height: 100%;}
14         #imgI{display: block;width: 100%;height: auto;margin: 0 auto;}
15         #imgI img{width: 100%;height: 100%;}
16 
17         #imgI1{display: block;width: 6.4rem;height: 3.3rem;margin: 0 auto;}
18         #imgI1 img{width: 100%;height: 100%;}
19     </style>
20 </head>
21 <body>
22 <div id="title"></div>
23 <div id="imgBox">
24     <i id="imgI">
25         <img src="/activity_mobile/img/aDG_banner.jpg">
26     </i>
27     <i id="imgI1">
28         <img src="/activity_mobile/img/aDG_banner.jpg">
29     </i>
30 </div>
31 </body>
32 </html>

 

posted @ 2017-09-11 14:07  seafwg  阅读(720)  评论(0)    收藏  举报