响应式Web设计
本⽂转载⾃与
国际贸易实训报告1. 响应式Web设计的概念
现状：⼿机的屏幕⽐较⼩，宽度通常在600像素以下；PC的屏幕宽度，⼀般都在1000像素以上（⽬前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在⼤⼩迥异的屏幕上，都呈现出满意的效果，并不是⼀件容易的事。
2010年，Ethan Marcotte提出了"响应式⽹页设计"（Responsive Web Design）这个名词，指可以⾃动识别屏幕宽度、并做出相应调整的⽹页设计。"⼀次设计，普遍适⽤"，让同⼀张⽹页⾃动适应不同⼤⼩的屏幕，根据屏幕宽度，⾃动调整布局（layout）。
他制作了，⾥⾯是《福尔摩斯历险记》六个主⼈公的头像。
如果屏幕宽度⼤于1300像素，则6张图⽚并排在⼀⾏。
如果屏幕宽度在600像素到1300像素之间，则6张图⽚分成两⾏。
如果屏幕宽度在400像素到600像素之间，则导航栏移到⽹页头部。
如果屏幕宽度在400像素以下，则6张图⽚分成三⾏。
2. 响应式⽹页的实现
⾸先，在⽹页代码的头部，加⼊⼀⾏viewport标签
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
viewport是⽹页默认的宽度和⾼度，上⾯这⾏代码的意思是，⽹页宽度默认等于屏幕宽度（width=device-width），原始缩放⽐例（initial-scale=1）为1.0，最⼤缩放⽐例（maxmum-scale=1）为1.0，最⼩缩放⽐例（minmum-scale=1）为1.0，⽤户不可以调整缩放⽐例，即⽹页初始⼤⼩占屏幕⾯积的100%。
所有主流浏览器都⽀持这个设置，包括IE9。对于那些⽼式浏览器（主要是IE6、7、8），需要使⽤
<!--[if lt IE 9]>
<script src="lecode/svn/trunk/css3-mediaqueries.js"></script>汉钟离
<![endif]-->
不使⽤绝对宽度
由于⽹页会根据屏幕宽度调整布局，所以不能使⽤绝对宽度的布局，也不能使⽤具有绝对宽度的元素。这⼀条⾮常重要。
具体说，CSS代码不能指定像素宽度：
width:xxx px;
只能指定百分⽐宽度：
width: xx%;
或者
width:auto;
字体使⽤相对⼤⼩
字体也不能使⽤绝对⼤⼩（px），⽽只能使⽤相对⼤⼩（em）。
body {
font: normal 100% Helvetica, Arial, sans-serif;
}
上⾯的代码指定，字体⼤⼩是页⾯默认⼤⼩的100%，即16像素。
h1 {
font-size: 1.5em;
}
然后，h1的⼤⼩是默认⼤⼩的1.5倍，即24像素（24/16=1.5）。
small {
font-size: 0.875em;
}
small元素的⼤⼩是默认⼤⼩的0.875倍，即14像素（14/16=0.875）。
流动布局（fluid grid）
的含义是，各个区块的位置都是浮动的，不是固定不变的。
.main {
float: right;
width: 70%;
}
.leftBar {
float: left;
width: 25%;
}
的好处是，如果宽度太⼩，放不下两个元素，后⾯的元素会⾃动滚动到前⾯元素的下⽅，不会在⽔平⽅向溢出，避免了⽔平滚动条的出现。
另外，绝对定位（position: absolute）的使⽤，也要⾮常⼩⼼。
选择加载CSS
西安附近好玩的地方"响应式⽹页设计"的核⼼，就是CSS3引⼊的模块。
它的意思就是，⾃动探测屏幕宽度，然后加载相应的CSS⽂件。
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 400px)"
href="tinyScreen.css" />
上⾯的代码意思是，如果屏幕宽度⼩于400像素（max-device-width: 400px），就加载tinyScreen.css⽂件。
<link rel="stylesheet" type="text/css"
media="screen and (min-width: 400px) and (max-device-width: 600px)"
href="smallScreen.css" />
如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css⽂件。
除了⽤html标签加载CSS⽂件，还可以在现有CSS⽂件中加载。
@import url("tinyScreen.css") screen and (max-device-width: 400px);
CSS的@media规则
同⼀个CSS⽂件中，也可以根据不同的屏幕分辨率，选择应⽤不同的CSS规则。
@media screen and (max-device-width: 400px) {
.column {
float: none;
录音麦克风 width:auto;
}
HDZ #sidebar {
display:none;
}
}
上⾯的代码意思是，如果屏幕宽度⼩于400像素，则column块取消浮动（float:none）、宽度⾃动调节（width:auto），sidebar块不显⽰（display:none）。
图⽚的⾃适应
除了布局和⽂本，"⾃适应⽹页设计"还必须实现图⽚的。
这只要⼀⾏CSS代码：
img { max-width: 100%;}
海棠肉类美食大全或者，Ethan Marcotte的。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论