快递云100-如何实现在各种分辨率下网站的优良阅读体验？

引言

老大：“开发哥，在手机上打开咱们这网站怎么都缩小挤到一坨了？”
开发哥：“老大，咱们这网站都是照着设计师给的尺寸写死的，只有在固定尺寸的屏幕上才显示正常……” 老大：“那我要你有锤子用？没吃过猪肉，还没见过猪跑啊，我最近发现快递 100 云平台居然是响应式的，咱们不能落后；还愣着干嘛？赶紧去学学！”
说到屏幕适配，就离不开响应式布局，传统的开发方式是 PC 端开发一套，手机端开发一套，而使用响应式布局只需一套即可。
响应式设计与自适应设计的区别：响应式开发一套界面，通过检测视口分辨率，针对不同客户端 在客户端做代码处理，来展现不同的布局和内容；自适应需要开发多套界面，通过检测视口分辨 率，来判断当前访问的设备是 pc 端、平板、手机，从而请求服务层，返回不同的页面。
响应式布局实现方案

1. 媒体查询
CSS3 媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面，但如何选择屏幕大小分割点也是一个需要考虑的要点， 比如我们可以划分：480px, 800px, 1000px 1400px。
我们可以参考参考 Bootstrap 这位老大哥是如何断点的：

当然，这个方案不一定能满足项目中的实际需求，我们可以先用跨度大的分割点进行分割，如果出现不 适配的情况可以再根据实际情况增加新的分割点。
栗子：


2. 百分比布局
通过百分比也是一个兼容性较好，也相对简单的方案，但缺点是不太精确，一般只适合等比例、大分块 的场景。
而百分比也是有相对性的，如下：
子元素的height 或width 中使用百分比，是相对于子元素的直接父元素， width 相对于父元素的width ， height 相对于父元素的height ；
子元素的top 和bottom 如果设置百分比，则相对于直接非static 定位(默认定位)的父元素的高度，同样子元素的left 和right 如果设置百分比，则相对于直接非static 定位(默认定位的)父元素的宽度；
子元素的padding 如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的
width ，而与父元素的height 无关。
跟padding 一样， margin 也是如此，子元素的margin 如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width ；
border-radius 不一样，如果设置border-radius 为百分比，则是相对于自身的宽度，除了
border-radius 外，还有比如translate 、 background-size 等都是相对于自身的；
3. rem 布局
单位都是相对于根元素html 的 来决定大小的,根元素的font-size 相当于提供了一

个基准，当页面的发生变化时，只需要改变的值，那么以为固定单位的元素的大小也会发生响应的变化。 因此，如果通过 来实现响应式的布局，只需要根据视图容器的大小，动态的改变 即可（而 em 是相对于父元素的）。在响应式布局中，必须通过来动态控制根元素的大小，也就是说样式和 代码有一定的耦合性，且必须将改变
一个简单实现 rem 配置的栗子：

4. 视口单位
css3中引入了一个新的单位 vw/vh ，与视图窗口有关， vw 表示相对于视图窗口的宽度， vh 表示相

对于视图窗口高度，除了如下：

其实这类似于百分比布局，区别主要在于兼容性及相对性，兼容性不如百分比，但计算方便；且它是相 对于当前视口而言的。
5. 图片响应式
这里的图片响应式包括两个方面，一个就是大小自适应，这样能够保证图片在不同的屏幕分辨率下出现 压缩、拉伸的情况；一个就是根据不同的屏幕分辨率和设备像素比来尽可能选择高分辨率的图片，也就 是当在小屏幕上不需要高清图或大图，这样我们用小图代替，就可以减少网络带宽了。

6. 文字响应式

文字响应式一般两个方案：一个是采取 方案进行适配，但需要考虑到一个节点，如 最小只显示 的字体，所以我们要考察当缩放到一定尺寸时就将该字体大小固定，以免影响用户体验。另一个就是不做适配，即采取固定字体大小，在一些项目所需展示的平台尺寸跨度不是很大的情况下， 这种方案也是可以满足用户体验的，而且不用考虑自适应时字体过大和多小的缺点。

响应式布局成型方案

现在的 css ， UI 框架 等都已经考虑到了适配不同屏幕分辨率的问题，实际项目中我们可以直接使用这些新特性和框架来实现响应式布局。可以有以下选择方案：
利用上面的方法自己来实现，比如 等
Flex 弹性布局，兼容性较差
Grid 网格布局，兼容性较差
Columns 栅格系统，往往需要依赖某个 UI 库，如 等
举个栗子：

快递 100 云平台主要采用了中的栅格系统，结合百分比及 vw ， vh 在对应场景下进行适配。其云市场在不同的屏幕尺寸在的展示

992px +：

576px - 992px:

< 576px:

根据这三段适配，就实现了一个全尺寸覆盖，而其中的一些模块可采用对当前窗口的监控实现更精细的 适配，进而提高用户体验。
最后

以上也只是响应式布局中大概方案，还有许多细节未提到，但重要的还是要学会结合当前项目的实际情 况进行方案搭配，得出适合的方案，这下开发哥可以松口气了。