当前位置:主页 > 博文 > 建站分享 > 文章浏览

响应式网页设计最全面、最专业的教程

时间:2015-12-18 07:51来源:代码君点击数:

应读者要求,袁程旭决定再写一篇关于响应式布局(自适应网页设计)的文章。其实这一概念非常容易理解,打个比喻吧,如果你的网页只有简单的一段文字,那么不管你怎么缩放浏览器,文字都会自适应屏幕尺寸自动分段布局,这就是最简单的响应式布局设计,尽管这看起来好像什么都没有。

我不知道有多少人了解响应式布局的概念,但肯定有很多人听说过这个词汇。随着移动互联网的盛行,移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对这样一个难题:如何才能在不同大小的设备上呈现同样的网页?然后,就有了响应式网页设计的概念。

今天,袁程旭将向各位读者全方面讲解响应式布局的概念,帮助更多的朋友们更好地了解响应式网页布局的意义和其实现方法。文章可能比较长,某些概念您如果清楚的话可跳跃性阅读。

一、什么是响应式布局?

之前袁程旭在多篇相关文章中有提及响应式布局的概念,简单来说,就是要让同一张网页自动适应不同大小的屏幕,从而实现“一次设计,普遍适用”。在响应式布局设计没有面世的时候,为了解决移动端浏览问题而采取的普遍做法无非是设计两套程序,一套供Wap端访问,一套供PC端访问。

传统的这种做法有何不妥呢?

1、两套程序需时时保持数据同步,况且维护起来困难,无疑增加了很多工作量;

2、移动终端设备的尺寸不一,用户量越来越多,一套Wap程序无法很好地适应所有设备;

响应式布局是 Ethan Marcotte 在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端 — 而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

二、响应式布局的优点和缺点?

【优点】

1、能够适应不同分辨率的访问设备,灵活性较强;

2、能够更好地解决多设备显示适应问题,提升用户体验;

3、不用维护两套程序,节约资源的同时,提升了工作效率;

【缺点】

1、兼容性代码设计工作量较大,造成效率低下等问题;

2、代码累赘,会出现隐藏无用的元素等问题,加载时间变长;

3、改变网站原有布局结构,难免会出现布局混乱、用户混淆等特殊情况;

三、响应式网页布局如何设计?

先讲一个大概的思维过程吧,帮助你们更好地了解响应式网页布局的设计流程。响应式网页布局设计是要根据不同屏幕尺寸的浏览设备,呈现出不同的网页布局,那么首先我们得知道屏幕尺寸。

第一步,查询用户使用的浏览设备屏幕尺寸。这个可以用CSS中的媒介查询(Media Query)来得到结果,袁程旭待会儿会详细跟大家来讲解这一点,朋友们先别着急;

第二步,重写部分样式,以求模块布局更美观。大家都知道CSS中的样式重写,后面的样式会默认覆盖前面的样式,优先性更高。我们正是用样式重写的方法,来给这个尺寸设备下的网页重新布局。

然后就成功了,这样就实现了网页自适应布局。先查询屏幕尺寸,再重写部分样式重新布局。设计响应式布局网页的思路大概就是如此,下面袁程旭会详细指导大家来实现响应式网页布局设计。

1、CSS中的媒介查询(Media Query)怎么用?

Media Query是制作响应式布局的一个利器,使用这个工具,我们可以非常方便快捷的设计出各种丰富且实用性强的界面。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。

媒体查询的大部分媒体特性都接受用 min 和 max 来表达”大于或等于”和”小与或等于”。

如:width 会有 min-width 和 max-width 的属性,可以捕获用户的屏幕尺寸范围。

媒体查询可以被用在CSS中的@media和@import规则上,也可以被用在HTML和XML中。通过这个标签属性,可以很方便的在不同设备下实现丰富的界面,特别是移动设备,将会运用更加广泛。

那么,media query 能够获取哪些值?

1)设备的宽和高device-width、device-heigth,显示屏幕 / 触觉设备;

2)渲染窗口的宽和高width、heigth,显示屏幕 / 触觉设备;

3)设备的手持方向,横向还是竖向 orientation(portrait | lanscape),和打印机等;

4)画面比例 aspect-ratio ,点阵打印机等;

5)设备比例 device-aspect-ratio ,点阵打印机等;

6)对象颜色或颜色列表 color、color-index ,显示屏幕;

7)设备的分辨率 resolution ;

media query 的语法结构及用法:

@media 设备名 only (选取条件) not (选取条件) and(设备选取条件),设备二{sRules}

示例一:在link中使用@media:

<link rel="stylesheet" type="text/css" media="only screen and (max-width:480px),only screen and (max-device-width:480px)" href="link.css"/>

在上面的使用中 only 可省略,限定于计算机显示器。第一个条件 max-width 是指渲染界面最大宽度,第二个条件 max-device-width 是指设备最大宽度。

示例二:在样式表中内嵌@media:

@media(min-device-width:1024px) and (max-width:989px),screen and (max-device-width:480px),(max-device-width:480px) and (orientation:landscape),(min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) {srules}

在示例二中,设置了电脑显示器的分辨率(宽度)大于或等于1024px(并且最大可见宽度为989px);屏宽在480px及其以下手持设备;屏宽在480px以及横向(即480尺寸平行于地面)放置的手持设备;屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。

从上面两个例子可以看出,字符间以空格相连,选取条件包含在小括号内,srules为兼容设置的样式表,包含在中括号里面。only(限定某种设备,可省略),and(逻辑与),not(排除某种设备)为逻辑关键字,多种设备用逗号分隔,这一点继承了css基本语法。

可用设备名参数:

响应式,自适应,网页设计

逻辑关键字:

响应式,自适应,网页设计

可用设备名参数:

响应式,自适应,网页设计

2、响应式布局设计实例分析;

先来看一下代码君网站的响应式布局设计实现代码(拖动图片可查看大图):

响应式,自适应,网页设计

有了这段代码,当屏幕尺寸小于1100px,小于900px,小于860px,小于760px,小于700px,小于600px的不同时候,本站呈现出的布局样式都会相应地有所调整,这便是响应式布局。

当然,由于代码君网站是一个简单的个人博客,形式单一、模块较少,所以相应的自适应布局代码没有非常多,对不同条件的判断和考虑也不是非常周到。但正因为简单,冗余代码也减少许多。

读到这里,相信读者们应该已经清楚,响应式布局到底是个什么东东了。但是,响应式布局设计实现代码编写还是有很多规范和值得注意的要点,你必须学会这些东西,才能自主编写出适合您网站的响应式网页布局实现代码。推荐大家阅读《自适应网页设计(Responsive Web Design)》这篇本站之前发表的文章,读完这篇文章以后,你才能说自己是真正意义上学会了响应式布局设计。

最后推荐几篇相关阅读:

《响应式网页设计心得分享》

《关于移动适配,你必须要知道这些问题》

《自适应站点如何做到对百度友好?》

《自适应网页设计(Responsive Web Design)》

《超越响应:满足用户需求的网站设计》

草根站长月入过万的秘籍

来源:代码君(daimajun.com) |  欢迎分享本文,转载请注明出处!

作者:袁程旭 | 发布:2015-12-18

分类:建站分享

标签:网页设计  响应式  自适应  

本文固定链接:http://daimajun.com/web/38.html

返回顶部