Flex(03)---媒体查询

Unit Six: 媒体查询

1.响应式布局

网页可以根据不同的设备或窗口大小呈现不同的效果。
- 与移动端不同点：
  - 移动端是专门开发一个网页，通过移动页面进行布局。
  - 响应式布局是自适应屏幕，并未专门开发一个网页，还是由原网页进行变化。
使用响应式布局，可以使用一个网页适用于所有设备，节约开发成本。
- 缺点：不太符合移动端用户操作逻辑。

2.媒体查询`@media{}`

通过媒体查询，可以为不同的设备或设备不同状态来设置CSS样式。

语法

@media 查询规则{
    css样式；
}

媒体类型：
- all:所有设备
- print：打印设备
- screen：带屏幕的设备
- speech：屏幕阅读器
媒体查询语法：
- , 或
- only 只有
- and 且
- not 非

3. 媒体特性

min-width：视口最小宽度（视口大于指定宽度时生效）
max-width：视口最大宽度（视口小于指定宽度时生效）
断点：样式切换的分界点，网页样式会在这个点发生变化。
- 常用断点：
  - 超小屏幕：max-width=768px;
  - 小屏幕：min-width=768px;
  - 中屏幕：min-width=992px;
  - 大屏幕：min-width=1200px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @media only screen  and (max-width :500px){
            body{
                background-color:tan;
            }
        }
        @media only screen and (min-width:500px) and (max-width:800px){
            body{
                background-color:#bfa;
            }
        }
        @media only screen and (min-width:800px){
            body{
                background-color:red;
            }
        }
    </style>
</head>
<body>
    
</body>
</html>

4. 设计原则

移动端优先
渐进增强
Bootstrap可以辅助设计。

5.美图响应式项目网站

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./meitu/css/reset.css">
    <link rel="stylesheet" href="./meitu/fa/css/all.min.css">
    <link rel="stylesheet" href="./meitu.css">
</head>
<body>
    <div class="bar">
    <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="http://" target="_blank" rel="noopener noreferrer">手机</a></li>
                <li><a href="http://" target="_blank" rel="noopener noreferrer">美容仪器</a></li>
                <li><a href="http://" target="_blank" rel="noopener noreferrer">配件</a></li>
                <li><a href="http://" target="_blank" rel="noopener noreferrer">服务支持</a></li>
                <li><a href="http://" target="_blank" rel="noopener noreferrer">企业网站</a></li>
                <li><a href="http://" target="_blank" rel="noopener noreferrer">
                    <i class="fas fa-search"></i>
                </a>    
                    <span>搜索 Meitu.com</span>
                </li>
            </ul>              
        </div>
  
        <div class="logo"><a href="http://" target="_blank" rel="noopener noreferrer"></a></div>
        <div class="user-info">
            <a href="http://" target="_blank" rel="noopener noreferrer">
            <i class="fas fa-user"></i>
            </a>
        </div>
    </div>
</div>
</body>
</html>

less代码

a,
span,
i {
    text-decoration: none;
    color: #fff;
  
    &:hover {
        color: rgb(155, 153, 153);
    }
}
  
.bar{
    background-color: #000000;
}
  
.top-bar {
    max-width: 1000px;
    margin: 0 auto;
    height: 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #000000;
    padding: 0 14px;
}
  
.left-menu {
    &:active {
        .nav {
            display: block;
        }
    }
  
    .menu-icon {
        // background-color: #bfa;
        width: 18px;
        height: 48px;
        position: relative;
  
        li {
            width: 18px;
            height: 1px;
            background-color: #ffffff;
            position: absolute;
            transform-origin: left center;
            transition: 1s;
        }
  
        li:nth-child(1) {
            top: 18px;
        }
  
        li:nth-child(2) {
            top: 24px;
        }
  
        li:nth-child(3) {
            top: 30px;
        }
  
        &:hover {
            li:nth-child(1) {
                transform: rotateZ(42deg);
            }
  
            li:nth-child(2) {
                //隐藏
                opacity: 0;
            }
  
            li:nth-child(3) {
                transform: rotateZ(-42deg);
            }
        }
    }
  
    .nav {
        display: none;
        padding-top: 50px;
        position: absolute;
        top: 64px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        background-color: #000000;
  
        li {
            width: 90%;
            margin: 0 auto;
            border-bottom: solid 1px rgba(255, 255, 255, 0.2);
  
            a {
                display: block;
                font-size: 14px;
                line-height: 44px;
            }
  
            &:last-child {
                a {
                    display: inline;
                }
            }
        }
    }
}
  
.logo {
    a {
        display: block;
        width: 122px;
        height: 32px;
        background-image: url(./meitu/dff63979.sprites-index@2x.png);
        background-size: 400px 400px;
    }
}
  
  
//设置媒体查询
@media only screen  {
    @media (min-width:768px){
    .left-menu{
        order: 2;
        justify-content: space-between;
        flex-grow: 1;   
        .menu-icon{
            display:none;
        }
        .nav{
            display:flex;
            position:static;
            padding:0px;           
            li{
                width:auto;
                border:none;
                a{
                    line-height:48px;
                }
            }
            span{
                display:none;
            } 
        }
    }
  
    .logo {
        order: 1;
    }
      
    .user-info {
        order: 3;
    }
}
}

PREVIOUSInferential Statistics(10)-ANOVA

NEXTInferential Statistics(09)-R[05]-Multiple Regression

Unit Six: 媒体查询

1.响应式布局

2.媒体查询@media{}

3. 媒体特性

4. 设计原则

5.美图响应式项目网站

2.媒体查询`@media{}`