CSS（十二）--响应式布局
1.响应式布局
- 网页可以根据不同的设备或窗口大小呈现出不同的效果
- 通过响应式布局，可以使一个网页适用于所有设备
- 响应式布局的关键就是媒体查询，通过媒体查询，可以为不同的设备，或设备的不同状态来分别设置样式
1.2媒体查询
- 语法：@media 查询规则{}
媒体类型：
- all：所有设备
- print：打印设备（打印出来为对应样式）
- screen：带屏幕的设备
- speech：屏幕阅读器
@media all{
body{
background-color:red;
}
}
@media all,screen{
body{
background-color:red;
}
}
@media only screen{ //only的使用主要是为了兼容一些老版本的浏览器
body{
background-color:red;
}
}
媒体特性
width：视口的宽度
height：视口的高度
min-width:视口的最小宽度(视口大于指定宽度时生效)
max-width:视口的最大宽度(视口小于指定宽度时生效)
@media (width:500px){
}
断点
- 样式切换的分界点，我们称其为断点，也就是网页的样式会在这个点时发生变化
常用的断点： - 小于768：超小屏幕，max-width=768px；（手机等移动设备）
- 大于768：小屏幕 ，min-width=768px;
- 大于992：中屏幕 min-width=992px；
- 大于1200：大屏幕 min-width-1200px；
表示断点范围
- and (与)
@media (min-width:768px) and (max-width:992){
}
- ，（或）
@media (max-width:768px) ， (max-width:992){
}
- not（非）
@media not (max-width:768px) ， (max-width:992){
}
2.响应式网页练习
编写规范
- 移动端优先
- 渐进增长
css
a {
color: #fff;
text-decoration: none
}
a:hover {
color: #c5c4c4
}
.top-bar-wrapper {
background-color: #000
}
.top-bar {
max-width: 1200px;
margin: 0 auto;
height: 48px;
padding: 0 14px;
display: flex;
align-items: center;
justify-content: space-between
}
.left-menu:active .nav {
display: block
}
.left-menu .menu-icon {
width: 18px;
height: 48px;
position: relative
}
.left-menu .menu-icon li {
width: 18px;
height: 1px;
background-color: #fff;
position: absolute;
transform-origin: left center;
transition: .5s
}
.left-menu .menu-icon li:nth-child(1) {
top: 18px
}
.left-menu .menu-icon li:nth-child(2) {
top: 24px
}
.left-menu .menu-icon li:nth-child(3) {
top: 30px
}
.left-menu .menu-icon:hover li:nth-child(1) {
transform: rotateZ(40deg)
}
.left-menu .menu-icon:hover li:nth-child(2) {
opacity: 0
}
.left-menu .menu-icon:hover li:nth-child(3) {
transform: rotateZ(-40deg)
}
.left-menu .nav {
display: none;
position: absolute;
top: 48px;
left: 0;
bottom: 0;
right: 0;
background-color: #000;
padding-top: 60px
}
.left-menu .nav li {
width: 80%;
margin: 0 auto;
border-bottom: 1px solid #202020
}
.left-menu .nav li a {
line-height: 44px;
font-size: 16px;
display: block
}
.left-menu .nav li:last-child a {
display: inline-block;
margin-right: 6px
}
.left-menu .nav li span {
color: #fff;
font-size: 14px
}
@media only screen and (min-width:768px) {
.left-menu {
order: 2;
flex: auto
}
.left-menu .nav {
display: flex;
position: static;
padding: 0;
justify-content: space-around
}
.left-menu .nav li {
width: auto;
border-bottom: none
}
.left-menu .nav li a {
line-height: 48px
}
.left-menu .nav li span {
display: none
}
.left-menu .menu-icon {
display: none
}
.logo {
order: 1
}
.user-info {
order: 3
}
}
/*# sourceMappingURL=./meitu.css.map */
html
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/reset.css"> <link rel="stylesheet" href="./css/meitu.css"> <link rel="stylesheet" href="//at.alicdn.com/t/font_2348889_zkkd0te2c0c.css"> </head> <body> <div class="top-bar-wrapper"> <!-- header --> <div class="top-bar"> <!-- 左侧菜单 --> <div class="left-menu"> <!-- 创建菜单图标 --> <ul class="menu-icon"> <li></li> <li></li> <li></li> </ul> <!-- 创建菜单 -->
<ul class="nav">
<li><a href="#">手机</a></li>
<li><a href="#">美容仪器</a></li>
<li><a href="#">配件</a></li>
<li><a href="#">服务支持</a></li>
<li><a href="#">企业网站</a></li>
<li>
<a href="#">
<i class="iconfont">

</i>
</a>
<span>搜索 Meitu.com</span>
</li>
</ul>
</div>
<!-- logo -->
<h1 class="logo">
<a href="/">美图手机</a>
</h1>
<!-- 用户信息 -->
<div class="user-info">
<a href="#">
<i class="iconfont"></i>
</a>
</div>
</div>
</div>
