收藏
下载资源下载资源 加入VIP,免费下载

响应式网页设计.docx

上传人：b****6 文档编号：5278272 上传时间：2022-12-14 格式：DOCX 页数：36 大小：1.88MB
下载 相关 举报
响应式网页设计.docx_第1页
第1页 / 共36页
响应式网页设计.docx_第2页
第2页 / 共36页
响应式网页设计.docx_第3页
第3页 / 共36页
响应式网页设计.docx_第4页
第4页 / 共36页
响应式网页设计.docx_第5页
第5页 / 共36页
点击查看更多>>
下载资源
资源描述

响应式网页设计.docx

《响应式网页设计.docx》由会员分享，可在线阅读，更多相关《响应式网页设计.docx（36页珍藏版）》请在冰豆网上搜索。

响应式网页设计.docx

响应式网页设计

实现响应式网页设计的思路

用3个步骤实现响应式网页设计 ， 写在前面的话：

随着移动设备的逐渐普及和Web技术的发展，跨端的Web开发需求将会越来越大。

如何在多种设备上进行跨端的界面适配呢？

我们可以利用CSS3的MediaQuery来实现。

本文主要介绍了移动开发和CSS3结合，来进行多种分辨率适配的例子。

文中提到的响应式网页设计（Responsivewebdesign）是一种现代网页设计方法，基于CSS3的媒介查询（MediaQuery）特性使得网页适应不同设备，即根据设备的分辨率和缩放自动重新布局。

    

响应式网页设计现在无疑是一件大事情。

如果你还不了解响应式设计，可以看看我最近发表的响应式站点列表（译者注：

可以好好看看示例中的网站在不同分辨率下的展现方式）。

对新手来说，响应式设计可能有一点复杂，但是事实上比你想象的简单。

为了帮助你迅速的了解响应式设计，我起草了一篇快速教程。

你可以在3个步骤中学习到响应式设计和媒介查询（MediaQueries）的基本原理（假定你了解基本的CSS知识）。

Header

第一步：

Meta标签

大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。

你可以使用视图的meta标签来进行重置。

下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。

在标签里加入这个meta标签。

1.

IE8或者更早的浏览器并不支持MediaQuery。

你可以使用media-queries.js或者respond.js来为IE添加MediaQuery支持。

1.

--[if lt IE 9]>

2.

//css3-mediaqueries-

3.

[endif]-->

第二步：

HTML结构

在这个例子里，我有一个包括头部、内容、侧边栏和页脚的基本页面布局。

头部有固定的高度180像素，内容容器是600像素而侧边栏是300像素.

 

第三步：

媒介查询-MediaQueries

CSS3MediaQuery-媒介查询是响应式设计的核心。

它根据条件告诉浏览器如何为指定视图宽度渲染页面。

当视图宽度为小于等于980像素时，如下规则将会生效。

基本上，我会将所有的容器宽度从像素值设置为百分比以使得容器大小自适应。

 

然后为小于等于700像素的视图指定#content和#sidebar的宽度为自适应并且清除浮动，使得这些容器按全宽度显示。

对于小于等于480像素（手机屏幕）的情况，将#header元素的高度设置为自适应，将h1的字体大小修改为24像素并隐藏侧边栏。

 

你可以根据你的喜好添加足够多的媒介查询。

我在示例中仅仅展示了3个媒介查询。

媒介查询的目的在于为指定的视图宽度指定不同的CSS规则，来实现不同的布局。

媒介查询可以写在同一个或者单独的样式表中。

 

构造基本的HTML页面

一个简单的博客页面

始终觉得再多口水都没有一个生动鲜明的例子来得实在，下面通过对一个普通HTML页面的改造来体验什么是响应式设计及如何达到。

下面构造一个基本的HTML页面，它包含网站导航菜单，正文，图片，侧边栏，表格式的布局以及页脚信息。

是个非常完整而中庸的布局，几乎是常见的博客版面。

在这个页面中用了html5文档声明，用到了很多html5标签，但是这些标签在ie9以下版本是不支持的，所以我们必须引用一个html5.js文件使得这些标签被其它低版本浏览器确认。

低版本浏览器支持CSS3媒体查询

第一个JS，作用为低版本浏览器支持HTML5新标签

第2个JS，作用为

</p><p>ResponsiveDesignExample</p><p>

SampleTitle

#1

#2

#3

 

文章内容填充

剩下文章部分需要填充点内容，正好MSWord有这样一个产生随机文章的彩蛋。

使用方法是新建一个word文件然后打开输入"=rand（3,10）"再回车。

其中rand函数接收两个参数，第一个表示要产生多少个自然段，第二个表示每段多少行。

所以上面回车后我们会得到一篇由3个自然段组成的文章且每段有10行。

 

然后再另存为网页文件：

最后可以在浏览器中通过查看源码把包含内容的

标签复制到我们的代码中即可。

同时这里有一个专门产生填充内容的网站Fillerati。

可以定义篇幅，作者信息，标题等。

当然以上两种作法多少有点装逼与做作的感觉，你完全可以随便复制点什么东西来作为内容填充的一_一|||。

 

填充内容后HTML变成这样

SampleTitle

Videoprovidesapowerfulwaytohelpyouproveyourpoint.WhenyouclickOnline

Video,youcanpasteintheembedcodeforthevideoyouwanttoadd.Youcanalso

typeakeywordtosearchonlineforthevideothatbestfitsyourdocument.Tomake

yourdocumentlookprofessionallyproduced,Wordprovidesheader,footer,coverpage,

andtextboxdesignsthatcomplementeachother.Forexample,youcanaddamatching

coverpage,header,andsidebar.ClickInsertandthenchoosetheelementsyouwant

fromthedifferentgalleries.Themesandstylesalsohelpkeepyourdocumentcoordinated.

WhenyouclickDesignandchooseanewTheme,thepictures,charts,andSmartArt

graphicschangetomatchyournewtheme.Whenyouapplystyles,yourheadingschange

tomatchthenewtheme.SavetimeinWordwithnewbuttonsthatshowupwhereyou

needthem.

#1

#2

#3

Tochangethewayapicturefitsinyourdocument,clickitandabuttonforlayout

optionsappearsnexttoit.Whenyouworkonatable,clickwhereyouwanttoadd

aroworacolumn,andthenclicktheplussign.Readingiseasier,too,inthenew

Readingview.Youcancollapsepartsofthedocumentandfocusonthetextyouwant.

Ifyouneedtostopreadingbeforeyoureachtheend,Wordrememberswhereyouleft

off-evenonanotherdevice.Videoprovidesapowerfulwaytohelpyouproveyour

point.WhenyouclickOnlineVideo,youcanpasteintheembedcodeforthevideo

youwanttoadd.Youcanalsotypeakeywordtosearchonlineforthevideothat

bestfitsyourdocument.Tomakeyourdocumentlookprofessionallyproduced,Word

providesheader,footer,coverpage,andtextboxdesignsthatcomplementeachother.

Forexample,youcanaddamatchingcoverpage,header,andsidebar.

ClickInsertandthenchoosetheelementsyouwantfromthedifferentgalleries.

Themesandstylesalsohelpkeepyourdocumentcoordinated.WhenyouclickDesign

andchooseanewTheme,thepictures,charts,andSmartArtgraphicschangetomatch

yournewtheme.Whenyouapplystyles,yourheadingschangetomatchthenewtheme.

SavetimeinWordwithnewbuttonsthatshowupwhereyouneedthem.Tochangethe

wayapicturefitsinyourdocument,clickitandabuttonforlayoutoptionsappears

nexttoit.Whenyouworkonatable,clickwhereyouwanttoaddaroworacolumn,

andthenclicktheplussign.Readingiseasier,too,inthenewReadingview.You

cancollapsepartsofthedocumentandfocusonthetextyouwant.Ifyouneedto

stopreadingbeforeyoureachtheend,Wordrememberswhereyouleftoff-evenon

anotherdevice.

最后出来的效果看起来是这样的：

最后为了让侧边栏更有意义一点，给文章正文加上一些子标题同时给侧边栏里的元素加上锚点连接可以在文章的子标题间进行导航。

SampleTitle

subtitle1

//正文被省略

subtitle2

#1

#2

#3

subtitle3

//正文被省略

subtitle4

subtitle5

//正文被省略

 

基本的样式

最后加上一些样式让整个页面看起来更正常些。

我们首先去掉body元素的默认外边距，去掉列表元素前面默认的加点，把菜单里的超连接的下划线也去掉。

body{

margin:

0;

}

li{

list-style:

none;

}

/*navigationbar*/

nav{

background-color:

#333;

}

navli{

display:

inline-block;

padding-right:

10px;

}

navlia{

text-decoration:

none;

color:

white;

font-size:

1.5em;

}

navlia:

hover{

color:

#DDD;

}

 

再修饰下字体及正文中的三个方块div以及其他，最后的样式代码差不多是这样的：

html{

font-family:

"microsoftyahei",arial

}

body{

margin:

0;

}

li{

list-style:

none;

}

/*navigationbar*/

nav{

background-color:

#333;

}

navli{

display:

inline-block;

padding-right:

10px;

}

navlia{

text-decoration:

none;

color:

white;

font-size:

1.5em;

}

navlia:

hover{

color:

#DDD;

}

 

/*sidebar*/

aside{

width:

15%;

float:

left;

}

/*post*/

.post{

width:

70%;

margin:

0auto;

float:

left;

}

/*gridlayout*/

.grid{

}

.grid.item{

width:

25%;

height:

150px;

background-color:

#DDD;

display:

inline-block;

}

/*footer*/

footer{

width:

100%;

text-align:

center;

clear:

both;

}

footerli{

display:

inline-block;

}

 

其中，因为侧边栏和文章向左浮动了，为了让页脚不从最底跳到文章的后面跑到顶部去，要清除页脚footer两边的浮动。

footer{

width:

100%;

text-align:

center;

clear:

both;

}

 

 

最后页面看起来着不多是这个样子的

动态加载样式表

接下来的工作是让页面成为响应式的。

听起来觉得是一个全新的领域，但其实平时我们已经在实践了。

比如当指定元素的尺寸时，使用百分比而不是固定像素的大小时，这样的元素就具备自适应屏幕的能力。

最常见的就是指定元素宽度为100%。

这样窗口缩放或屏幕不同时元素始终占据屏幕整个宽度。

一些不太实用的实践是针对不同屏幕尺寸加载不同的样式表，这其实相当于为不同尺寸写不同的样式表，感觉维护起来不那么方便。

--CSSmediaqueryonalinkelement-->

800px）"href="example.css"/>

代码来自MDN

通过在引入样式表时使用media属性可以控制什么尺寸的屏幕使用哪个样式表，于是我们可以实现手机访问时下载手机版样式，电脑访问时下载正常样式。

320px）"href="mobile.css"/>

上面代码指定如果设备宽度小于320px则调用"mobile.css"样式表。

个人觉得这样为一个站点写多个分别的样式表不怎么好，所以这里就不多说了。

Viewport

响应式设计第一件需要做的事情就是在head标签里指定viewportmeta属性。

《QuickTip:

Don'tForgettheViewportMetaTag》这篇文章很好介绍了Viewport是的缘由及作用。

简单说来在手机（iPhoneSafari）上访问网页时它默认会对网页进行缩放，尽可能多地在屏幕上展示整个页面的内容。

而缩放之后的效果可想而知，一个在电脑上正常展示的页面被缩放进手机屏幕（通常是240*320）里面后，很难阅读。

同时由于默认使用缩放，那么你事先设计好的在小屏幕上使用的样式将不起作用，也就是说手机上展示的是电脑版本的一个缩小版。

我们看MDN上给出的例子截图。

而在代码中指定viewport，则可以让开发者指定网页视图区域及缩放比例等。

这样就能修正由浏览器自动缩放带来的影响。

通过我们指定如下代码：

 

表示使用设备宽度（即设备的屏幕宽度）并且缩放指定为1也就是不缩放。

你可能会问这样指定之后岂不是只能在手机屏幕上显示网站的部分，比如左上角。

这时候正是响应式网页设计起作用的时候了。

如果你专门为小屏幕的访问进行了优化比如在CSS中使用media属性（后面会讲到），那么当手机访问时会调用相应的样式规则，而不会只显示整个网站的一部分。

字体缩放

指定固定像素的字体大小是我们设计中经常使用的方式，但如果你想字体大小更具弹性的话，最好还是使用相对大小，CSS中比较常用的指定字体相对大小的单位有百分比，em以及CSS3新增的rem。

首先我们指定整个文档的字体大小为100%。

表示页面字体大小为浏览器默认大小的100

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置：首页 > 高等教育 > 艺术

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1