让企业赢在全网营销时代
当前位置: 主页 > 建站知识 > 网页设计 >
联系我们
电话咨询:15066004201
E-mail:727661179@qq.com
地址: 山东省东营市西城区

响应式网页原理

作者:admin 点击量:次 2016-04-10

随着行动上网的普及,越来越多的人使用手机上网。
行动装置的使用率以及黏着度正在超越桌上设备,成为我们日常生活中最常接触的3C用品。于是网页设计产业面对了一个难题,如何才能在不同大小的行动设备上,完美的呈现网页的内容呢?
手机的屏幕比较小,目前最大的Note分辨率是在640px,而ipad则是在980左右,电脑宽屏幕尺寸是1920。同样的内容要在大小迥异的屏幕上都呈现出好的效果,并不是一件容易达成的任务。
有一派的解决方式是为不同的装置提供不同的网页,如专门做一个独立的手机版网页设计。这样做的确是可以达到良好的浏览效果,但维护上就必须操作复数本版。于是自适应网页(Resposive Web Design)就诞生了。
响应式网页设计(Responsive web design),又称自适应网页设计、google称响应式网页设计,是一个牺牲加载速度的手机网页解决方案,

只做一个版本的设计就能通吃所有大小的屏幕,让网页调节不同大小的分辨率自动调整排版。

CSS3 Media Query
响应式网页设计的主要核心技术是css3 media query,说穿了就是让不同分辨率去套用不同的css设定(看起来很简单,但会真的实作起来要注意的杂事很多)。
我们可以先看看几个例子:
Mediaqueri.es这个网站搜藏了许多案例,而且都有附上对照图片可以参考(爱贝斯的官网也是属于自适应网页设计)。
从左到右分别是不同的屏幕分辨率所呈现的版面设计。在传统PC中,会将许多元素并排;在手机中,会变成只有一行。

响应式

响应式

Media Query引用方式
Media Query的使用方式有两种:
1.在.CSS档案中,用@media来判断使用者屏幕宽度,选择加载哪一段CSS。
ex: @media screen and(max-device-width: 400px){}
在屏幕小于400px时,套用此css
2.在HTML的加载的地方,用media属性判断使用者装置宽度,选择加载哪一个CSS档案。
ex: link rel=“stylesheet”type=“text/css”media=“screen and(max-device-width: 400px)”href=“tinyScreen.css”
在屏幕小于400px时,套用tinyScreen.css
Viewport设定
meta name=“viewport”content=“width=device-width;initial-scale=1.0”
如果网页的标头没有做这组设定的话,手机会以高分辨率来呈现画面,这就让字变得很小,使用者还要去做放大而不能直接阅读。我们需要的是让行动装置的屏幕来符合一般的像素公式,单位一样才比较好做设计。
基本上只要把握上面两组设定的方式就可以开始制作自适应网页了,不过如同一开始讲的…很多事情都是做了之后才会发现问题的所在(笑)。