HTML5------------------------------媒體查詢的介紹與使用--------------------------------

1.媒體查詢？

響應式佈局的方法之一，使咱們的網頁適配於各類設備。

 

2.爲何學習媒體查詢？？？

 

隨着科技的發展，終端設備趨於多元化，尤爲是手機端的興起，具備不一樣尺寸和分辨率的設備。咱們原先給PC端設計的網頁，就是爲了

讓網頁更好的適應屏幕的大小顯示在屏幕上。

 

3.學習的bootstrap就是對媒體查詢的封裝

 

4.媒體查詢的寫法和格式？

   

   媒體查詢的核心是：

        .當屏幕改變到必定的大小，網頁中的某些模塊的屬性發生改變

 

（1）CSS3（第一種寫法）

     

 

  

 

 

 

（2）外部link（第二種寫法）

       <link rel="stylesheet" media="screen and (min-width:1200px)"  href="連接css">

 

 

5 @media 媒體查詢關鍵字

            設備類型  screen 網頁和手機、平板

                      print 打印機

                      all 全部的設備

 

            設備的特性 width  height  表明頁面的大小

                    device-width  device-height 表明設備可見的大小

 

                    max-width:; 最大寬度，也就是說小於這個寬度則怎麼怎麼樣

                    min-width:; 最小寬度，也就是大於這個寬度怎麼怎麼樣