响应式布局--媒体查询

介绍

响应式布局，简而言之，就是一个网站能够兼容多个终端—而不是每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。其目的是为用户提供更加舒适的界面和更好的用户体验。

优缺点

优点

• 面对不同分辨率设备灵活性强
• 能够快捷解决多设备显示适应问题

缺点

• 兼容各种设备工作量大，效率低下
• 代码累赘，会出现隐藏无用的元素，加载时间加长

基本实现

1. CSS中的Media Query（媒体查询）：
   设备宽高：device-width，device-height
   渲染窗口的宽和高：width，height
   设备的手持方向：orientation
   设备的分辨率：resolution
2. 使用方法
   外联

<link rel="stylesheet" href="./style.css" media="only screen and (max-width:640px)">

内嵌样式

<style>
        @media screen and (min-width:640px) {
            body {
                background-color: yellow;
            }
        }
    </style>

代码示例

* {
    padding: 0%;
    margin: 0%;
}

.header,
.container,
.footer {
    margin: 10px auto;
}

.header {
    height: 100px;
    background-color: pink;
}

.left,
.main,
.right {
    background-color: yellow;
}

.footer {
    height: 100px;
    background-color: aqua;
}


/* 宽度大于960 */

@media screen and (min-width:960px) {
    .header,
    .container,
    .footer {
        width: 960px;
    }
    .left,
    .main,
    .right {
        float: left;
        height: 500px;
    }
    .left,
    .right {
        width: 200px;
    }
    .main {
        margin-left: 5px;
        margin-right: 5px;
        width: 550px;
    }
    .container {
        height: 500px;
    }
}


/* 宽度大于600并且小于960 */

@media screen and (min-width:600px) and (max-width:960px) {
    .header,
    .container,
    .footer {
        width: 600px;
    }
    .left,
    .main {
        float: left;
        height: 400px;
    }
    .right {
        display: none;
    }
    .left {
        width: 160px;
    }
    .main {
        width: 435px;
        margin-left: 5px;
    }
    .container {
        height: 400px;
    }
}


/* 宽度小于600 */

@media screen and (max-width:600px) {
    .header,
    .container,
    .footer {
        width: 400px;
    }
    .right,
    .left {
        width: 400px;
        height: 100px;
    }
    .main {
        margin-top: 10px;
        width: 400px;
        height: 200px;
    }
    .right {
        margin-top: 10px;
    }
    .container {
        height: 420px;
    }
}

参考资料：

• https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media
• https://blog.csdn.net/sinat_17775997/article/details/89087348