·您當前的位置:主頁 > 技術教程 > Html5技術 >

                          [css3]css3媒體查詢@media在響應式web設計中的應用

                          時間:2019-02-12 19:06阿酷
                          [css3]css3媒體查詢@media在響應式web設計中的應用

                          調用方式1:

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

                          1. 注:media="screen and (min-width: 768px)" 
                          2.  
                          3. ---screen-------------------------------- 
                          4. 引用 screen (缺省值),提交到計算機屏幕; 
                          5. print, 輸出到打印機; 
                          6. projection,提交到投影機; 
                          7. aural,揚聲器; 
                          8. braille,提交到凸字觸覺感知設備; 
                          9. tty,電傳打字機 (使用固定的字體); 
                          10. tv,電視機; 
                          11. all,所有輸出設備 
                          12.  
                          13. ---min-width: 768px--------------------- 
                          14. min-width 屏幕最小寬度 

                          調用方式2:

                          1. <style> 
                          2.  // 阿酷TONy 
                          3.    @media screen and (min-width: 768px) { 
                          4.    .class { background: blue; line-height:50px; } 
                          5.    } 
                          6.    </style> 

                           

                          熱門文章推薦

                          請稍候...