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

平定網站建設公司創新互聯公司,平定網站設計制作，有大型網站制作公司豐富經驗。已為平定1000+提供企業網站建設服務。企業網站搭建\成都外貿網站建設公司要多少錢，請找那個售后服務好的平定做網站的公司定做！

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

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

新聞名稱：css響應式網頁如何實現媒體查詢
文章URL：http://vcdvsql.cn/article42/gdgiec.html

成都網站建設公司_創新互聯，為您提供軟件開發、小程序開發、定制開發、網站策劃、企業網站制作、面包屑導航

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯