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

引言

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

1. 媒体查询：CSS3 媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面，但如何选择屏幕大小分割点也是一个需要考虑的要点， 比如我们可以划分：480px, 800px, 1000px 1400px。 我们可以参考参考 Bootstrap 这位老大哥是如何断点的：      当然，这个方案不一定能满足项目中的实际需求，我们可以先用跨度大的分割点进行分割，如果出现不 适配的情况可以再根据实际情况增加新的分割点。

2.百分比布局：

通过百分比也是一个兼容性较好，也相对简单的方案，但缺点是不太精确，一般只适合等比例、大分块 的场景。

而百分比也是有相对性的，如下：

3.rem 布局：

一个简单实现 rem 配置的栗子：

4.视口单位

其实这类似于百分比布局，区别主要在于兼容性及相对性，兼容性不如百分比，但计算方便；且它是相 对于当前视口而言的。

5.图片响应式

这里的图片响应式包括两个方面，一个就是大小自适应，这样能够保证图片在不同的屏幕分辨率下出现  压缩、拉伸的情况；一个就是根据不同的屏幕分辨率和设备像素比来尽可能选择高分辨率的图片，也就 是当在小屏幕上不需要高清图或大图，这样我们用小图代替，就可以减少网络带宽了。

大小自适应：

切换图片：

6.文字响应式

响应式布局成型方案

576px - 992px:

< 576px:

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

最后

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

来源：oschina

链接：https://my.oschina.net/u/4584020/blog/4358762