响应式网页设计Word格式文档下载.docx
- 文档编号:18259064
- 上传时间:2022-12-14
- 格式:DOCX
- 页数:36
- 大小:1.88MB
响应式网页设计Word格式文档下载.docx
《响应式网页设计Word格式文档下载.docx》由会员分享,可在线阅读,更多相关《响应式网页设计Word格式文档下载.docx(36页珍藏版)》请在冰豆网上搜索。
标签里加入这个meta标签。
1.<
meta
name="
viewport"
content="
width=device-width,
initial-scale=1.0"
>
IE8或者更早的浏览器并不支持MediaQuery。
你可以使用media-queries.js或者respond.js来为IE添加MediaQuery支持。
!
--[if
lt
IE
9]>
2.<
script
src="
http:
//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,作用为
html>
<
title>
ResponsiveDesignExample
/title>
metahttp-equiv="
content-type"
content="
text/html;
charset=utf-8"
linkrel="
stylesheet"
type="
text/css"
href="
style.css"
/head>
body>
divid="
main"
nav>
ul>
li>
ahref="
#"
Home<
/a>
/li>
Articles<
Gallery<
Forum<
About<
/ul>
/nav>
aside>
#subtitle1"
item1<
#subtitle2"
item2<
#subtitle3"
item3<
#subtitle4"
item4<
#subtitle5"
item5<
/aside>
sectionclass="
post"
article>
h1>
SampleTitle
/h1>
p>
/p>
grid"
divclass="
item"
#1
#2
#3
/section>
/article>
footer>
hr>
small>
Wayou&
copy2013|<
/small>
mailto:
sample@"
Contact<
/footer>
/body>
/html>
文章内容填充
剩下文章部分需要填充点内容,正好MSWord有这样一个产生随机文章的彩蛋。
使用方法是新建一个word文件然后打开输入"
=rand(3,10)"
再回车。
其中rand函数接收两个参数,第一个表示要产生多少个自然段,第二个表示每段多少行。
所以上面回车后我们会得到一篇由3个自然段组成的文章且每段有10行。
然后再另存为网页文件:
最后可以在浏览器中通过查看源码把包含内容的<
标签复制到我们的代码中即可。
同时这里有一个专门产生填充内容的网站Fillerati。
可以定义篇幅,作者信息,标题等。
当然以上两种作法多少有点装逼与做作的感觉,你完全可以随便复制点什么东西来作为内容填充的一_一|||。
填充内容后HTML变成这样
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.
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.
imgclass="
illustration"
src="
beauty.png"
title="
samplepic"
beauty"
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.
最后出来的效果看起来是这样的:
最后为了让侧边栏更有意义一点,给文章正文加上一些子标题同时给侧边栏里的元素加上锚点连接可以在文章的子标题间进行导航。
<
pid="
subtitle1"
strong>
subtitle1
/strong>
//正文被省略
subtitle2"
subtitle2
subtitle3"
subtitle3
subtitle4"
subtitle4
subtitle5"
subtitle5
基本的样式
最后加上一些样式让整个页面看起来更正常些。
我们首先去掉body元素的默认外边距,去掉列表元素前面默认的加点,把菜单里的超连接的下划线也去掉。
body{
margin:
0;
}
li{
list-style:
none;
/*navigationbar*/
nav{
background-color:
#333;
navli{
display:
inline-block;
padding-right:
10px;
navlia{
text-decoration:
color:
white;
font-size:
1.5em;
navlia:
hover{
#DDD;
再修饰下字体及正文中的三个方块div以及其他,最后的样式代码差不多是这样的:
html{
font-family:
"
microsoftyahei"
arial
/*sidebar*/
aside{
width:
15%;
float:
left;
/*post*/
.post{
70%;
0auto;
/*gridlayout*/
.grid{
.grid.item{
25%;
height:
150px;
/*footer*/
footer{
100%;
text-align:
center;
clear:
both;
footerli{
其中,因为侧边栏和文章向左浮动了,为了让页脚不从最底跳到文章的后面跑到顶部去,要清除页脚footer两边的浮动。
footer{
both;
}
最后页面看起来着不多是这个样子的
动态加载样式表
接下来的工作是让页面成为响应式的。
听起来觉得是一个全新的领域,但其实平时我们已经在实践了。
比如当指定元素的尺寸时,使用百分比而不是固定像素的大小时,这样的元素就具备自适应屏幕的能力。
最常见的就是指定元素宽度为100%。
这样窗口缩放或屏幕不同时元素始终占据屏幕整个宽度。
一些不太实用的实践是针对不同屏幕尺寸加载不同的样式表,这其实相当于为不同尺寸写不同的样式表,感觉维护起来不那么方便。
--CSSmediaqueryonalinkelement-->
media="
(max-width:
800px)"
example.css"
代码来自MDN
通过在引入样式表时使用media属性可以控制什么尺寸的屏幕使用哪个样式表,于是我们可以实现手机访问时下载手机版样式,电脑访问时下载正常样式。
screenand(max-device-width:
320px)"
mobile.css"
/>
上面代码指定如果设备宽度小于320px则调用"
样式表。
个人觉得这样为一个站点写多个分别的样式表不怎么好,所以这里就不多说了。
Viewport
响应式设计第一件需要做的事情就是在head标签里指定viewportmeta属性。
《QuickTip:
Don'
tForgettheViewportMetaTag》这篇文章很好介绍了Viewport是的缘由及作用。
简单说来在手机(iPhoneSafari)上访问网页时它默认会对网页进行缩放,尽可能多地在屏幕上展示整个页面的内容。
而缩放之后的效果可想而知,一个在电脑上正常展示的页面被缩放进手机屏幕(通常是240*320)里面后,很难阅读。
同时由于默认使用缩放,那么你事先设计好的在小屏幕上使用的样式将不起作用,也就是说手机上展示的是电脑版本的一个缩小版。
我们看MDN上给出的例子截图。
而在代码中指定viewport,则可以让开发者指定网页视图区域及缩放比例等。
这样就能修正由浏览器自动缩放带来的影响。
通过我们指定如下代码:
metaname="
width=device-width,initial-scale=1"
表示使用设备宽度(即设备的屏幕宽度)并且缩放指定为1也就是不缩放。
你可能会问这样指定之后岂不是只能在手机屏幕上显示网站的部分,比如左上角。
这时候正是响应式网页设计起作用的时候了。
如果你专门为小屏幕的访问进行了优化比如在CSS中使用media属性(后面会讲到),那么当手机访问时会调用相应的样式规则,而不会只显示整个网站的一部分。
字体缩放
指定固定像素的字体大小是我们设计中经常使用的方式,但如果你想字体大小更具弹性的话,最好还是使用相对大小,CSS中比较常用的指定字体相对大小的单位有百分比,em以及CSS3新增的rem。
首先我们指定整个文档的字体大小为100%。
表示页面字体大小为浏览器默认大小的100
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 响应 网页 设计