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

            <!-- 创建菜单 -->
            <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">
                            &#xe8aa;
                        </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">&#xe6f0;</i>
            </a>
        </div>
    </div>
</div>