免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

    

    
    

    



    

    
    
        
    
            
    移動端適配方法
    
            
    2024-03-09    分類：
                                    網站建設               
    
        
    
        
    
			前端代碼的編寫永遠逃不過“兼容”二詞，從前PC時代，因為IE的傲嬌，導致程序猿們一直在兼容IE的道路上掙扎，如今移動設備的普及，仿佛讓我們看到了希望，仿佛馬上就要擺脫IE了，可是！一波還未平息，一波又來侵襲~移動端確實不用考慮IE了，各種CSS新特性也用的爽到飛起，但一座大山壓了過來，那就是分辨率的適配，移動端由于展示區域比較小，因此對于頁面在不同分辨率手機上的展示細節也要求更加嚴格，這時像PC端有些固定寬高的布局方式顯然不適應，我們被要求對于不同大小手機頁面能自適應，真是非常有（tong）趣（ku）呢

    話不多說，下面就總結了一些移動端常用的適配手法：

    一、百分比

    使用場景：只要求寬度隨屏幕自適應，比如文字塊

    百分比在PC端自適應上也經常用到，著實相當好用，但它一般用于寬度自適應的設置，高度設置百分比時，要求其父類元素有明確高度。

    1、利用百分比實現填充全屏

    為了讓元素設置height：100%生效，并且正好為窗口高度，則需要給html和body元素以及它所有的父元素都設置高度100%。

    例如：

    <html style="height: 100%;">
      <body style="height: 100%;">
        <div  class="wrap" style="height: 100%; width:100%">
            填充全屏啦
        </div>
      </body>
    </html>

    在使用height: 100%;時需要注意的一些事項

    Margins 和 padding 會讓你的頁面出現滾動條，也許這是你不希望的。
    如果你的元素實際高度大于你設定的百分比高度，那元素的高度會自動擴展。
    寫到這里我突然想插個題外話，對于absolute定位的元素，用height：100%顯然也是無效的，因為此時它已經脫離了文檔流，此時它的高度由自身內容撐開。這是如果我希望它填滿父盒子，怎么做？這里有個黑魔法，設置它的top,left,bottom,right均為0，這時盒子就會被拉伸至填滿父盒子。

    2、利用百分比實現寬高比固定

    有時，我們希望寬度自適應，高度隨寬度變化而變化，并有固定的寬高比。

    讓我們縷縷，用height百分比顯然不行，height百分比是以父元素高度為基準的，而我們需要以寬度為基準來設置高度。

    所以這里可以用到padding-top或者padding-bottom，padding是以父元素的width為基準的。我們可以設置元素的height：0，然后用padding-bottom將元素撐開，以實現固定寬高比。

    二、rem

    使用場景：對于圖片等對高度自適應有要求的場景

    rem單位：以頁面根字體的大小，也就是html元素字體的大小為基準，例如

    html{
        font-size:16px;
    }

    那么1rem等于16px。

    所以使用時，我們只要讓根字體大小隨屏幕大小自適應，那頁面中所有使用rem單位來設置寬高的元素，大小也會隨屏幕大小自適應了。

    根據不同屏幕大小設置根字體大小有兩種方法：

    1、css方法設置rem

    利用媒體查詢，根據不同的屏幕大小進行設置，缺點就是一般只列舉一些代表性的屏幕大小，自適應不能充分覆蓋所有范圍

    html{
        font-size:10px
    }
    @media screen and (min-width:321px) and (max-width:375px){
        html{
            font-size:11px
        }  
    }
    @media screen and (min-width:376px) and (max-width:414px){
        html{
            font-size:12px
        }
    }
    @media screen and (min-width:415px) and (max-width:639px){
        html{
            font-size:15px
        }
    }
    @media screen and (min-width:640px) and (max-width:719px){
        html{
            font-size:20px
        }
    }
    @media screen and (min-width:720px) and (max-width:749px){
        html{
            font-size:22.5px
        }
    }
    @media screen and (min-width:750px) and (max-width:799px){
        html{
            font-size:23.5px
        }
    }
    @media screen and (min-width:800px){
        html{
            font-size:25px
        }
    }

    2、JS方法設置rem

    利用JS設置根字體大小，所以若改變發生在渲染完成之后，則會引起回流，導致閃屏現象。因此使用這種方法時，應將JS代碼放入head頭部中并且在CSS引入之前。

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

    上面clientWidth為實際屏幕的寬度，而375為設計稿基于的參考屏幕寬度，20則是當實際屏幕寬度等于參考屏幕寬度時，1rem的大小。代碼的關鍵參數20和375是這樣設置的：

    a) 由于提供的設計稿現在基本都是以iPhone6/7/8為參考的，寬度為750px，dpr為2，所以計算rem時的參考屏幕寬度可以設置為375。

    b) 由于chrome的最小字體是12px，又為了計算方便，所以可以設置1rem的大小為20px
    應用過程中，比如我們拿到了一個750的設計稿，那么首先，將設計稿里的數值除以2，得到按手機屏幕大小布局的數值（這也是375的由來）。然后，再除以20就可以將設計稿中的px轉化為rem了。

    三、媒體查詢

    使用場景：一般利用媒體查詢來進行特殊處理，比如

    1、iphoneX這類全屏的適配

    2、在適配dpr為3的iPhone Plus或者pad橫屏等超級大屏時，需要根據業務需求設置臨界值，然后展示不同內容或者替換不同分辨率圖片（也就是常說的2倍圖、3倍圖的使用）等

    四、vw、vh

    vw是以屏幕寬度為基準的百分比單位，1vw=1% * deviceWidth

    vh是以屏幕高度為基準的百分比單位，1v=1% * deviceHeight

    vw,vh確實很好用，但是目前使用時仍需考慮兼容性的問題，在國內一些手機自帶瀏覽器里（比如華為）會失效，并且據說碰上X5內核時也容易踩坑 。
    本文來源于成都網站建設公司與成都網站設計制作公司-創新互聯成都公司！
                
    
                新聞名稱：移動端適配方法
                
    
                網頁鏈接：http://m.newbst.com/news30/320180.html
            
    
            
    
                                    成都網站建設公司_創新互聯，為您提供網站排名、、電子商務、小程序開發、云服務器、關鍵詞優化            
    
            
    
                廣告
                
            
    
            
    
                聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：
                創新互聯
            
    
        
    
        
    
    

    
    
        網站建設網站維護公司