之前已经制作了PC端固定布局和移动端流体布局的页面，这次的任务就是将一个页面制作成PC端移动端兼容响应式布局页面，是页面能在不同屏幕大小下呈现处不同最佳显示状态。
主要的过程就是对：
1.将width改为max-width，来适应屏幕的变动来改变自身宽度等。其他亦然。
2.
/*媒体查询，参考部分Bootstarp框架*//*当页面大于1200px时，大屏幕，主要显示PC端*/@media(min-width: 1200px){}
/*在992 和1199 像素之间的屏幕里，中等屏幕，分辨率低的PC*/@media(min-width: 992px)and(max-width: 1199px){}
/*在768 和991 像素之间的屏幕里，小屏幕，主要是PAD*/@media(min-width: 768px)and(max-width: 991px){}
/*在480 和767 像素之间的屏幕里，超小屏幕，主要是手机*/@media(min-width: 480px)and(max-width: 767px){}
/*在小于480px的屏幕里，微小屏幕，更低分辨率的手机*/@media(max-width: 479px){}
以上标签的使用，当屏幕像素多少时，各板块样式的显示方式改变。例如导航栏在PC屏幕和移动端屏幕之下，显示的选项卡数量可以不同。上图：PC端时显示页头：页尾：移动端时显示页头：页尾：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"><title>个人页面导航 兼容</title><style>body {font-family:sans-serif;overflow-x:hidden; }body,h1,h2,h3,ul,p,ol,form,fieldset,figure{margin: 0;padding: 0;}div,figure,img,input,button{box-sizing: border-box;}body {background-color: #f5f5f5;font-family: "Helvetica Neue",Helvetica,Arial,"Microsoft YaHei UI","Microsoft YaHei",SimHei,"宋体",SimSun,Sans-Serif;}img{display: block;max-width: 100%;}ul,ol {list-style: outside none none;}a{text-decoration: none;}.none{display: none;}.sm-visible{display: none;}.clearfix:after{content: ".";height: 0;visibility: hidden;display: block;clear: both;}#header {width: 100%;height: 65px;background-color:#333;box-shadow: 0 11px 10px rgba(0,0,0,0.3);//导航栏阴印position: fixed;top:0;z-index: 9999;}#header .center{max-width: 1263px;height: 65px;margin: 0 auto;}#header .logo{margin: 1px;width:30%;height:62px;background:url(img/LOGO.png) no-repeat left;text-indent: -9999px;float: left;}#header .link{width: 69%;height: 65px;line-height: 65px;color: #eee;float: right;}#header .link li{width: 33.3%;text-align: center;float: right;}#header .link a{color: #eee;display: block;}#header .link a:hover,#header .active a{background-color: #000;}#search{width: 100%;max-width: 1920px;height: 550px;background: url(img/海岛.jpg) no-repeat center;position: relative;margin: 0 auto;padding: 70px 0 0 0;}#search .center{width: 40%;height: 60px;background-color: #000;position:absolute ;top:50%;left: 50%;margin: -10px 0 0 -20%;opacity: 0.6;border-radius: 10px;}#search .copy{opacity: 1;background-color: transparent;padding: 3px 3px 0 3px;}#search .search{width: 70%;height: 54px;background-color: #fff;color: #666;border: 1px solid #666;border-radius: 10px;font-size: 24px;padding: 0 10px;outline: none;display: block;float: left;}#search .button{width: 30%;height: 54px;background-color: #eee;color: #666;border: 1px solid #333;border-left-width: 3px;border-radius: 10px;font-size: 24px;outline: none;cursor: pointer;font-weight: bold;display: block;float: right;}#menu{max-width: 1263px;margin: 30px auto;text-align: center;}#menu .center h2{font-size: 45px;letter-spacing: 2px;color: #666;margin: 10px 0;}#menu .center p{color: #666;margin: 10px;font-size: 16px;}#menu figure{border: 1px solid #ddd;display: inline-block;padding: 4px;border-radius: 4px;margin: 25px 0.4%;width: 31%;text-align: left;position: relative;}#menu figure img{vertical-align:middle;}#menu .sat{float:right;font-size: 13px;color: #999;font-style: normal;position: relative;top:5px;right: 5px;line-height: 15px;overflow: hidden;}#menu .score{color: #f60;font-size: 14px;line-height: 15px;overflow: hidden;}#menu .score strong{font-size: 20px;letter-spacing: 1px;}#menu .type{ // 标签width: 90px;height: 25px;line-height: 25px;font-size: 14px;text-align: center;color: #fff;background-color:#ccc;position: absolute;top:4px;left: 4px;}/*媒体查询，参考部分Bootstarp框架*//*当页面大于1200px时，大屏幕，主要显示PC端*/@media (min-width: 1200px){}/*在992 和1199 像素之间的屏幕里，中等屏幕，分辨率低的PC*/@media (min-width: 992px) and (max-width: 1199px){#search .center{width: 50%;margin: -10px 0 0 -25%;}#menu .center h2{font-size: 40px;}}/*在768 和991 像素之间的屏幕里，小屏幕，主要是PAD*/@media (min-width: 768px) and (max-width: 991px){#search .center{width: 60%;margin: -10px 0 0 -30%;}#search .search, #search .button{font-size: 20px;}#menu .center h2{font-size: 35px;}}/*在480 和767 像素之间的屏幕里，超小屏幕，主要是手机*/@media (min-width: 480px) and (max-width: 767px){#header,#header .link,#header .center{height: 45px;}#header .logo, .sm-hidden{display: none;}#header .link{width: 100%;line-height: 45px;}#search{padding: 45px 0 0 0;}#search .center{width: 70%;height: 53px;margin: -10px 0 0 -35%;}#search .search, #search .button{height: 45px;font-size: 18px;}.sm-visible{display: block;}#menu .center h2{font-size: 30px;}#menu .center p{font-size: 15px;}#menu figure{width: 49.2%;}}/*在小于480px的屏幕里，微小屏幕，更低分辨率的手机*/@media (max-width: 479px){#header,#header .link,#header .center{height: 45px;}#header .logo, .xs-hidden, .sm-hidden{display: none;}#header .link{width: 100%;line-height: 45px;}#header .link li{width: 50%;}#search{padding: 45px 0 0 0;}#search .center{height: 48px;width: 80%;margin: -10px 0 0 -40%;}#search .search, #search .button{height: 40px;font-size: 16px;}.sm-visible{display: block;}#footer .bottom, #footer .version{font-size: 13px;}#menu .center h2{font-size: 26px;}#menu .center p{font-size: 14px;}#menu figure{width: 99%;}}#footer{width: 100%;background-color: #83858C;text-align: center;}#footer .top{max-width: 1263px;width:1263px;height: 280px;margin: 0 auto;}#footer .version{color: #777;text-align: center;padding: 10px;}#footer .block{width:33.3%;height: 320px;text-align: left;color: #ccc;vertical-align: top;display: block;float: left;}#footer a:link,#footer a:visited {color:#000000;text-decoration:underline;}#footer a:hover,#footer a:active {color:#e0e7ec;text-decoration:none;}#footer h2{font-size: 24px;font-weight: normal;padding: 20px 0 0 20px;}#footer hr{width: 90%;border: 1px dashed #333;}#footer ul{font-size: 18px;color: #000000;text-indent: 20px;line-height: 2;}#footer .bottom{padding: 15px 0;background-color: #000;color: #777;text-align: center;border-top: 1px solid #444;}</style></head><body><header id="header"><div class="center"><h1 class="logo"></h1><nav class="link"><h2 class="none">导航</h2><ul><li><a href="tencent://message/?uin=">启动QQ</a></li><li><a href="/" target="_blank"><span class="xs-hidden">网页版微信</span>打开微信</a></li><li class="xs-hidden"><a href="/" target="_blank">新浪微博</a></li></ul></nav></div></header><div id="search"><div class="center"></div><div class="center copy"><form οnsubmit="return baiduWithHttps(this)" action="/baidu" target="_blank"><input name="tn" type="hidden" value="SE_zzsearchcode_shhzc78w"><a href="/" target="_blank"></a><input type="text" οnfοcus="checkHttps" placeholder="输入搜索相关内容" class="search" name="word" size="30"><button type="submit" value="搜索" class="button">搜索</button></form><script src="/r/www/cache/global/js/BaiduHttps_0714_zhanzhang.js"></script><script>function checkHttps () {BaiduHttps.useHttps();}function baiduWithHttps (formname) {var data = BaiduHttps.useHttps();if (data.s === 0) {return true;}else {formname.action = '/baidu' + '?ssl_s=1&ssl_c' + data.ssl_code;return true;}}</script></div></div><div id="menu"><section class="center"><h2>常用</h2><p>pc端，移动端，兼容响应式页面。</p></section><figure><a href="/" target="_blank"></a><img src="img/腾讯.jpg" alt=""><div><em class="sat">中国浏览量最大的中文门户网站</em><span class="score"><strong>腾讯网</strong></span></div><div class="type">腾讯</div></figure><figure><a href="/" target="_blank"></a><img src="img/sina.jpg" alt=""><div><em class="sat">为全球用户24小时提供全面及时的中文资讯</em><span class="score"><strong>新浪网</strong></span></div><div class="type">新浪</div></figure><figure><a href="/" target="_blank"></a><img src="img/网易.jpg" alt=""><div><em class="sat">最有态度的网站</em><span class="score"><strong>网易</strong></span></div><div class="type">网易</div></figure><figure><a href="/" target="_blank"></a><img src="img/虎嗅.png" alt=""><div><em class="sat">带给你最新的资讯</em><span class="score"><strong>虎嗅</strong></span></div><div class="type">虎嗅</div></figure><figure><a href="/" target="_blank"></a><img src="img/知乎.png" alt=""><div><em class="sat">知无不言</em><span class="score"><strong>知乎</strong></span></div><div class="type">知乎</div></figure><figure><a href="/" target="_blank"></a><img src="img/36kr.jpg" alt=""><div><em class="sat">为创业者提供最好的产品和服务</em><span class="score"><strong>36氪</strong></span></div><div class="type">36kr</div></figure><figure><a href="/" target="_blank"></a><img src="img/人人都是产品经理.jpg" alt=""><div><em class="sat">产品经理、产品爱好者学习交流平台</em><span class="score"><strong>人人都是产品经理</strong></span></div><div class="type">人人都是产品经理</div></figure><figure><a href="/" target="_blank"></a><img src="img/爱奇艺.jpg" alt=""><div><em class="sat">中国领先的视频门户</em><span class="score"><strong>爱奇艺</strong></span></div><div class="type">爱奇艺</div></figure><figure><a href="/" target="_blank"></a><img src="img/youku.png" alt=""><div><em class="sat">中国领先的视频网站</em><span class="score"><strong>优酷</strong></span></div><div class="type">优酷</div></figure><figure><a href="/" target="_blank"></a><img src="img/豆瓣.png" alt=""><div><em class="sat">提供图书、电影、音乐唱片的推荐</em><span class="score"><strong>豆瓣</strong></span></div><div class="type">豆瓣</div></figure><figure><a href="/" target="_blank"></a><img src="img/hupu.png" alt=""><div><em class="sat">最专业的篮球网站</em><span class="score"><strong>虎扑</strong></span></div><div class="type">虎扑</div></figure><figure><a href="/" target="_blank"></a><img src="img/简书.png" alt=""><div><em class="sat">最简洁的博客</em><span class="score"><strong>简书</strong></span></div><div class="type">简书</div></figure><figure><a href="/" target="_blank"></a><img src="img/淘宝.jpg" alt=""><div><em class="sat">只有想不到，没有买不到</em><span class="score"><strong>淘宝</strong></span></div><div class="type">淘宝</div></figure><figure><a href="/" target="_blank"></a><img src="img/去哪儿.png" alt=""><div><em class="sat">特价机票,超值酒店,省心省钱,聪明你的旅行!</em><span class="score"><strong>简书</strong></span></div><div class="type">去哪儿</div></figure><figure><a href="/" target="_blank"></a><img src="img/美团.png" alt=""><div><em class="sat">吃喝玩乐好帮手,专业品质团购网</em><span class="score"><strong>美团</strong></span></div><div class="type">美团</div></figure><div class="clearfix"></div></div><footer id="footer"><div class="top sm-hidden"><div class="block left"><h2>文艺</h2><hr><ul><li><a href="https://wuzhi.me/last" target="_blank">吾志</a></li><li><a href="/" target="_blank">看大图</a></li><li><a href="http://youqu.de/" target="_blank">有趣的</a></li><li><a href="/" target="_blank">一画换一画</a></li><li><a href="http://www.topit.me/" target="_blank">收录美好的图片it.me</a></li></ul></div><div class="block center"><h2>小众</h2><hr><ul><li><a href="/" target="_blank">青番茄</a></li><li><a href="/" target="_blank">堆糖网 </a></li><li><a href="/" target="_blank">下厨房</a></li><li><a href="/" target="_blank">在梦上</a></li><li><a href="/hot" target="_blank">鲜果</a></li></ul></div><div class="block right"><h2>青年</h2><hr><ul><li><a href="http://www.zimuzu.tv/" target="_blank">人人影视</a></li><li><a href="/" target="_blank">香当</a></li><li><a href="/portal.php" target="_blank">花开暖年</a></li><li><a href="http://blah.me/category/21" target="_blank">Blah书库</a></li><li><a href="/" target="_blank">有意思吧</a></li></ul></div></div><div class="version sm-visible">客户端 | 触屏版 | 电脑版</div><div class="bottom">Copyright © Jin<span class="sm-hidden">| 浙</span></div></footer></body></html>
