持续学习-拥抱流式布局
继续学习-拥抱流式布局
今天,继续学习《响应式Web程序设计-HTML5和CSS3实战》。根据昨天的代码进行了修改。边学边改,加入了媒体。
基本步骤就是:
1.将固定的像素元素宽度改为百分比。公式:目标元素宽度 / 上下文元素宽度 = 百分比宽度。
2.将固定的文字像素大小改成等量相对尺寸。使用em。公式:目标元素尺寸 / 上下文元素尺寸 = 百分比尺寸。
3.图像加入width、max-width,使图像平滑缩放。
4.加入媒体查询,不同视口对应不同的字体,布局。
如图,分别是480和768的视口:
480
768
这里就贴css代码了。style.css
body{ background-image:url(image/bg4.png); background-repeat:repeat; } img,object,video,embed{ max-width:100%; } #wrapper{ margin-right:auto; margin-left:auto; width:93.75%; } #header{ margin-right:1.06382978%; margin-left:1.06382978%; margin-bottom:40px; width:97.91%; height:200px; background-image:url(image/buntingFW.png); background-repeat:repeat-x; border-bottom:dashed 1px red; } #headline{ height:140px; font-size:3em; font-family:Arial; } #headline span{ position:relative; top:70px; left:1.06382978%; } #special_hint{ color:#aeaeae; } #navigation{ background-image:url(image/atwiNavBg.png); background-repeat:repeat-x; height:30px; } #navigation ul{ margin:0px; padding:0px; } #navigation ul li{ display:inline-block; margin-left:1.06382978%; margin-right:1.06382978%; } #navigation ul li a{ text-decoration:none; font-size:1.5625em; font-family:Arial; font-weight:bold; color:black; } #main{ overflow:auto; } #siderbar{ padding-left:1.06382978%; padding-right:1.06382978%; border-right:solid 3px #eaeaea; width:19.14%; float:left; } #siderbar span{ font-size:1.25em; font-family:Arial; font-weight:bold; color:black; clear:both; } #siderbar img{ float:left; padding:5.5555555556% 2.777777778%; max-width:43%; } #content{ margin-right:1.06382978%; margin-left:1.06382978%; float:right; width:74.46%; font-family:Arial; } #content img{ float:left; width:28.9389%; max-width:202px; } #text{ float:right; width:68.57%; } #text h1{ font-size:4.375em; margin:0px; padding:0px; } #text h2{ margin:0px; padding:0px; font-size:2.5em; color:#7F7F7F; } #text span{ color:#7F7F7F; font-size:1.125em; line-height:30px; height:30px; } #footer{ display:block; margin-right:1.06382978%; margin-left:1.06382978%; margin-top:40px; border-top:dashed 1px red; clear:both; width:97.91%px; height:150px; } #notation{ height:80px; text-align:center; padding-top:20px; font-size:0.9375em; color:brown; } #footimg{ background-image:url(image/buntingFWinvert.png); background-repeat:repeat-x; height:40px; } @media screen and (min-width:975px) and (max-width:1080px){ #navigation ul li a {font-size:1.5625em} } @media screen and (min-width:789px) and (max-width:974px){ #navigation ul li a {font-size:1.2625em} } @media screen and (min-width:721px) and (max-width:788px){ #navigation ul li a {font-size:1.1em} #text h1{font-size:3.375em;} #text h2{font-size:1.9em;} } @media screen and (min-width:541px) and (max-width:720px){ #headline{font-size:1.8em} #navigation ul li a {font-size:0.8em} #siderbar span{font-size:0.9em;} #text h1{font-size:2.575em;} #text h2{font-size:1.12em;} #text span{font-size:0.9em;line-height:15px;} #text a{font-size:0.8em;} #notation{font-size:0.5em;} } @media screen and (max-width:540px){ #headline{font-size:1.8em} #navigation ul li a {font-size:0.8em} #siderbar{width:94%;} #siderbar span{font-size:1.8em;} #siderbar img{max-width:100%;} #text h1{font-size:2.575em;} #text h2{font-size:1.12em;} #text span{font-size:0.9em;line-height:15px;} #text a{font-size:0.8em;} #notation{font-size:0.5em;} #siderbar{clear:both;float:none;border-right:none;} #content{clear:both;float:none;} }