接下来我们通过 HTML/CSS 来创建一个简单的响应式网页。CSS 代码
*{box-sizing:border-box; }/* body 样式*/body{font-family:Arial;margin:0; }/* 标题*/.header{padding:80px;text-align:center;background:#1abc9c;color:white; }/* 标题字体加大*/.headerh1{font-size:40px; }/* 导航*/.navbar{overflow:hidden;background-color:#333; }/* 导航栏样式*/.navbara{float:left;display:block;color:white;text-align:center;padding:14px20px;text-decoration:none; }/* 右侧链接*/.navbara.right{float:right; }/* 鼠标移动到链接的颜色*/.navbara:hover{background-color:#ddd;color:black; }/* 列容器*/.row{display: -ms-flexbox;/* IE10*/display:flex; -ms-flex-wrap:wrap;/* IE10*/flex-wrap:wrap; }/* 创建两个列*//* 边栏*/.side{ -ms-flex:30%;/* IE10*/flex:30%;background-color:#f1f1f1;padding:20px; }/* 主要的内容区域*/.main{ -ms-flex:70%;/* IE10*/flex:70%;background-color:white;padding:20px; }/* 测试图片*/.fakeimg{background-color:#aaa;width:100%;padding:20px; }/* 底部*/.footer{padding:20px;text-align:center;background:#ddd; }/* 响应式布局 - 在屏幕设备宽度尺寸小于 700px 时, 让两栏上下堆叠显示*/@mediascreenand (max-width: 700px){.row