【Html】【UI适配】利用rem进行移动页面等比适配

    
    

    

    
        

        

    

    
        html, body {
            padding: 0px;
            margin: 0px;
            overflow: hidden;
        }

        #v1 {
            width: 768rem;
            height: 50rem;
            background: red;
        }

        #v2 {
            width: 384rem;
            height: 50rem;
            background: blue;
        }
    

    
        $(adapterRem);
        window.onresize = adapterRem;

        //单位rem表示和html元素font-size一样的大小，利用这个单位，我们可以让网页在任何设备上等比显示
        //假设UI给出的设计图是768*1024，把设计图分为768份，每一份对应1px
        //如果把设计图中1px对应的大小设为html元素的font-size，那么html元素的大小即为768rem
        //其它元素在设计图中是多少px，在css中就设置为多少rem，这样和html元素的比例就和设计图中是一致的
        function adapterRem() {
            $("html").css("fontSize", document.documentElement.clientWidth / 768);
        }