CSS響應式:根據分辨路加載不同CSS的幾個方法,親測可用
阿新 • • 發佈:2017-12-13
響應 col 但是 max-width width media 總結 屏幕 link
有時候你需要把同一個頁面在手機和pc同時打開,其中有一個辦法就是判斷不同分辨路加載不同的css
小編總結了幾種分別加載css的方法:
1.比較復雜的使用js判斷加載不同css (親測可用)
但是這種方法只有最開始的時候會判斷,如果你拖動瀏覽器大小是不會發生改變的(當然如果喜歡拖著玩的話)
1 <link rel="stylesheet" type="text/css" id="links" href="../css/m_wuqinglan.css"/> 2 <script type="text/javascript"> 3 window.onload=function(){ 4 var sc=document.getElementById("links"); 5 if(window.screen.width>1024) //獲取屏幕的的寬度 6 { 7 sc.setAttribute("href","../css/pc_wuqinglan.css"); //電腦 8 } 9 else{ 10 sc.setAttribute("href","../css/m_wuqinglan.css"); //手機 11 } 12 } 13 </script>
2.比較簡單帥氣的用媒體查詢加載對應css
會隨著你的拖動窗口大小而執行
//其中 media 是媒體查詢的範圍,當最大寬度是1200,這裏就是手機平板一下的尺寸 加載手機css ,反之電腦css
<link rel="stylesheet" type="text/css" href="../css/m_wuqinglan.css" media="screen and (max-width:1200px)"/> <link rel="stylesheet" type="text/css" href="../css/pc_wuqinglan.css" media="screen and (min-width:1201px)"/>
3.當然還有最刺激的方式,那就是直接媒體查詢然後寫樣式
1 @media only screen and (max-width: 1024px) { 2 .div1{ 3 width:50%; 4 } 6 .div2{ 7 width:50%; 8 } 10 .div3 { 11 width:50%; 12 } 13 } 14 15 @media only screen and (min-width: 1024px) { 16 .div1{ 17 width:100%; 18 } 20 .div2{ 21 width:100%; 22 } 24 .div3 { 25 width:100%; 26 } 27 }
當然要做ie兼容的寶貝們,媒體查詢是不支持ie9以下的(暫時是這樣),當然可以依靠第三方的兼容方式
CSS響應式:根據分辨路加載不同CSS的幾個方法,親測可用