精通
英语
和
开源
，
擅长
开发
与
培训
，
胸怀四海
第一信赖
精通
英语
和
开源
，
擅长
开发
与
培训
，
胸怀四海
第一信赖
科技发展越来越快，我们使用的电子产品的屏幕大小也各不相同，所以我们设计的网页就不能在固定大小的，这样我们要设计多个适应各种屏幕的版本，太浪费时间，现在最受欢迎的还是响应式的网站，现在的响应式网站除了用bootstrap框架来写之外，我们还可以直接用css来写响应式的网页框架，这比bootstrap更容易修改。响应式的Web设计其实并不难，但是要让元素在布局切换时能够平滑过渡就比较考验技巧了，响应式布局使用的css技巧主要有：
目标元素宽度/ 上下文元素宽度=百分比宽度
如将固定宽度
#wrap { width:960px;}
改为百分比布局
#wrap { width:96%;}
em替换px主要应用于文字缩放。计算公式为：
目标元素尺寸/ 上下文元素尺寸= 百分比尺寸
例如将下面的元素
#content h1{ font-size:69px;}
浏览器默认字体是16px，所以可以改为：
#content h1{ font-size:4.3125em}
这也是响应式查询的重点，页面之所以能适应不同的窗体大小，也是因为媒体查询。媒体查询理解起来非常简单，就是在不同的窗体下，定义不同的样式。例如：
/*窗体最大宽度960是执行*/@media screen and (max-width:960px){ body {background-color:red;} h1{font-size:14px;}}
/*窗体最大宽度768执行*/@media screen and (max-width:768px){ body{ background-color:orange} h1{font-size:12px; }}
/*窗体最大宽度320是执行手机*/@media screen and (max-width:320px){ body{background-color:green;} h1{font-size:10px;}}
如果我们需要引用样式，可以在页面添加<li>
由于时间问题，在这里我做了一个简单的响应式网页，仅供参考。
代码如下：
<style>
* {
box-sizing: border-box;
}
.row:after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color:#F9C;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color:#CCF;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
.aside {
background-color:#69F;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
background-color:#6CF;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>头部</h1>
</div>
<div class="row">
<div class="col-3 menu">
<ul>
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
</ul>
</div>
<div class="col-6">
<h1>《平凡的世界》</h1>
<p>这姑娘仍不失往日那种风度，薄毛衣外面象男孩一样披件夹克衫，两条胳膊帮在鼓囊囊的胸前，
似乎陷入到一种深邃的沉思之中；但脸上还带着通常那种无意识的、骄傲的微笑。
这是一个美好的夜晚，远远近近，灯光点点，绿意朦胧，空气中弥漫着槐花甜丝丝的芬芳。</p>
</div>
<div class="col-3 right">
<div class="aside">
<h2>题目</h2>
<p>复活在我，生命也在我。那些信我的人，虽然死了，也必复活；那些活着而信我的人，必定永远不死。</p>
<h2>题目</h2>
<p>C复活在我，生命也在我。那些信我的人，虽然死了，也必复活；那些活着而信我的人，必定永远不死。</p>
<h2>题目</h2>
<p>复活在我，生命也在我。那些信我的人，虽然死了，也必复活；那些活着而信我的人，必定永远不死。</p>
</div>
</div>
</div>
<div class="footer">
<p>版权所有</p>
</div>