pc端布局方案

https://www.cnblogs.com/zxmonster/p/12548821.ht

1.靜態布局：

　　　　　 布局特點：寬高固定

 

2.自適應布局：

　　　　　  布局特點：不同分辨率下，頁面元素位置變化，大小不變

　　　　實現方法:針對不同分辨率創建對應的樣式表，使用 @media 媒體查詢給不同尺寸的設備切換不同的樣式

　　　　缺點：IE8及以下不支持媒體查詢；只能兼容主流分辨率

 

3.流式布局（百分比布局）:

　　　　布局特點：不同的分辨率下顯示相同的排版；高度固定，寬度自適應

　　　　實現方法:網頁中主要區域的尺寸使用百分比；

　　　　缺點：大屏幕上元素被拉長，但是文字，高度還是固定大小，不協調

　　　　經典流式布局：左側固定，右側自適應；兩側固定，中間自適應

 

4.彈性布局（rem/em布局）：

　　　　布局特點：頁面元素寬度，高度，字體大小會跟着屏幕大小縮放

　　　　實現方法:使用js監聽當前屏幕大小，設置html的字體大小

　　　　缺點：IE678不兼容；需要計算；

 

5.響應式布局：

　　　　布局特點：每個屏幕分辨率下面會有一個布局樣式，即元素位置和大小都會變，響應式設計的目標是確保一個頁面在所有終端上（各種尺寸的PC、手機、手表等等）都能顯示出令人滿意的效果

　　　　實現方法：媒體查詢+流式布局

　　　　優點：適應pc和移動端

　　　　缺點：要匹配足夠多的屏幕大小，工作量大，設計也需要多個版本

 

6. 響應式布局和流式布局的區別：

　　　響應式是用於解決不用設備之間不同分辨率之間的兼容問題(一般是指PC，平板，手機等設備之間較大的分辨率差異)

 

　　　流式布局是用於解決類似的設備不同分辨率之間的兼容(一般分辨率差異較少)，但由於未針對不同屏幕做區分，效果在部分屏幕上可能不好。

7.響應式和彈性布的區別：

　　響應式布局：改變瀏覽器寬度，布局會隨之變化，不是一成不變的（例如導航欄在大屏幕下是橫排，在小屏幕下是豎排，在超小屏幕下隱藏為菜單）也就是說如果有足夠的耐心，在每一種屏幕下都應該有合理的布局，完美的效果

 

　　rem布局：改變瀏覽器寬度，頁面所有元素的高寬都等比例縮放，也就是大屏幕下導航是橫的，小屏幕下還是橫的只不過變小了。

 

8. 常用布局單位

　　vw,vh：

　　　　相對於視口；PC端指的是瀏覽器的可視區域；

　　　　1vw等於視口寬度的1%,1vh等於視口寬度的1%（1920*1080的屏幕，1vw = 19.2px,1vh = 10.8px）

　　　　IE8以及IE8以下不兼容

　　rem:

　　　　相對於根元素html字體大小；谷歌瀏覽器默認字體大小是16px;

　　　　IE678不兼容

　　em:

　　　　相對於父元素的字體大小；默認1em=16px;

　　　　參照物不穩定