H5 頁面如何兼容 PC 端和移動端？

最近在開發項目的 H5 頁面，遇到一些小困惑。
參考了小紅書的分享落地頁，感覺做的非常好。例如小紅書這個分享頁，它是如何做到針對 PC 端和移動端產出了兩個不同的 html 頁面以及樣式的呢？而且頁面也是做了伺服器端渲染的。
是不是通過 JS 對當前頁面的 useragent 進行判斷載入不同的 css 文件。如果是這樣的話，那麼 html 結構呢？因為是伺服器端渲染，html 在服務端就渲染好了，它怎麼知道應該渲染成 PC 還是移動端呢？

希望有大佬可以解惑，不嗇賜教。

這個我沒看這個分享頁,

但是不管是伺服器渲染還是響應式, 都是可以判斷的

所有的請求它的request-headers裡面

都有user agent, 可以獲取到的

有個東西叫響應式布局吧

一般兩種做法：後端渲染不同站點 / 前端適配

前端適配

一般不那麼要緊的，偏展示的接近靜態的頁面可以走前端適配。例如小紅書這個。

前端適配兩種：

藉助JS動態渲染文檔內容適配
DOM一致，僅通過CSS媒體查詢做不同樣式

Henry Here。這個就是個純CSS的適配，可以注意觀察不同屏幕寬度下元素的展現/隱藏，和下面那堆盒子的排布。

後端渲染不同站點

一般大型網站，關鍵頁面，對PC、移動端UI設計要求很高的，頁面邏輯重，需要針對兩端優化的，都是要做兩套的。例如百度文庫：https://wenku.baidu.com

這個地址PC打開和wap打開渲染的完全是兩套東西，甚至域名都重定向了。

可以理解為兩個網站，一個針對PC做，一個針對wap做，後端通過判斷useragent覺得給你哪個站點。

去學習下bootstrap

保證PC端的大部分常用瀏覽器正常顯示，可以出兩套UI，然後用後端或者前端進行判斷用戶瀏覽器，判斷是PC瀏覽器訪問還是mobile瀏覽器訪問，分別轉發到不同的頁面上。一套UI的話，盡量修改mobile端的css，保證頁面布局不會再mobile端垮掉。在頁面載入之前，用js判斷瀏覽器，如果是mobile，就修改css標籤，目標是把需要調整的css都重寫覆蓋，保證頁面布局不變，包括字型大小，間距。

如果產品和UI沒什麼要求，確實可以PC和移動端公用一個頁面，下面評論的朋友也說了，用boostrap式的布局就行了。但是一般公司對移動端和PC端都有要求，所以會開發2套。在nginx或者後端伺服器攔截，根據類似user agent的欄位，重定向到移動端或PC端。可參考淘寶京東。

http://m.taobao.com，http://m.jd.com

邏輯層抽出，ui層寫兩套最靠譜。

關於小紅書的那個頁面