响应式网页设计

响应式web设计（Responsive Web Design）

既是指一种针对不同的分辨率设备而对网站进行统一解决各种设备兼容问题的方案，以此给予用户更好的体验。

为何使用响应式web设计

各种分辨率的市场份额

从上图我们大概可以知道，分辨率众多，而其中占巨头的是以桌面和移动端为主的1366×768以及360×640分辨率。但是移动端的份额早已领先于桌面，未来可能还要增加。那么如何适应这两者，节省精力和资源设计前端，又或者说给予用户更好体验，响应式设计便呼之欲出了。

简书

通过chrome的检查功能，我们可以看出简书自身并未针对不同分辨率进行响应式设计内容不能在iPhone7的屏幕上很好的显现出来，那么简书的解决方案就是开发app来应对移动端。这样的解决方案其实必无问题。

statcounter
而 statcounter 却对自己进行了响应式设计，为什么会出现这样的情况？

这里我们要谈谈响应式设计与app在移动端上的使用区别。

首先运营者要考虑两者使用的投入精力和收益是否成正比。

这是简书回应简书id：深山窃听有妖精。的回复

而StatCounter是美国一家网站通讯流量监测机构，提供各种类型的统计报告以及网站流量统计服务。

两者的区别是一个是社会组织，一个是公司运营。从开发难度上来说响应式设计相较与app来说简单些。而app开发虽然难度大，可从目前给予用户体验来说，app可能做到的比响应式更多。

其次便是两者性质来说，简书的社区性质，势必让其要注意用户的使用体验，而StatCounter因为是反映数据的工具性网站，所以不用太对这种体验细节关注过多。

细解RWD

那么，如何进行响应式网页设计呢？

这里我们需要用到HTML，CSS和JavaScript这三种语言。

HTML 是用来描述网页的一种语言。

CSS 指层叠样式表 (Cascading Style Sheets)

JavaScript 则是一种脚本语言。

但会这些语言就够了吗？相较于后端（逻辑代码编写工作）来说前端（呈现给用户的视觉和操作体验）本来入门就容易些，如何让用户有更好体验，这方面是前端的难点，而这是后端不用太注重的。

所以同时具备ps等工具的操作能力，以及培养审美和创造性，也是必要的。

流动网格，灵活图像和媒体查询是响应式网页设计的三大技术要素，但它也需要不同的思考方式。引言自Ethan Marcotte

但是响应式设计是必要的吗？

我们知道现在很多浏览器有自适应的功能，而响应式和自适应的区别又在哪里？

只能这样说，响应式能解决自适应不能解决的地方，虽然两者从意图上来看，没什么区别。可是从效果来说区别很大。自适应因为是机械性质的，所以在显示上和交互上并不能达到最好的效果，而响应式却用其流体式的布局很好解决。

为什么不用width:100%?
要实现图片的自动缩放， 也可以使用更通用的width 属性， 比如
width:100%。然而，这条规则在这里的效果不同。如果给width属性设置一个
值，那么图片就会按照该值显示，不考虑自身固有宽度。以我们例子中的LOGO
（同样也是一张图片）为例，这条规则会导致它显示得跟它的容器一样宽。在容
器比图片宽得多的情况下（就像我们这里的LOGO一样），图片会被无谓地拉伸。引言自响应式Web设计:HTML5和CSS3实战(第2版)Ben Frain著

参考来源

简书https://www.jianshu.com/u/33a47640803d
statcounter统计来源http://gs.statcounter.com/
提出者Ethan Marcotte https://alistapart.com/article/responsive-web-design
响应式Web设计:HTML5和CSS3实战(第2版)http://www.ituring.com.cn/book/1817