欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS3中的Media Queries學(xué)習(xí)筆記

wlog   發(fā)布時(shí)間：2016-05-23 11:50:26   作者：冰點(diǎn)   我要評(píng)論
CSS3中的Media Queries經(jīng)常被用來制作前端的響應(yīng)式設(shè)計(jì)頁面,這里整理了一份CSS3中的Media Queries學(xué)習(xí)筆記,包括IE8中的兼容問題解決,需要的朋友可以參考下

一、Media Queries 支持的屬性
2016523115225102.png (483×314)

2016523115243298.png (423×217)

二、關(guān)鍵字
and - 結(jié)合多個(gè)媒體查詢 not - 排除某種制定的媒體類型 only - 用來定某種特定的媒體類型

三、引用樣式示例

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <link rel="stylesheet" media="all" href="style.css" />   
  2. <link rel="stylesheet" media="screen and (min-width:980px)" href="desktop.css" />   
  3. <link rel="stylesheet" media="screen and (min-width:768px) and (max-width:980px)" href="pad.css" />   
  4. <link rel="stylesheet" media="screen and (min-width:480) and (max-width: 768px)" href="phone.css" />   
  5. <link rel="stylesheet" media="screen and (max-width:320px)" href="small.css" />  

四、內(nèi)聯(lián)樣式示例

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @media screen and (min-width: 980px) {   
  2.     //css code  
  3. }   
  4. @screen and (min-width:768px) and (max-width:980px) {   
  5.     //css code  
  6. }   
  7. @screen and (min-width:480) and (max-width: 768px) {   
  8.     //css code  
  9. }   
  10. @screen and (max-width:320px) {   
  11.     //css code  
  12. }   
  13.   
  14. @media screen and (max-device-width: 480px) {   
  15.     //max-device-width等于480px  
  16. }   
  17. @media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) {   
  18.     //設(shè)備寬高比   
  19. }   
  20. @media all and (orientation:portrait) {   
  21.     //豎屏   
  22. }   
  23. @media all and (orientation:landscape) {   
  24.     //橫屏   
  25. }  


五、I8的兼容性問題解決
問題根源：
在項(xiàng)目的CSS文件中采用了media這東東來根據(jù)視窗的大小自動(dòng)調(diào)整布局，但是，但是IE8及以下版本瀏覽器不支持CSS3 media queries，也就是@media screen and (max-width: 900px) 里面的css代碼沒有執(zhí)行，

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @media screen and (max-width: 900px) {   
  2.   ...   
  3. }  

這如何是好啊，網(wǎng)上倒是有不少人提出解決方法，最簡單的方法就是：
IE8和之前的瀏覽器不支持CSS3 media queries，你可以在頁面中添加css3-mediaqueries.js來解決這個(gè)問題。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!--[if lt IE 9]>  
  2.     <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>  
  3. <![endif]-->  

原來如此，還挺簡單嘛，結(jié)果大失所望啊，項(xiàng)目中怎么試怎么就不行呢，還望試過可行的同仁點(diǎn)撥點(diǎn)撥啊，沒辦法只能采用另一種稍微復(fù)雜些的方法，也是從網(wǎng)上學(xué)來，這里要考慮兩個(gè)問題，一是只有IE8及其低版本才做此處理，二是只有瀏覽器縮小到某一個(gè)大小范圍后才做此處理。方法如下：
原理：采用jquery，其實(shí)不懂，會(huì)用就行，然后在html中根據(jù)需要來改變對(duì)應(yīng)的CSS文件
解決方法：
在所有頁面的共用js文件后面添加如下代碼：

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. /*Adjust the layout in IE8 and lower than IE8 when the browser is narrow*/  
  2. function processLowerIENavigate()   
  3. {   
  4.    var isIE = document.all ? 1 : 0;   
  5.    if (isIE == 1)   
  6.    {   
  7.        if(navigator.userAgent.indexOf("MSIE7.0") > 0 || navigator.userAgent.indexOf("MSIE 8.0") > 0)   
  8.        {     
  9.     //  var doc=document;    
  10.            var link=document.createElement("link");   
  11.            link.setAttribute("rel", "stylesheet");   
  12.            link.setAttribute("type", "text/css");   
  13.            link.setAttribute("id", "size-stylesheet");   
  14.            link.setAttribute("href", "");   
  15.      
  16.            var heads = document.getElementsByTagName("head");   
  17.            if(heads.length)   
  18.                heads[0].appendChild(link);   
  19.            else  
  20.                document.documentElement.appendChild(link);   
  21.   
  22.            document.write("<script type='text/javascript' src='jquery.min.js'></script>");   
  23.            document.write("<script type='text/javascript' src='media_screen.js'></script>");   
  24.      
  25.        }   
  26.    }    
  27. }   
  28. var lowerIE8 = processLowerIENavigate();   
  29.   
  30. media_screen.js文件內(nèi)容如下，直接從網(wǎng)上copy：   
  31. function adjustStyle(width) {   
  32.     width = parseInt(width);   
  33.     if (width < 902) {   
  34. //alert("<900");   
  35. //alert(width);   
  36.         $("#size-stylesheet").attr("href", "navigateLowerIE8.css");   
  37.     } else {   
  38.       // alert(">900");   
  39.   //alert(width);   
  40.        $("#size-stylesheet").attr("href", "");    
  41.     }   
  42. }   
  43.   
  44. $(function() {   
  45.     adjustStyle($(this).width());   
  46.     $(window).resize(function() {   
  47.         adjustStyle($(this).width());   
  48.     });   
  49. });  

navigateLowerIE8.css文件就是IE8其低版本瀏覽器在縮小時(shí)的頁面布局了。OK，一切都確實(shí)搞定。

相關(guān)文章

  • CSS3 @media的基本用法總結(jié)

    這篇文章主要給大家介紹了關(guān)于CSS3 @media的基本用法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用CSS3具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)
    2019-09-10

  • 詳解使用CSS3的@media來編寫響應(yīng)式的頁面

    這篇文章主要介紹了詳解使用CSS3的@media來編寫響應(yīng)式的頁面,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-11-01

  • CSS3 media queries + jQuery實(shí)現(xiàn)響應(yīng)式導(dǎo)航

    這篇文章主要介紹了CSS3 media queries + jQuery實(shí)現(xiàn)響應(yīng)式導(dǎo)航的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
    2016-09-30

  • css3 media 響應(yīng)式布局的簡單實(shí)例

    下面小編就為大家?guī)硪黄猚ss3 media 響應(yīng)式布局的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-08-03

  • css3media響應(yīng)式布局實(shí)例

    下面小編就為大家?guī)硪黄猚ss3media響應(yīng)式布局實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-07-08

  • 詳解CSS3 Media Queries中媒體屬性的使用

    這篇文章主要介紹了CSS3 Media Queries中媒體屬性的使用,文章中還以一個(gè)響應(yīng)式設(shè)計(jì)的例子作為補(bǔ)充講解,需要的朋友可以參考下
    2016-02-29

  • 使用 CSS3 中@media 實(shí)現(xiàn)網(wǎng)頁自適應(yīng)的示例代碼

    這篇文章主要介紹了使用 CSS3 中@media 實(shí)現(xiàn)網(wǎng)頁自適應(yīng)的示例代碼,代碼簡單易懂，非常不錯(cuò)對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2020-03-24

最新評(píng)論