响应式布局——媒体查询

响应式布局——媒体查询

响应式布局容器

响应式需要一个父级做为布局容器，来配合子级元素实现变化效果。

原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

一般情况下的响应式尺寸划分

• 超小屏幕（手机，小于768px）：设置宽度为100%
• 小屏幕（平板，大于等于768px）：设置宽度为750px
• 中等屏幕（桌面显示器，大于等于992px）：设置宽度为970px
• 大屏幕（大桌面显示器，大于等于1200px）：设置宽度为1170px

<style type="text/css">
    .container{
        height: 100px;
        background-color: red;
        margin: 0 auto;
    }
    @media screen and (max-width: 767px){
        .container{
            width: 100%;
        }
    }

    @media screen and (min-width: 768px){
        .container{
            width: 750px;
        }
    }

    @media screen and (min-width: 992px){
        .container{
            width: 970px;
        }
    }

    @media screen and (min-width: 1200px) {
        .container{
            width: 1170px;
        }
    }
</style>

也可通过引入外部css文件时设置

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