移動端web佈局方案的知識總結

時間 2019-11-10

標籤移動 web 佈局方案知識總結欄目無線简体版

原文原文鏈接

作移動端web開發時，我本身瞭解了4種方法，我以爲目前適合個人方法就是用rem來做單位，配合h5新的meta屬性來適配屏幕作開發。
首先介紹一下meta標籤css

<meta name="viewport" content="width=width-device,initial-scale=1;minimum-scale=1,maximum-scale=1,user-scalable=no"/>

name="viewport"是來告訴瀏覽器這個meta屬性是設置設備視口的
content=""是設置視口的具體內容
width=device-width這段代碼告訴瀏覽器，頁面的寬度就等當前設備的視口寬度，
initial-scale=1,表明初始的頁面縮放比例爲1，
minimum-scale=1表明縮放的最小比例爲1,
maximum-scale=1表明縮放的最大比例爲1
user-scalable=no表明不容許用戶進行手動縮放。html

在作開發時，儘可能把minimum-scale=1,maximum-scale=1帶上，由於有些第三方工具會讓頁面縮放,加上這兩個時，表明最小縮放比例爲1，最大縮放比例也爲1，那就是不讓用戶進行縮放。接下來講縮放比例，即就是你寫的css裏的1px在屏幕上顯示也是1px的寬度，這就是1:1的縮放比例關係，當你在移動設備上作開發時，爲了能讓用戶在屏幕上看的更加清晰，這時Retina屏來了，他會把畫布的大小放大到原來的2倍，也就是說如今我寫的css裏的1px在屏幕上展現的是2px的寬度。在平時開發的時候我想要設置1px的邊框，總不可能在css裏寫0.5px吧，因此爲了讓1px的寬度在屏幕上顯示也是1px的寬度，就只能去對頁面進行縮放，也就是讓<meta name="viewport" content="width=width-device,initial-scale=0.5;minimum-scale=0.5,maximum-scale=0.5,user-scalable=no"/>
這裏先用0.5來講。
當縮放比例爲1時，也就是<meta name="viewport" content="width=width-device,initial-scale=1;minimum-scale=1,maximum-scale=1,user-scalable=no"/>咱們來看看這段代碼的運行結果。web

<style>
        * {
            margin:0;
            padding:0;
        }
        .box {
            width:100%;
            height:400px;
            margin:0 auto;
            box-sizing:border-box;
            background-color:orange;
            border:1px solid #000;
        }

    </style>
</head>
<body>
    <div class="box"></div>
</body>

運行結果：瀏覽器

當縮放比例爲0.5時，也就是<meta name="viewport" content="width=width-device,initial-scale=0.5;minimum-scale=0.5,maximum-scale=0.5,user-scalable=no"/>，咱們來看看這段代碼的運行結果。iphone

這時邊框也能知足咱們的需求1px了。可是0.5哪裏來的呢？別急，請看下面，我們在開發時，有沒有注意這裏的2.0移動端web

這就是縮放比，電腦屏幕縮放比爲1:1，移動設備就不同了。你們能夠看切換設備看看各類手機的縮放比。前面用的0.5，就是縮放比分之一獲得的。咱們在作開發時，把meta裏的各類縮放比例改爲縮放比分之一就好了，可是咱們又如何獲取各類設備的縮放比呢，放心，js裏面已經有了獲取屏幕縮放比的屬性了，window.devicePixelRatio,好比iphone5的這個值就是2等等。這樣有了縮放比。咱們就能夠經過js動態設置meta標籤和裏面的縮放比了，有了這些內容，咱們就能在屏幕上作到1px顯示1px的顯示了。有了這些，咱們就能用我今天所要介紹的第一種方法也是我最喜歡用的方法rem佈局。
1rem就是1個根元素的字體大小，也就是說html設置爲20px,1rem就是20px;rem是相對於根元素html的，而em是基於父元素字體大小的。
像素還原到1:1後，咱們拿寬爲640的設計稿，iphone5的屏來適配，此時咱們就能夠按照稿子進行原模原樣的切圖，也就是設計稿某區域切出來時爲多少px，css就寫多少px。最後咱們把px所有轉換爲rem，好比html的font-size大小是20px,div的寬度是100px,咱們就能夠把100px寫成5rem。就這樣一直切完整個設計稿，終於完成了切圖，佈局。（彈性盒子佈局很強大，建議去看看）可是當咱們換一個設備好比說iphone6p時，頁面佈局又亂了，這是由於咱們設置的html根元素的字體大小沒變，而屏幕大小變了，致使佈局變亂了，那麼咱們就要根據屏幕的大小動態的改變根元素的字體大小就好了。接下來看這段代碼，帶有註釋工具

加上上面的代碼以後，就能應用在任何尺寸不一樣的設備上了。
下面介紹另外三種佈局方式，目前我不喜歡用這些，將來可能會混合用到
1，定死頁面寬度，直接寫一個div把寬度訂到設計稿的寬度或者你須要的寬度，而後讓它居中，再在這個div盒子裏進行你的頁面開發，這種開發的缺點就是當遇到較大的屏幕時，屏幕的兩邊會流出白邊，影響美觀，體驗很差。
2，利用百分比進行開發，把元素的高度固定，寬度給百分比，缺點就是在大屏幕上，元素的寬度被拉伸，致使寬高比例不協調，不夠美觀。
3，利用響應式佈局，根據不一樣的屏幕寬度，用不一樣的css樣式,這個方式代碼量大，比較複雜，不適合頁面佈局複雜的大型網站，反而在博客，我的網站等比較小的網站上效果很好。佈局

以上內容爲筆者總結的一些移動端開發佈局的小知識，筆者知識技能有限，文章如有理解錯誤的地方還請讀者理解並指出，筆者會虛心學習。學習