响应式网页设计

响应式网站设计有三个关键组成部分: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张图片
图片1.png
响应式网页设计_第2张图片
图片2.png
图片3.png
响应式网页设计_第3张图片
图片4.png

这是国内的一个网上超市的说 而虽然运用到了响应式网站设计 但不得不说有点不用心(可能想引流到手机app上地说)


响应式网页设计_第4张图片
图片5.png
响应式网页设计_第5张图片
图片6.png
而这是国内大学通用的一个教务系统 不得不说完全没有用响应式网站设计
丝毫不考虑我们这些使用手机的人想法和感受 只是很简单粗暴的进行制作

响应式网站设计的三项组成技术

  • 弹性网格布局

随着CSS3出现了媒体查询技术,又出现了响应式设计的概念。响应式设计的目标是确保一个页面在所有终端上(各种尺寸的PC、手机、手表、冰箱的Web浏览器等等)都能显示出令人满意的效果,对CSS编写者而言,在实现上不拘泥于具体手法,但通常是糅合了流式布局+弹性布局,再搭配媒体查询技术使用。——分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,即页面元素宽度随着窗口调整而自动适配。即:创建多个流体式布局,分别对应一个屏幕分辨率范围。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。

响应式几乎已经成为优秀页面布局的标准。
1、布局特点:每个屏幕分辨率下面会有一个布局样式,即元素位置和大小都会变。
2、设计方法:媒体查询+流式布局。通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局,实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。
优点:适应pc和移动端,如果足够耐心,效果完美
缺点:(1)媒体查询是有限的,也就是可以枚举出来的,只能适应主流的宽高。(2)要匹配足够多的屏幕大小,工作量不小,设计也需要多个版本。
总结:
响应式与自适应的原理是相似的,都是检测设备,根据不同的设备采用不同的css,而且css都是采用的百分比的,而不是固定的宽度,不同点是响应式的模板在不同的设备上看上去是不一样的,会随着设备的改变而改变展示样式,而自适应不会,所有的设备看起来都是一套的模板,不过是长度或者图片变小了,不会根据设备采用不同的展示样式,流式就是采用了一些设置,当宽度大于多少时怎么展示,小于多少时怎么展示,而且展示的方式向水流一样,一部分一部分的加载,静态的就是采用固定宽度的了。
流式布局是用于解决类似的设备不同分辨率之间的兼容(一般分辨率差异较少);响应式是用于解决不用设备之间不用分辨率之间的兼容问题(一般是指PC,平板,手机等设备之间较大的分辨率差异)。
  • 媒体查询 :

媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color (等)。使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。

  • 弹性图片/媒体

在小屏幕上可缩小尺寸,并可扩展大最大尺寸以支持大屏幕的多媒体内容和图片

关于提出RWD概念的文章相关链接https://alistapart.com/author/emarcotte

RWD和前后端的关系

前端 就是网站的样子 准确来说就是我们对它 的第一印象
后端 则是一个上帝的操作台 要通过一系列的控制命运的缰绳(这个网站面对的人群) 编写未来的剧本(写代码 决定它的走向)
RWD 则是 要运用css Java HTML这些代码去进行编写 制造出一个神(符合大多数人的理想化模式)这个网站才能是成功的 但这需要前端的展现和后端的操作才可以

你可能感兴趣的:(响应式网页设计)