響應式布局能通吃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是一個繞不開的話題，也是目前業界最流行的一種手段。

　　

?

　　

轉載于:https://www.cnblogs.com/zhangnan35/p/10776624.html

總結

以上是生活随笔為你收集整理的一种业界通用的响应式布局解决方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。