响应性的情况是，根据画面的大小显示适当的页面布局
全屏时的页面效果为以下：
在此插入图像说明
缩小屏幕时的页面效果
代码附件
！ doctypehtmlhtmlheadmetacharset=' utf-8 ' title/titlelinkrel=' style sheet ' type=' text/CSS ' href=' CSS/rest cece headbodyheaderdivclass=' top ' nav img src=' images/logo.png ' title=' '/nav img src=' images/logo ' png ' title=lilia href=' '首页/a/lilia href=' '首页/a/Li/uldivclass=' menu ' a href div/headerdivclass=' main ' nava navnavahref='2. png '/a/nav/divsectionulliahref=' # ' img src=' images/1.jpg ' title=' '/a/lilia href=' img src=' images/4.jpg ' title=' '/a/lilia href ' img src=' images/6.jpg ' title=' '/a/lilia href=' # # 3.jpg ' title=' '/a/lilia href=' # ' img src=' images/6.jpg ' title=' '/a/lilia href
这里有线片header{height: 250px； width: 100%； ack ground : URL (./images/top-BG.png ) no-repeat center； 背景大小： cover； }.top{height: 50px； 后台： rgba (0、0、0、0.5 )； 显示： Flex； }.top a{color: #fff； font-size: 16px； }.top nav， top ul， top .login{flex: 1； }.top nav{height: 50px； }.top nav img{height: 100%； }.top ul{display: flex； align-items3360中心； justify-content 3360 space-between； }.top .login{display:flex； justify-content: flex-end； align-items3360中心； }.top.logina { padding-right :10 px； }.top.menu { align-self : center； 显示：无； flex: 1； }.main{display: flex； }.main nav{display: flex； padding: 10px； }.mainnav:nth-child(2) div:nth-child(2)2) {padding-left: 10px； }.main nav img{width: 100%； }section ul{display: flex； flex-wrap: wrap； justify-content 3360 space-around； }section ul li{width: 23%； 玛格琳- bottom : 10px； border : 1px固态# CCC； box-shadow: 0 0 6px #333； } sectionulliimg { display : block； width: 100%； } @ mediaonlyscreenand (最小宽度：320 px ) and (最大宽度3360720 px ).topul ) display:none； }.top .menu{display: block； order: -1； }.main{flex-wrap: wrap； }section ul li{width: 45%； }键码附上：
@ mediaonlyscreenand (最小宽度：320 px ) and (最大宽度3360720 px ).topul ) display:none； }.top .menu{display: block； order: -1； }.main{flex-wrap: wrap； }section ul li{width: 45%； }