響應式佈局——媒體查詢

響應式佈局容器

響應式需要一個父級做為佈局容器，來配合子級元素實現變化效果。

原理就是在不同螢幕下，通過媒體查詢來改變這個佈局容器的大小，再改變裡面子元素的排列方式和大小，從而實現不同螢幕下，看到不同的頁面佈局和樣式變化。

一般情況下的響應式尺寸劃分

• 超小螢幕（手機，小於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)">