CSS（十二）--响应式布局

1.响应式布局
- 1.2媒体查询
  - 媒体类型：
  - 媒体特性
    - 断点
    - 表示断点范围
2.响应式网页练习

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">  <div class="top-bar">  <div class="left-menu">  <ul class="menu-icon"> <li></li> <li></li> <li></li> </ul>