webApp 頁面佈局

時間 2019-12-05

標籤 webapp 頁面佈局欄目無線简体版

原文原文鏈接

1. 流式佈局

概念：
流式佈局是頁面元素寬度按照屏幕分辨率進行適配調整，可是總體佈局不變。css

設計方法：
佈局都是經過百分比來定義寬度，可是高度大都是用px固定的。html

弊端：webpack

雖然可讓各類屏幕適配，可是顯示的效果極其很差。（有些手機頁面的寬度會被拉伸，可是高度不變，很不協調。）
大量百分比佈局，也會出現許多兼容問題。

2. 靜態佈局

概念：
靜態佈局是無論瀏覽器尺寸是多少，網頁上全部元素的尺寸一概使用px做爲單位，。這種設計經常使用於pc端css3

設計方法：
結合min-width，若是小於這個寬度就會出現滾動條，若是大於這個寬度，則會出現留白web

弊端：npm

大屏幕手機兩側留白太多，頁面會顯得比較小，操做按鈕也比較小
這種設計只適用於PC端，移動端有嚴重的不兼容性

3. 媒體查詢`@media`

概念：
媒體查詢是css3的新屬性，爲不一樣屏幕分辨率定義一個佈局樣式，即元素的位置和大小都是會改變的。gulp

設計方法：
根據不一樣的分辨率來設計所須要的元素的位置和大小瀏覽器

//適配iphone 5
@media screen and (max-width: 320px) {
    html{font-size: 14px;}
    .name{
        font-size: 14px;
        margin-top: 28px;
    }
}
//適配寬度在321px - 413px 之間
@media screen and (min-width: 321px) and (max-width: 413px) {
    html{font-size: 16px;}
    .name{
        font-size: 16px;
        margin-top: 32px;
    }
}
//適配寬度在414px - 639px 之間
@media screen and (min-width: 414px) and (max-width: 639px) {
    html{font-size: 17px;}
    .name{
        font-size: 17px;
        margin-top: 34px;
    }
}
//適配寬度大於640px
@media screen and (min-width: 640px) {
    html{font-size: 18px;}
    .name{
        font-size: 18px;
        margin-top: 36px;
    }
}

弊端：sass

要匹配足夠多的屏幕大小，工做大，維護性難，須要足夠大的耐心
媒體查詢也是有限的，能夠枚舉出來的只能適應主流的寬高

4. 設置`viewport`進行縮放

概念：
經過<meta>來提供一些頁面的元信息，位於文檔的頭部<head>標籤內來進行縮放框架

設計方法：

<meta name="viewport" content="width=device-width,minimun-scale=1.0,maximum-scale=1.0,user-scalable=no" />

經過設置最大縮放比maximum-sacle和最小縮放比minimum-scale來兼容屏幕。

弊端：

全局縮放，可能會形成出錯。通常不單獨使用，能夠結合媒體查詢或是rem單位等來使用。

5. `rem`等比例適配屏幕

概念：
rem是css3新增的一個相對長度單位，相對於根元素（即html元素）font-size計算值的倍數。經過設置html的字體大小，來控制rem的大小。

設計方法：
1）@media媒體查詢在css中定義好根元素的font-size的大小

經過@media媒體查詢來更改html的字體大小，實現兼容不一樣的設備。

//適配iphone 5
@media screen and (max-width: 320px) {
    html{font-size: 14px;}  //1rem = 14px
}
//適配寬度在321px - 413px 之間
@media screen and (min-width: 321px) and (max-width: 413px) {
    html{font-size: 16px;}   //1rem = 16px
}
//適配寬度在414px - 639px 之間
@media screen and (min-width: 414px) and (max-width: 639px) {
    html{font-size: 17px;}   //1rem = 17px
}
//適配寬度大於640px
@media screen and (min-width: 640px) {
    html{font-size: 18px;}   //1rem = 18px
}

設計好根元素以後，頁面中全部的元素的位置和大小單位都採用rem來寫。

2）js動態計算font-size大小

用@media來設置根元素的font-size不能使全部的設備全適配，用js來計算font-size能夠實現全適配。在<script>標籤中加上以下代碼，這個標籤最好放在<head>頭部裏。

(function(){
        document.addEventListener('DOMContentLoaded',function(){
            var html = document.documentElement;
            var deviceWidth = html.clientWidth;
            html.style.fontSize = deviceWidth/750*100 + "px";
        },false);    
    })();

其中750 數字是設計稿的尺寸，這裏採用的是iPhone 6 的設計稿尺寸750px，由於計算出來的font-size字體過小，且有些瀏覽器不兼容過小的字號，因此font-size要放大100倍。

頁面元素設置寬高

css中的尺寸 = 設計稿尺寸  /  100

上述的js代碼也能夠進行簡化：

document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 *100 + "px";

效果和原理都是同樣的。一樣放在一個<script>標籤裏，標籤放在<head>裏面。

6. 引用`flexible.js`

概念：
flexible.js是阿里團隊開源的一個庫，能夠輕鬆兼容各類不一樣的移動端設備自適應的問題

設計方法：
1）結合viewport使用
在頁面的<head>中引入viewport

<meta name="viewport" content="width=device-width,minimun-scale=1.0,maximum-scale=1.0,user-scalable=no" />

2）引入flexible_css.js,flexible.js
在頁面的<head>中引入文件

// 加載阿里CDN的文件
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

也能夠把這兩個文件下載到本身的項目中，而後引入，效果是同樣的。

3）頁面單位採用rem格式
能夠經過一些插件快速的將px->rem，好比sublime text 3 的 CSSREM 插件能夠完成自動轉換。

除了使用編輯器的插件外，還可使用css 預處理器，好比scss，裏面的函數、混合宏這些功能來實現。

還有一款npm工具是px2rem，或是使用PostCSS。這二者適合在大項目中，由於能夠配合gulp 或是 webpack，不適合單頁面。

4）頁面效果
配置好flexible.js後，能夠在頁面上看到它給<html>元素添加了data-dpr屬性和font-size屬性，而且二者會根據不一樣的手機分辨率來動態的改變它們的值。

弊端：

不適配平板
不兼容其餘的UI框架組件，好比：vux, weui, mini ui等。由於市面上的一些UI 組件都是自身已經作過適配的，再結合flexible的話，會致使總體組件被縮小，反而處理起來更加麻煩

7. `vw, vh, vmax, vmin`屬性

概念：
vw，vh是css3新增的單位屬性，他們的計算方式是相對於視口的寬度和高度。視口被均分爲100單位
vmax相對於視口的寬度或高度中較大的那個。其中最大的那個被均分爲100單位
vmin相對於視口的寬度或高度中較小的那個。其中最小的那個被均分爲100單位的

設計方式：
元素的位置和大小採用vw , vh , vmax , vmin 爲單位

弊端：
兼容性問題，有些手機不兼容這個單位

綜上所述：
單一的 H5頁面能夠經過動態計算 js來改變 font-size大小。
大型的項目好比 webpack項目能夠採用 rem + flexible + sass

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

webApp 頁面佈局

1. 流式佈局

2. 靜態佈局

3. 媒體查詢@media

4. 設置viewport進行縮放

5. rem等比例適配屏幕

6. 引用flexible.js

7. vw, vh, vmax, vmin屬性

3. 媒體查詢`@media`

4. 設置`viewport`進行縮放

5. `rem`等比例適配屏幕

6. 引用`flexible.js`

7. `vw, vh, vmax, vmin`屬性