### 开发自适应网页 开发自适应网页时可以根据屏幕大小进行分级，制定一个标准的屏幕尺寸大小零界点； 通过分析 [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