CSS响应式：根据分辨率加载不同CSS的几个方法，亲测可用

有时候你需要把同一个页面在手机和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以下的（暂时是这样），当然可以依靠第三方的兼容方式

 

posted @ 2017-12-13 15:29  熊一乐  阅读(12392)  评论(0)  编辑  收藏  举报