移動端rem切圖

時間 2019-11-11

標籤移動 rem 欄目無線简体版

原文原文鏈接

1.爲何用rem

根據屏幕大小，自動調整大小javascript

2.如何使用rem

分如下幾步css

a.用ps把設置稿弄成640px或者750px的（記得等比例縮放）html

b.調試時記得把瀏覽器默認最小字體設置爲最小。手機端是支持12px如下的字體的java

c.引入meta頭web

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

d.引入reset文件canvas

 
        html, body, div, span, applet, object, iframe, 
       
 
        h 
        1 
        , h 
        2 
        , h 
        3 
        , h 
        4 
        , h 
        5 
        , h 
        6 
        , p, blockquote,  
        pre 
        , 
       
 
        a, abbr, acronym, address, big, cite,  
        code 
        , 
       
 
        del, dfn, em, img, ins, kbd, q, s, samp, 
       
 
        small 
        , strike, strong,  
        sub 
        , sup, tt, var, 
       
 
        b, u, i,  
        center 
        , 
       
 
        dl, dt, dd, ol, ul, li, 
       
 
        fieldset, form, label, legend, 
       
 
        table,  
        caption 
        , tbody, tfoot, thead, tr, th, td, 
       
 
        button,article, aside, canvas, details,  
        embed 
        , figure, 
       
 
        figcaption, footer, header, hgroup, menu, nav, 
       
 
        output, ruby, section, summary, time, mark, 
       
 
        audio, video { 
       
 
        margin 
        :  
        0 
        ; 
       
 
        padding 
        :  
        0 
        ; 
       
 
        border 
        :  
        0 
        ; 
       
 
        vertical-align 
        :  
        baseline 
        ; 
       
 
        background 
        :  
        transparent 
        ; 
       
 
        outline 
        :  
        none 
        ; 
       
 
        -webkit-box-sizing: border-box; 
       
 
        -moz-box-sizing: border-box; 
       
 
        box-sizing: border-box; 
       
 
        } 
       
 
        article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {  
        display 
        :  
        block 
        ; } 
       
 
        ol, ul {  
        list-style 
        :  
        none 
        ; } 
       
 
        button{ 
        background 
        :  
        transparent 
        ;} 
       
 
        blockquote, q {  
        quotes 
        :  
        none 
        ; } 
       
 
        blockquote:before, blockquote:after, q:before, q:after {  
        content 
        :  
        '' 
        ;  
        content 
        :  
        none 
        ; } 
       
 
        strong {  
        font-weight 
        :  
        bold 
        ; } 
       
 
        table {  
        border-collapse 
        :  
        collapse 
        ;  
        border-spacing 
        :  
        0 
        ; } 
       
 
        img {  
        border 
        :  
        0 
        ;  
        max-width 
        :  
        100% 
        ; } 
       
 
        html{ 
       
 
        line-height 
        : initial; 
       
 
        } 
       
 
        body{ 
       
 
        font-size 
        :  
        0.32 
        rem; 
       
 
        } 
       

e.引入js媒體查詢文件瀏覽器

 
        ( 
        function 
        (doc, win) { 
       
 
        var 
        docEl = doc.documentElement, 
       
 
        resizeEvt =  
        'orientationchange' 
        in 
        window ?  
        'orientationchange' 
        :  
        'resize' 
        , 
       
 
        recalc =  
        function 
        () { 
       
 
        var 
        clientWidth = docEl.clientWidth; 
       
 
        if 
        (!clientWidth)  
        return 
        ; 
       
 
        if 
        (clientWidth >= 750) { 
       
 
        docEl.style.fontSize =  
        '100px' 
        ; 
       
 
        }  
        else 
        { 
       
 
        docEl.style.fontSize = 100 * (clientWidth / 750) +  
        'px' 
        ; 
       
 
        } 
       
 
        }; 
       
 
        if 
        (!doc.addEventListener)  
        return 
        ; 
       
 
        win.addEventListener(resizeEvt, recalc,  
        false 
        ); 
       
 
        doc.addEventListener( 
        'DOMContentLoaded' 
        , recalc,  
        false 
        ); 
       
 
        })(document, window); 
       