一種業界通用的響應式佈局解決方法

響應式佈局能通吃pc端和移動端？

　　不能。從排版上來講：pc端和移動端通常佈局和顯示方式差別十分巨大。

　　

　　

　　（同一個頁面在pc端和移動端的呈現方式和風格迥異）

 

　　另外從事件響應上來講：pc端主要是mouse事件，而移動端則是touch、tap、swipe等事件。二者的事件響應機制徹底不一樣。單單是這兩點，就足以讓pc端和移動端獨立爲兩個項目，甚至頁面要掛在不一樣的域名上。好比騰訊視頻、嗶哩嗶哩、去哪兒網的pc端域名分別是：v.qq.com、www.bilibili.com、www.qunar.com。他們對應的移動站分別爲3g.v.qq.com、m.bilibili.com、touch.qunar.com。

　　

 

　　

 

　　因此一般處理方法是這樣的：把pc端做爲主項目，在進入pc端項目主頁時，檢測瀏覽器的navigator.userAgent，若是判斷結果是移動端，則跳轉到對應移動端項目的主頁。不然，跳轉到pc端項目主頁。

 

window.location.href = /Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent) ? "https://m.bilibili.com/" :  "https://www.bilibili.com/";

 

（一行代碼搞定，b站網址僅做爲示例）

 

 

核心思路：

　　在談論響應式佈局時，咱們首先須要明白這樣一件事：響應式佈局的目的不是讓一個網頁的佈局比例在任何設備都顯示得徹底同樣，而是讓網頁在各個設備中都能正常且比較舒服地顯示，不影響用戶的閱讀體驗。換言之，首要的任務是不影響用戶的正常閱讀和正常操做，而一些比較次要的諸如內容兩邊的留白，大面積的背景圖，導航鍵之間的間距比例，是能夠作適當調整的。

　　爲何不作徹底意義上的等比縮放呢？這是由於若是通常PC端設計稿（1920*1080）爲基礎，去作等比縮放，在小屏幕中全部的文字，圖標等都會變得很是的小，難以閱讀和操做。

　　因此，在響應式佈局的1366*768和1920*1080兩個頁面中，他們的某個按鈕的大小，某段文字的字體大小，多是徹底同樣的。這並不出奇。

 

依賴手段：

　　目前業內主要有兩種技術，一種是依靠js去動態地給元素賦予類名，這顯然不科學。另外一種也是大多數響應式頁面會採用的一種技術，則是媒體查詢（media query）。媒體查詢的優點除了能將樣式的工做徹底交給CSS來作之外，它還有一個十分優秀的特性：替換性。和覆蓋性不一樣，當你須要在不一樣設備更改樣式代碼時，只更改須要更改的那一小部分就能夠了，其餘的CSS樣式將繼承下來。

 

基本手法：

　　以1920*1080的設計稿起步，對內容區設置一個定寬的容器，通常是1000px~1400px;令其水平居中（margin:0 auto）。當設備的寬度接近最初定寬時，則將容器的width稍微減少一些。同時容器裏面的部分子元素的寬高也作適當的縮小（或者數量作適當的縮減），一直到設備能在1024*768，也就是業界廣泛認爲的最小電腦端設備正常顯示時，就再也不繼續縮小。此時這個最終容器定寬（約爲1000px左右）就是容器的最小寬度（min-width）。

 

大型網站示例：

　　1.嗶哩嗶哩

　  實現思路：內容容器（bili-wrapper）初始寬度爲1160px,水平居中。在頁面寬度爲1400px時，內容容器寬度縮爲980px;

　　

　　

　　2.騰訊視頻

　  直接把body做爲內容容器，藉助媒體查詢在不一樣的屏幕寬度下作相應調整，最小的body寬度爲1030px;

　　

　　

　　

　　　3.去哪兒網

　　 去哪兒網的q_page，藉助媒體查詢，最小容器寬度爲980px，水平居中。

　　

　　

　　相似的大型網站數不勝數，@media是一個繞不開的話題，也是目前業界最流行的一種手段。