本章主要开始如果将前两个项目再进行重构，设计成既可以在 PC 端正常显示，又可以在 PAD 上浏览，还可以在移动端有良好的体验。这些都必须兼容，那只有使用响应式设计了。
一．栏目头部响应式
在栏目中，头部我们重新设计了图片，并且加上了黑色的层来取代兼容性不好的 CSS3渐变，高度适当的调整，以满足移动端的用户体验。
HTML部分
<div id="headline"> <img src="img/headline.jpg" alt=""> <hgroup> <h2>公司简介h2> <h3>公司的发展历程、获得荣誉以及联系方式h3> hgroup>div>CSS部分
#headline { max-width: 1920px; padding: 70px 0 0 0; margin: 0 auto; position: relative;}#headline hgroup { position: absolute; top: 45%; left: 18%; }#headline h2 { color: #eee; font-size: 45px; letter-spacing: 1px;}#headline h3 { color: #eee; letter-spacing: 1px; font-size: 24px;}二．公司简介响应式
公司简介，我们直接 PC 端完全复制过来即可。改成流体响应式，并且在响应式时，根据分辨率隐藏掉侧栏即可。
HTML部分
<div id="container"> <aside class="sidebar"> <div class="recommend"> <h2>景点推荐h2> <div class="tag"> <ul> <li><a href="###">曼谷(12)a>li> <li><a href="###">东京(5)a>li> <li><a href="###">西双版纳(8)a>li> <li><a href="###">漓江(16)a>li> <li><a href="###">呼伦贝尔(4)a>li> <li><a href="###">首尔(9)a>li> <li><a href="###">巴厘岛(15)a>li> <li><a href="###">土耳其(22)a>li> <li><a href="###">夏威夷(5)a>li> <li><a href="###">巴厘岛(11)a>li> <li><a href="###">毛里求斯(7)a>li> <li><a href="###">吉普岛(4)a>li> <li><a href="###">希腊(18)a>li> <li><a href="###">法瑞意(8)a>li> <li><a href="###">马尔代夫(9)a>li> <li><a href="###">新西兰(16)a>li> <li><a href="###">埃及(11)a>li> <li><a href="###">迪拜(14)a>li> <li><a href="###">斯里兰卡(7)a>li> <li><a href="###">麦哈顿(3)a>li> <li><a href="###">大阪(15)a>li> ul> div> div> <div class="hot"> <h2>热卖旅游h2> <div class="figure"> <figure> <img src="img/hot1.jpg" alt="曼谷-芭提雅6日游"> <figcaption>曼谷-芭提雅6日游figcaption> figure> <figure> <img src="img/hot2.jpg" alt="马尔代夫双鱼6日游"> <figcaption>马尔代夫双鱼6日游figcaption> figure> <figure> <img src="img/hot3.jpg" alt="海南双飞5日游"> <figcaption>海南双飞5日游figcaption> figure> <figure> <img src="img/hot4.jpg" alt="富山大阪东京8日游"> <figcaption>富山大阪东京8日游figcaption> figure> <figure> <img src="img/hot5.jpg" alt="法瑞意德12日游"> <figcaption>法瑞意德12日游figcaption> figure> <figure> <img src="img/hot6.jpg" alt="巴厘岛6日半游"> <figcaption>巴厘岛6日半游figcaption> figure> <figure> <img src="img/hot7.jpg" alt="塞舌尔迪拜9日游"> <figcaption>塞舌尔迪拜9日游figcaption> figure> <figure> <img src="img/hot8.jpg" alt="花样土耳其10日游"> <figcaption>花样土耳其10日游figcaption> figure> div> div> <div class="treasure"> <h2>旅游百宝箱h2> <div class="box"> <a href="###" class="trea1">天气预报a> <a href="###" class="trea2">火车票查询a> <a href="###" class="trea3">航空查询a> <a href="###" class="trea4">地铁线路查询a> div> div> aside> <div class="list about"> <section> <h2>关于我们h2> <p>瓢城旅行社旅游网创立于2006年10月，以“让旅游更简单”为使命，为消费者提供由北京、上海、广州、深圳等64个城市出发的旅游产品预订服务，产品全面，价格透明，全年365天24小时400电话预订，并提供丰富的后续服务和保障。p> <p>目前，瓢城旅行社旅游网提供8万余种旅游产品供消费者选择，涵盖跟团、自助、自驾、邮轮、酒店、签证、景区门票以及公司旅游等，已成功服务累计超过400万人次出游。p> <p>同时基于瓢城旅行社旅游网全球中文景点目录以及中文旅游社区，可以更好地帮助游客了解目的地信息，妥善制定好出游计划，并方便地预订旅程中的服务项目。p> section> <p> p> <section> <h2>联系我们h2> <address> <ul> <li>瓢城旅行社股份有限公司li> <li>地址：xx省xx市xx区xx中路xxxx号li> <li>邮编：1234567li> <li>电话：010-xxxxxxxxli> <li>传真：010-xxxxxxxxli> ul> address> section> div>div>CSS部分
#container { max-width: 1263px; margin: 30px auto;}#container .sidebar { width: 28%; float: right;}#container .sidebar h2 { height: 40px; line-height: 40px; font-size: 20px; font-weight: normal; letter-spacing: 1px; color: #666; text-indent: 10px; background-color: #fafafa; border-bottom: 1px solid #eee; text-align: left;}#container .recommend { border: 1px solid #eee; margin: 0 0 10px; background-color: #fff;}#container .tag { text-align: center; padding: 10px 0;}#container .tag li { display: inline-block; background-color: #eee; width: 100px; height: 35px; line-height: 35px; text-indent: 8px; text-align: left; margin:2px 0;}#container .tag a { display: block; color: #999;}#container .tag a:hover { color: #fff; background-color: #458B00;}#container .hot { border: 1px solid #eee; margin: 0 0 10px; text-align: center; background-color: #fff;}#container .figure { padding: 10px 0;}#container .hot figure { display: inline-block; color: #666; padding: 4px;}#container .treasure { border: 1px solid #eee; margin: 0 0 10px; background-color: #fff;}#container .box { text-align: center; padding: 10px 0;}#container .box a { display: inline-block; background-color: #eee; width: 150px; height: 40px; line-height: 40px; text-indent: 35px; text-align: left; margin:3px 0; color: #999;}#container .box a.trea1 { background: #eee url(../img/trea1.png) no-repeat 10px center;}#container .box a.trea2 { background: #eee url(../img/trea2.png) no-repeat 10px center;}#container .box a.trea3 { background: #eee url(../img/trea3.png) no-repeat 10px center;}#container .box a.trea4 { background: #eee url(../img/trea4.png) no-repeat 10px center;}.list { width: 71%; float: left;}.list h2 { height: 40px; line-height: 40px; font-size: 30px; font-weight: normal; border-bottom: 1px dashed #999; padding: 0 0 15px 0; color: #666;}.about p { font-size: 20px; color: #666; line-height: 2; margin: 20px 0;}.about address { font-style: normal; font-size: 20px; color: #666; margin: 20px 0; line-height: 1.6;}媒体查询
/*媒体查询，参考部分Bootstrap 框架*//*当页面大于1200px 时，大屏幕，主要是PC 端*/@media (min-width: 1200px) { }/*在992 和1199 像素之间的屏幕里，中等屏幕，分辨率低的PC*/@media (min-width: 992px) and (max-width: 1199px) { #adver .center { width: 50%; margin: -10px 0 0 -25%; } #tour .center h2 { font-size: 40px; } #headline hgroup { left: 8%; } #headline h2 { font-size: 36px; } #headline h3 { font-size: 20px; } .sidebar { display: none; } .list { width: 100%; padding: 0 20px }}/*在768 和991 像素之间的屏幕里，小屏幕，主要是PAD*/@media (min-width: 768px) and (max-width: 991px) { #adver .center { width: 60%; margin: -10px 0 0 -30%; } #adver .search, #adver .button { font-size: 20px; } #tour .center h2 { font-size: 35px; } #headline hgroup { left: 8%; } #headline h2 { font-size: 30px; } #headline h3 { font-size: 16px; } .sidebar { display: none; } .list { width: 100%; padding: 0 20px } .list h2 { font-size: 28px; } .about p,.about address { font-size: 18px; }}/*在480 和767 像素之间的屏幕里，超小屏幕，主要是手机*/@media (min-width: 480px) and (max-width: 767px) { #header, #header .center, #header .link { height: 45px; } #header .logo, .sm-hidden,.sidebar { display: none; } #header .link { width: 100%; line-height: 45px; } #adver { padding: 45px 0 0 0; } #adver .center { width: 70%; height: 53px; margin: -10px 0 0 -35%; } #adver .search, #adver .button { height: 45px; font-size: 18px; } .sm-visible { display: block; } #tour .center h2 { font-size: 30px; } #tour .center p { font-size: 15px; } #tour figure { width: 49.2%; } #headline { padding: 45px 0 0 0; } #headline hgroup { left: 8%; } #headline h2 { font-size: 26px; } #headline h3 { font-size: 14px; } .list { width: 100%; padding: 0 20px } .list h2 { font-size: 25px; } .about p,.about address { font-size: 15px; }}/*在小于480 像素的屏幕，微小屏幕，更低分辨率的手机*/@media (max-width: 479px) { #header, #header .center, #header .link { height: 45px; } #header .logo, .xs-hidden, .sm-hidden, .sidebar { display: none; } #header .link { width: 100%; line-height: 45px; } #header .link li { width: 25%; } #adver { padding: 45px 0 0 0; } #adver .center { width: 80%; height: 48px; margin: -10px 0 0 -40%; } #adver .search, #adver .button { height: 40px; font-size: 16px; } .sm-visible { display: block; } #footer .bottom, #footer .version { font-size: 13px; } #tour .center h2 { font-size: 26px; } #tour .center p { font-size: 14px; } #tour figure { width: 99%; } #headline hgroup { left: 8%; } #headline h2 { font-size: 20px; } #headline h3 { font-size: 12px; } #headline { padding: 45px 0 0 0; } .list { width: 100%; padding: 0 20px } .list h2 { font-size: 20px; } .about p,.about address { font-size: 14px; }}如果您觉得有用，记得在下方点赞、关注、留言，小编会定期奉 上更多的惊喜哦，您的打赏支持才是小编继续努力的动力，么么哒。
每日分享在学习过程中总结的学习经验，学习笔记，笔试题，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以学习为目的，每天阅读一篇文章，了解身边的技术，陪有梦想的人一起成长！
扫一扫
1408
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
