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

本文轉載自查看原文 2014-02-17 16:21 9337 Web 前端-CSS

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

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

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

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

比如例子里的

@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的或者其他比例方法一樣，前面用的是幾種瀏覽器的私有屬性，最后一種是通用屬性。

演示代碼：

<!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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CSS3 媒體查詢@media 查詢（響應式布局） css3media響應式布局 CSS3 響應式布局： @media (min/max-width:***) @font-face CSS3 響應式布局： @media (min/max-width:***) @font-face css3響應式布局教程—css3響應式響應式入門之-Media Query 響應式web設計之CSS3 Media Queries css3響應式布局教程使用CSS3的@media來編寫響應式的頁面 CSS3與頁面布局學習筆記（四）——頁面布局大全(負邊距、雙飛翼、多欄、彈性、流式、瀑布流、響應式布局)