### 開發自適應網頁 開發自適應網頁時可以根據屏幕大小進行分級，制定一個標準的屏幕尺寸大小零界點； 通過分析 [nicedesign奈思設計](http://www.niceui.cn/) 官網可以看到他們正是這樣做的，沒有使用bootstrap。 下面來制定一個標準的分級： width >= 1920px 電腦（大 - 19英寸顯示器） width >= 1020px 電腦（中 - 普通筆記本） width >= 768px 電腦（小 - 便攜筆記本） width >= 470px 平板 width < 470px 手機 （其實平板和手機沒什么區別，可以一樣對待） * * * * * ### 屏幕分隔區間： >[danger] **0px <** **區間1：**`手機` >[danger] **< 470px <=** **區間2：**`平板` >[danger] **< 768px <=** **區間3：**`電腦（小 - 便攜筆記本）` >[danger] **< 1020px <=** **區間4：**`電腦（中 - 普通筆記本）` >[danger] **< 1920px <=** **區間5：**`電腦（大 - 19英寸顯示器）` >[danger] **< 2220px <=** **區間6：**`電腦（特大 - 24英寸顯示器）` 無窮大…… * * * * * >[danger] 在響應式網頁中，**PC樣式和媒體查詢樣式有交融（重合/融合）的部分**，通常只需要在媒體查詢中重寫元素布局類樣式，而元素其它樣式如，背景顏色、文字顏色等樣式則是重用的部分。**重寫與重用，利用得好的話將一定情況下改善響應式網頁代碼冗余的情況。** >[tip] PC端也可以使用min媒體查詢，做到和移動端響應式樣式不重合（融合） ```css @media screen and (min-width:760px) { .business-detail-wrap .l { float: left; } .business-detail-wrap .r { float: right; } } ``` * * * * * update：2018-6-10 13:21:47