## 自适应、响应式、弹性布局、屏幕适配 [浅谈响应式Web设计与实现思路 – 熊建刚的博客](http://blog.codingplayboy.com/2018/01/06/responsive-web-design/) [浅谈响应式Web设计与实现思路](https://www.toutiao.com/a6508149161299280398/?tt_from=weixin&utm_campaign=client_share&timestamp=1515350460&app=news_article&utm_source=weixin&iid=22069500288&utm_medium=toutiao_android&wxshare_count=1) ~~~ 自适应vs响应式 自适应和响应式设计的不同主要概括如下： 自适应是多套用户界面，而后者则只有一套用户界面； 自适应需要服务端检测请求设备分辨率相关信息，然后选择对应版本返回； 自适应可以在不同版本使用不同适配方案，如在PC端使用百分比，在移动端使用rem等，而响应式则需要一个完美兼容的适配方案； ~~~ ~~~ 什么样的网页适合做成响应式的？ 1. 页面结构不复杂的 2. 轻交互的 3. 展示型的 具体适合的类型 官网类（奈斯设计） 新闻类（懒熊体育） 轻博客类 产品展示类（app下载页面） 阅读类（看云） （当然也不是说只要是这些类型的网页就都适合做响应式，这只是一般情况下，具体还是要看网页是否满足做响应式的几个基本条件） 不适合做响应式的类型，只能做自适应的 电商（比如商品详情页交互多） 重门户类（比如网易，虽然是新闻类，但是这种门户首页页面结构复杂，模块很多，做响应式成本太大，效率很低，得不偿失） 重官网类（比如阿里云，它的页面也很复杂，元素很多，做响应式也不现实，但里面的几个页面做成响应式还是可行的） 不能做的不是技术做不到而不能做，css无所不能，理论上都可以做成响应式的，但是这种无视成本的做法是愚蠢的，就像是捡个芝麻丢了西瓜。 总结：做响应式的网页必须要满足：结构简单，交互简单，两个字来说就是“要轻”。 ~~~ > 常规的响应式页面是基于同一套html，利用css媒体查询 写多套css样式来实现的，通常这个方法很奏效，但如果页面比较复杂，有些组件在不同端的交互和页面结构有很大的区别时，依靠css媒体查询魔法就很麻烦了，所以可以看到现在很多网站，在一个页面上输出了 多套html（腾讯文档页面就大量使用了多套html），同样的还是利用css媒体查询控制不同屏幕显示不同的html，比如 `pc-nav`、`mobile-nav`，这样比较灵活，但也有弊端，那就是如果都这么做，那就相当于每次用户访问都同时加载了多套html页面，用户甚至永远不可能用到，虽然用户看不到这些多余的，也不关心背后的html，可是这必然增加了加载的开销导致页面打开速度下降，所以这种方法只能用于「在多端上交互和视觉差异较大」的组件上去，不能使用过度，不然为什么不使用自适应方案呢。 > > 电脑背面的电路板也应该整齐完美，虽然用户看不到，但我们知道。 —— 史蒂夫·乔布斯 [B站不是中国YouTube](https://mp.weixin.qq.com/s/PyKInjunP2CIRZFguap9Yw) > YouTube的产品理念则是移动优先，桌面端是移动版的从属，PC端同移动统一。即以前手机版是“缩小的桌面网页”，现在桌面版是“放大了的手机App。“不应该为不同的屏幕规格创建不同的产品，而是使用一种统一的设计方法开发一款可以跨多种屏幕的产品。” > PC 和 移动端 同样重要，应该利用各自的特点，充分发挥其优势，全方面提供最好的用户体验，而不是 简单的 “统一”，谁是谁的附属品。 > 特别注意的是margin,padding属性值为百分比时，是基于当前元素width值的。%单位也是一个缩放单位，所以也常用于样式适配。**利用 padding 这个特性，我们就可以实现 [div宽高等比适应](https://blog.csdn.net/qq_38350907/article/details/78677611)了，就像img标签一样的效果** >[tip] 错！！！只有padding才是基于当前元素的，margin和width一样，都是基于父元素的。 >[danger] **自适应和响应式不是一个东西。** > 自适应、响应式、适配都是为了展示最好的前端效果，即在每一种设备上，都极力呈现出最好的效果。**这个最好的效果，指的是，在各终端表现出最好的视觉效果，以及最合适、最方便的操作习惯。** **自适应、响应式、弹性布局、屏幕适配，这是四个独立不同的概念。** 自适应：多端请求时返回不同的页面，服务端需要准备多套程序或者多套模板。 响应式：主要是利用css媒体查询使得在不同屏幕大小下，页面有不同表现，主要是元素布局等变化。 弹性布局：主要是利用百分比设置元素宽度，浮动还有flex设置元素布局等等。 屏幕适配：主要是应用于对完美还原设计稿尺寸有要求的页面，主要是利用 flexible.js、rem、vm等技术。（类似于750px的设计稿是一张图片，这张图片无论怎么缩放，都能显示很好的效果，**现在我们的网页也需要图片这种等比缩放的效果**，这么说你应该能体会到了。当然了，这里还需要顺便解决高清屏显示的问题。） ***** ### 技术方案怎么选 #### 1. 简单 & 对速度不敏感和对代码精简没要求 & 预算紧张 响应式，一套代码解决多端 展示阅读类 交互逻辑简单且少，**且移动端与pc端内容差异不大**，如新闻站，企业官网 #### 2. 复杂 & 对精简代码和速度有要求 预算充足 做两套 根据请求头自适应返回 web端 手机端 （后端可共用，也可不共用，如不同模块或者部署不同应用） 功能类，交互逻辑复杂且多，如电商，社交类 #### 3. 复杂 & 有多终端适配要求 & 对细节有一定要求 追求用户体验 & 预算豪华 做两套 移动端用适配做以满足不同移动终端 #### 4. 复杂 & 细节要求和技术追求极高 & 追求极致完美的用户体验 & 不差钱 （艺术家、哲学家） 多端 多套 响应式 适配 多技术相结合 * * * * * [关于响应式布局，你必须要知道的](https://mp.weixin.qq.com/s/y0a5t3Kd-GWACRlEg1cprQ) ***** last update：2019-1-25 17:10:25