CSS3學習筆記--media query 響應式佈局

時間 2019-12-13

標籤 css3 css 學習筆記 media query 響應佈局欄目 CSS 简体版

原文原文鏈接

語法：@media screen and (min-width: 320px) and (max-width : 479px)javascript

media屬性後面跟着的是一個 screen 的媒體類型（上面說過的十種媒體類型之一）。而後用 and 關鍵字來鏈接條件（其餘關鍵字還有 not， only，看字面你們能理解，就很少說。），而後括號裏就是一個媒體查詢語句，稍微懂點css的同窗都能看懂，這個條件語句意思是在大於320小於479 的分辨率下所激活的樣式表。css

通常大於960的顯示器均可以用默認樣式而沒必要在媒體查詢裏判斷了。有一種狀況除外，就是高像素比的終端，好比 iphone4以上的retina屏，一個iphone5的小小的屏幕（iphone的屏幕是真小啊），他的分辨率居然達到了1136*640，幾乎等於一個筆記本的分辨率。你在這樣小的物理顯示界面打開一個網頁，他用1136的分辨率來顯示，結果就是全部元素小的可憐。html

在面對這種分辨率精細的終端，咱們有另一個條件查詢語句 device-pixel-ratio。java

好比例子裏的web

@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)瀏覽器

就是判斷終端的像素比是2的話，所渲染的樣式。iphone4以上像素比是2，高分辨率Andriod設備像素比是1.5，例子裏只有像素比爲2的查詢，1.5的或者其餘比例方法同樣，前面用的是幾種瀏覽器的私有屬性，最後一種是通用屬性。app

演示代碼：iphone

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <title>響應式佈局</title>
        <style type="text/css">
            div {
                background: #ccc;
                width: 100%;
                height: 400px;
                border: 2px solid #4183C4;
            }
            span {
                display: block;
                float: left;
                background: #007902;
                color: #fff;
                line-height: 25px;
                padding: 10px;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                border: 2px solid #fff;
            }
            @media screen and (max-width: 400px) {
                span {
                    width: 100%;
                }
            }
            @media screen and (min-width: 400px) and (max-width: 800px) {
                span {
                    width: 50%;
                }
            }
            @media screen and (min-width: 800px) {
                span {
                    width: 25%;
                }
            }
        </style>
        <script type="text/javascript">
            window.onload = function() {
                var divCon = document.createElement('div');
                var span;
                for (var i = 0; i < 5; i++) {
                    span = document.createElement('span');
                    span.innerHTML = "內容塊-" + i;
                    divCon.appendChild(span);
                }
                document.body.appendChild(divCon);
                //alert(divCon.offsetWidth);
            }
        </script>
    </head>
    <body>
        <h3>若是大於屏幕寬度小於400px就一列顯示,400px-800px兩列顯示，800像素以上四列顯示</h3>
    </body>
</html>

View Code