css響應式網頁如何實現媒體查詢

這篇文章將為大家詳細講解有關css響應式網頁如何實現媒體查詢，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

手寫響應式網頁，具體技術點有：

1.聲明viewport元標簽（響應式網頁必備）
       <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
       width - viewport的寬度 height - viewport的高度
       initial-scale - 初始的縮放比例
       minimum-scale - 允許用戶縮放到的最小比例
       maximum-scale - 允許用戶縮放到的最大比例
       user-scalable - 用戶是否可以手動縮放

2.頁面中的圖片都要用響應式圖片 如:
        img{width:50% (該圖片在父元素中的占比) max-width:50%;(在父容器中的占比，并且不能超過圖片自身的大小--防止圖片無限放大產生失真)} 

3.使用流式布局（布局元素使用浮動或行內快）

 4.避免使用絕對尺寸如px，使用相對單位em或rem；
        em：相對于父元素的字體大小
        rem：相對于根目錄的字體大小

5.使用CSS3MediaQuery技術（最重點）
        Media：指瀏覽網頁的設備，如：screen(pc/pad/phone/watch/print/tv/projection/tty(針式打印機/cmd)/braille(讀屏軟件)...)
        MediaQuery：查詢出當前瀏覽設備類型、分辨率、色彩深度、方向(landscape/portait)等等特性。
        CSS3 MediaQuery：根據當前瀏覽設備的特性有選擇性執行某些CSS樣式，而忽略其他一些樣式。
       具體做法有兩種：
       1.有選擇性的執行某些外部CSS文件 
         <link media="screen and (min-width:768px) and (max-width:991px)" rel="stylesheet" href="css/pad.css"/>
         特點：只有媒體查詢結果為真的外部樣式文件才會被執行，否則不執行！不足：即使不符合當前瀏覽設備的外部樣式文件，也會被瀏覽器請求！ 
       2.有選擇性的執行某段CSS中的部分樣式
          @media screen and (min-width:768px) and (max-width:991px) {
                 .box {
                      margin: 6px;
                       ...
                      }
            }

關于“css響應式網頁如何實現媒體查詢”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。