web頁面常用佈局（pc端佈局和移動端佈局）

什麼是web佈局呢？
佈局也可以叫做排版，它指的是把文字和圖片等元素按照我們的意願有機地排列在頁面上，佈局的方式分為兩種：

1、table佈局：通過table元素將頁面空間劃分成若干個單元格，將文字或圖片等元素放入單元格中，隱藏表格的邊框，從而實現佈局。這種佈局方式也叫傳統佈局，目前主要使用在EDM(廣告郵件中的頁面)中，主流的佈局方式不用這種。

2、HTML+CSS佈局(DIV+CSS)：主要通過CSS樣式設定來佈局文字或圖片等元素，需要用到CSS盒子模型、盒子型別、CSS浮動、CSS定位、CSS背景圖定位等知識來佈局，它比傳統佈局要複雜，目前是主流的佈局方式

table佈局和HTML+CSS佈局(DIV+CSS)優缺點：

table表格佈局

優點：佈局容易、快捷、相容性好。
缺點：改動不便，需重新調整，工作量大。

DIV+CSS。

優點：佈局靈活、改動方便。
缺點：需考慮平臺的相容性，對製作人員技能要求較高。

PC及移動端頁面適配方法

裝置螢幕有多種不同的解析度，頁面適配方案有如下幾種：

1、全適配：響應式佈局+流體佈局

2、移動端適配：

• 流體佈局+少量響應式
• 基於rem的佈局

流體佈局

/流式佈局：就是百分比佈局，非固定畫素，內容向兩側填充，理解成流動的佈局，稱為流式佈局/

    /*視覺視窗：viewport,是移動端特有。這是一個虛擬的區域，承載網頁的。
      承載關係：瀏覽器---->viewport---->網頁
    */
    /*適配要求：
        1. 網頁寬度必須和瀏覽器保持一致
        2. 預設顯示的縮放比例和PC端保持（縮放比例1.0）
        3. 不允許使用者自行縮放網頁
        滿足這些要求達到了適配，國際上通用的適配方案，標準的移動端適配方案。
    */
    /*適配設定：
        如果任何設定都沒有，預設走的就是viewport的預設設定
        去設定新的viewport設定,達到適配要求。
        <meta name="viewport"> 設定視口的標籤  在head裡面並且應該緊接著編碼設定
        viewport的功能：
        1. width    可以設定寬度   (device-width 當前裝置的寬度)
        2. height   可以設定高度
        3. initial-scale  可以設定預設的縮放比例
        4. user-scalable  可以設定是否允許使用者自行縮放
        5. maximum-scale  可以設定最大縮放比例
        6. minimum-scale  可以設定最小縮放比例
        在<meta name="viewport" content="" >  content="" 使用以上引數
        1. width=device-width   寬度一致比例是1.0
        2. initial-scale=1.0    寬度一致比例是1.0
        3. user-scalable=no     不允許使用者自行縮放  （yes，no  1,0）
        標準適配方案：
        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
        meta:vp + tab  快捷方式
 

響應式佈局

響應式佈局就是使用媒體查詢的方式，通過查詢瀏覽器寬度，不同的寬度應用不同的樣式塊，每個樣式塊對應的是該寬度下的佈局方式，從而實現響應式佈局。響應式佈局的頁面可以適配多種終端螢幕（pc、平板、手機）
基於rem的佈局

首先了解em單位，em單位是參照元素自身的文字大小來設定尺寸，rem指的是參照根節點的文字大小，根節點指的是html標籤，設定html標籤的文字大小，其他的元素相關尺寸設定用rem，這樣，所有元素都有了統一的參照標準，改變html文字的大小，就會改變所有元素用rem設定的尺寸大小。