響應式佈局

時間 2019-12-23

標籤響應佈局简体版

原文原文鏈接

什麼是響應式佈局

響應式就是網頁內容會隨着訪問它的視口及設備的不一樣而呈現不一樣的樣式javascript

如何適配各類瀏覽器

從最簡單的‘基本’作起，再逐步擴充，即漸進加強，這是比較簡單的作法，而優雅降級則麻煩不少。
基本是相對的，首先要肯定平臺，若是有較多用戶再用IE9，那麼得考慮IE9的基礎，它支持什麼特性，
若是用戶可能是Android2，那麼也要考慮相似的問題，不一樣平臺的'基礎'體驗是相差很大的。css

若是瀏覽器的開發成本超過了瀏覽器的用戶創造的收益，那麼就不爲該瀏覽器開發特殊的版本html

響應式的一些方法

圖片

img{
     /*最大隻能夠自身那麼大*/
     max-width: 100%;
   }

若是把圖片設置成width:100%，那麼圖片寬度就是父級的寬度，若是父級寬度比圖片自己寬，那麼圖片就會被拉伸java

但單獨設置max-width有些弊端，若是視口寬度過大，圖片仍然會被拉伸，這時須要利用媒體查詢chrome

媒體查詢

媒體查詢在媒體知足某一特定的條件下，改變佈局，值得注意的是媒體查詢的斷點應該跟流行的設備無關
斷點，就是某個寬度的臨界點，斷點應由內容和設計自己決定瀏覽器

例子，嘗試改變瀏覽器大小試試效果ide

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style type="text/css">
                body{
                  background: grey;
                }
                @media screen and (min-width: 320px){
                  body{
                    background: green;
                  }
                }
                @media screen and (min-width: 550px){
                  body{
                    background: yellow;
                  }
                }
                @media screen and (min-width: 768px){
                  body{
                    background: orange;
                  }
                }
                @media screen and (min-width: 960px){
                  body{
                    background: red;
                  }
                }
            
        </style>
    </head>
    <body>
        
    </body>
</html>

<link media="screen and (orientation: portrait) and (min-width: 800px), projection />

媒體查詢能夠用上and, not, or等關鍵詞進行判斷
逗號分隔的是每一個不一樣的媒體，projection（投影機），沒說明具體特性，表示任何投影機

看了這麼多，也是時候具體瞭解下媒體查詢了佈局

語法：flex

@media 媒體類型 and (設備特性) {樣式代碼}

設備類型

all	全部設備
screen	電腦顯示器
print	打印用紙或打印預覽視圖
handheld	便攜設備
tv	電視機類型的設備
speech	語音和音頻合成器
braille	盲人用點字法觸覺回饋設備
embossed	盲文打印機
projection	各類投影設備
tty	使用固定密度字母柵格的媒介，如電傳打字機和終端

設備特性

width 視口寬度
height 視口高度
device-width 渲染表面的寬度，即設備屏幕的寬度
device-height 渲染表面的高度，即設備屏幕的高度
orientation 設備方向是水平仍是垂直
aspect-ratio 視口的寬高比，16:4 -> aspect-ratio: 16/4
color 顏色組分的位深，min-color -> 設備至少支持16位深
color-index 設備顏色查找表的條目數，值必須是數值，且不能爲負
monochrome 單色幀緩衝中表示每一個像素的位數，值必須是整數，不能爲負
resolution 屏幕或打印分辨率
scan 針對電視的逐行掃描和隔行掃描, progressive 逐行；interlace 隔行
grid 設備基於柵格仍是位圖

響應式小小小案例

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                color: #fff;
            }

            header,footer{
                min-height: 3.75rem;
                background: #000;
            }
            nav{
                position: relative;
            }
            
            nav ul{
                background: skyblue;
                min-height: 3.75rem;
                line-height: 3.75rem;
                list-style: none;
            }
            .menu{
                background: skyblue;
                min-height: 3.75rem;
                line-height: 3.75rem;
                list-style: none;
                width: 100%;
                flex-direction: column;
                position: absolute;
                z-index: 1000;
            }
            
            .hidden{
                display: none;
            }
            

            li{
                padding: 0 1rem;
            }
            li:hover{
                background: brown;
                cursor: pointer;
            }
            .flex{
                display: flex;
                
            }
            .justify-content{
                justify-content: space-around;
            }


            main{
                min-height: 28.9375rem;
                background: brown;
            }

            aside{
                min-height: 25rem;
                background: #546358;
                flex: 1;
            }
            aside ul{
                flex-direction: column;
                flex: 1;
            }
            aside ul li{
                height: 1.875rem;
                line-height: 1.875rem;
                margin: 1rem 0;
            }
            section{
                flex: 6;
            }
            article{
                min-height: 400px;
                width: 100;
                background: #754358;

            }


            /*根據須要隱藏顯示類*/
           @media screen and (max-width: 1366px){
            .max-1008-display-none{

                display: block;
            }
            .max-768-none{
                display: none;
            }
           }
           @media screen and (max-width: 992px){
            .max-1008-display-none{
                display: none;
                 
            }
            .max-768-none{
                display: none;
            }
           }

           @media screen and (max-width: 768px){
            .max-768-none{
                display: block;
            }
           }
            
        </style>
    </head>
    <body>
        <header>
            <h1>響應式網頁</h1>
            <nav>
                <ul class="flex menu max-768-none" id="menu">
                    <li id="caidan">菜單</li>
                    <li class="hidden">導航1</li>
                    <li class="hidden">導航1</li>
                    <li class="hidden">導航1</li>
                    <li class="hidden">導航1</li>
                    <li class="hidden">導航1</li>
                </ul>
            </nav>
            <nav>
                <ul class="flex justify-content">
                    <li>導航1</li>
                    <li>導航2</li>
                    <li>導航3</li>
                    <li>導航4</li>
                    <li>導航5</li>
                </ul>
            </nav>
        </header>
        <main class="flex">
            <aside class="max-1008-display-none">
                <ul class="flex">
                    <li>項目1</li>
                    <li>項目1</li>
                    <li>項目1</li>
                    <li>項目1</li>
                    <li>項目1</li>
                    <li>項目1</li>
                    <li>項目1</li>
                </ul>
            </aside>
            <section>
                <h2>主體內容</h2>
                <article>
                    
                </article>
            </section>
        </main>
        <footer></footer>


        <script type="text/javascript">
            let caidan = document.getElementById('caidan');
            let menu = document.getElementById('menu');

            caidan.onmouseenter = function(){
                let hiddens = document.getElementsByClassName('hidden');
                for(let i = 0; i<hiddens.length; ++i){
                    hiddens[i].style.display = "block";
                }
            }
            menu.onmouseleave = function(){
                let hiddens = document.getElementsByClassName('hidden');
                for(let i = 0; i<hiddens.length; ++i){
                    hiddens[i].style.display = "none";
                }
            }
        </script>
    </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。