響應式佈局

響應式

    什麼是響應式佈局？

        響應式網頁，自適應網頁，指的是一個網頁會自動根據用戶瀏覽設備不同，自動改變佈局，可以被pc端，pad，phone正常瀏覽。

    如何編寫響應式佈局？

        第一步聲明viewport元標籤：

            視口是什麼？

                虛擬的窗口，用來盛放網頁內容

            如何定義？

<meta name="viewport" content="width=device-width,initial-scale=1">

            解釋：

                width = device-width  視口寬度等於設備寬度

                initial-scale    視口初始化時縮放的比例，1代表不縮放

            提出的原因：

                早期3G手機爲了瀏覽大尺寸的網頁，只能強行修改頁面，導致文字，圖片，超鏈接變得很小、

                IOS提出的概念，用於盛放網頁內容，尺寸大小可以指定，超過部分滑動網頁解決

        第二步：使用流式佈局

                方法：使用float:left，display:inline-block

        第三步：所有的容器文字，圖片都要使用相對的尺寸，不使用絕對的尺寸

                方法：不使用px，使用百分比，em等

        第四步(重點)：使用CSS3 Media Query技術

                什麼是？：

                    1、Media    指的是瀏覽網頁的設備 

                        screen(PC/PAD/PHONE/PRINT/TV)

                    2、Media Query    查詢出當前瀏覽網頁的設備類型，以及特性(解析度，對比度，尺寸，手持的方向等)

不同而選擇性執行某些CSS代碼，而忽略另外一些

                    實現方法：

                        1、根據媒體查詢結果執行不同的外部CSS文件

              <link media = "screen and (min-width:768px) and (max-width:991px)" rel = "stylesheet" href="css/xx.css">

                        2、根據媒體查詢結果執行不同的CSS片段(常用)

             @media screen and (min-width:768px) and (max-width:991px){

                    ...

              }

             解析：如果寬度在範圍內，就執行{}內的代碼