前端移动端简单了解

html文件:rem和html有关 em和当前盒子有关

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
        <title>移动端布局</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            ul{
                list-style: none;
            }
            .clearfix:after{
                content: '';
                display: block;
                clear: both;
            }
            html{
               /* font-size: 20px;*/

                /*1rem=20px*/

            }
           /* html{
                 100%;
                height: 100%;
               
                overflow: hidden;
            }*/
            body{
                 100%;
                height: 100%;
                /*overflow: auto;*/
                padding-top: 80px;
            }
            .head-box{
                 100%;
                height: 80px;
                background-color: red;
                position: fixed;
                top: 0;
                left: 0;    
                z-index: 9999;
            }
            .list{
                
                font-size: 14px;
            }
            
            .list .item{
                float: left;
                 1rem;
                height: 1rem;
                border: 1px solid black;
                margin: 0.1rem;
                
            }

            /*
            移动端单位 
            相对单位和绝对单位px
            相对单位
            em:相对于当前盒子的设置的字体;
            20px = 1em

            rem:相对于html的字体大小;

            */
            
            
            
        </style>
    </head>
    <body>
        
        <header class="head-box">
            <div class="head-top"></div>
            <div class="head-bottom"></div>
        </header>
        
        <ul class="list clearfix">
            <li class="item">1111111</li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
        </ul>
        
        <div></div>
        <div></div>
    </body>
    <script src="./resize.js"></script>
</html>

　　js代码:注意在设置时当前设计的尺寸和自定义的换算 width为当前的尺寸,启动会自动检测

/*获得页面宽度后动态修改html上的fontsize
* 320为iphone5设计稿下的页面宽度，如下设置后页面的页面在iphone5等宽屏幕上html
* 的font-size会变为20px，即 1rem = 100px    1px=0.05rem
* 所以设置元素尺寸的时候，如果测量设计稿 15px  则需设置尺寸为 (0.05*15)rem = 0.75rem   
*/
// 1rem = 100px 1px = 0.01rem  


!(function(doc, win) {
    var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function() {
            var width = docEle.clientWidth;
            console.log(width)
            width && (docEle.style.fontSize =100 * (width / 1226) + "px");
        };
     
    win.addEventListener(evt, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);
 
}(document, window));

前端 移动端简单了解

前端移动端简单了解