响应式网页设计
2018-03-13 本文已影响0人
良子明
响应式网站设计有三个关键组成部分:1. media query; 2. 流动网格;3. 灵活缩放的图片。
基于RWD而设计的网站利用CSS3 media queries规则来自动适应不同访问设备的屏幕尺寸和显示要求。而流动网格采用页面元素大小的相对单位(百分比或EM)，而非传统设计使用的绝对单位(像素或点数)，以确定页面各组成元素的大小。最后，图片大小也是采用相对单位而灵活缩放，不至于在小屏幕的移动设备上超出显示区域
根据维基百科及其参考文献，理论上，响应式界面能够适应不同的设备。描述响应式界面最著名的一句话就是“Content is like water”，翻译成中文便是“如果将屏幕看作容器，那么内容就像水一样”。
前端对于网站来说，通常是指，网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。
所谓“弹性布局(elastic layout)”。其要点就在于使用单位em来定义元素宽度。下面的引言介绍了何谓em，而它又是如何发挥作用的：
“电脑屏幕上的‘像素’是一个不可缩放的点，而em则是相对于字体大小的单位宽度。它随着字体大小的变化而变化，反应用户对字体大小的设定。” - Patrick Griffiths, A List Apart
为什么要使用RWD
响应式网站设计具有以下三个好处
1 完美适应各种屏幕
如图可见 去年的各种屏幕百家争鸣 而智能手机上最重要的可能就是浏览器 或者说是网站 但如果这个网站与你的手机屏幕或者是分辨率不匹配 则会造成阅读的难受 这时候便凸显了响应式网站设计的好处 而开发人员也不需要费时费力的去研发每一个的网页版本 一次性的网页设计就可以搞定
2 维护成本下降
因为响应式网站设计是一个万能网页（目前看来是这样的） 不需要太多的时间 金钱 和精力 让研发人员可以更好去升级 更新网站
3 没有重定向
不需要重定向用户 这无疑是一个很棒的信息 不需要更多的时间去定位用户
使用响应式网站设计和没使用的差距
图片1.png
图片2.png
图片3.png
图片4.png
这是国内的一个网上超市的说 而虽然运用到了响应式网站设计 但不得不说有点不用心（可能想引流到手机app上地说）
图片5.png
图片6.png
而这是国内大学通用的一个教务系统 不得不说完全没有用响应式网站设计
丝毫不考虑我们这些使用手机的人想法和感受 只是很简单粗暴的进行制作
响应式网站设计的三项组成技术
- 弹性网格布局
随着CSS3出现了媒体查询技术，又出现了响应式设计的概念。响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出令人满意的效果，对CSS编写者而言，在实现上不拘泥于具体手法，但通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用。——分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。即：创建多个流体式布局，分别对应一个屏幕分辨率范围。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。
响应式几乎已经成为优秀页面布局的标准。
1、布局特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。
2、设计方法：媒体查询+流式布局。通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。
优点：适应pc和移动端，如果足够耐心，效果完美
缺点：（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。（2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。
总结：
响应式与自适应的原理是相似的，都是检测设备，根据不同的设备采用不同的css，而且css都是采用的百分比的，而不是固定的宽度，不同点是响应式的模板在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式，而自适应不会，所有的设备看起来都是一套的模板，不过是长度或者图片变小了，不会根据设备采用不同的展示样式，流式就是采用了一些设置，当宽度大于多少时怎么展示，小于多少时怎么展示，而且展示的方式向水流一样，一部分一部分的加载，静态的就是采用固定宽度的了。
流式布局是用于解决类似的设备不同分辨率之间的兼容(一般分辨率差异较少)；响应式是用于解决不用设备之间不用分辨率之间的兼容问题(一般是指PC，平板，手机等设备之间较大的分辨率差异)。
- 媒体查询 :
媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
- 弹性图片/媒体
在小屏幕上可缩小尺寸，并可扩展大最大尺寸以支持大屏幕的多媒体内容和图片
