1.做響應式 佈局 ，首先不著急排版，先放頭資訊，設定視口什麼的：

一般都是這玩意：

“viewport”，翻譯為中文可以叫做“視區”，

• <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />

一般都是這個，就是視口，寬高都是按裝置螢幕，然後縮放和最小縮放都是1.0比例嘛，然後不允許使用者強制縮放即可。

width：控制 viewport 的大小，可以指定的一個值，如果 600，或者特殊的值，如 device-width 為裝置的寬度（單位為縮放為 100
 
% 時的 CSS 的畫素）。
height：和 width 相對應，指定高度。
initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。值為：1.0
maximum-scale：允許使用者縮放到的最大比例。
minimum-scale：允許使用者縮放到的最小比例。
user-scalable：使用者是否可以手動縮放

2.媒體查詢

針對不同螢幕可以用不同顯示效果：

這個不多說，百度一下媒體查詢公式即可，，，，

3.針對不同螢幕的標準(為節省頻寬) 我們呢就按照bootstarp的標準來：

　　【這有個bug 媒體查詢是 帶= 的，即如果是min-width:768 那麼就是<=768的時候，即包含768咧...】

超小螢幕（手機，小於 768px） @media (max-width:767px){……}

小螢幕（平板，大於等於 768px） @media (min-width:768px){……}

中等螢幕（桌面顯示器，大於等於 992px） @media (min-width:992px){……}

大螢幕（大桌面顯示器，大於等於 1200px） @media (min-width:1200px){……}

4.寫的方法一般就是從小尺寸往大尺寸寫。

本文來自部落格園，作者：鹹瑜，轉載請註明原文連結：https://www.cnblogs.com/bi-hu/p/15696305.html