css使用媒体查询实现响应式布局

1、使用js判断加载不同css

但是这种方法只有最开始的时候会判断，如果你拖动浏览器大小是不会发生改变的

 

<link rel="stylesheet" type="text/css" id="links" href="../css/m_wuqinglan.css"/>
        <script type="text/javascript">
            window.οnlοad=function(){ 
                var sc=document.getElementById("links"); 
                    if(window.screen.width>1024) //获取屏幕的的宽度 
                    { 
                        sc.setAttribute("href","../css/pc_wuqinglan.css"); //电脑
                    } 
                    else{ 
                        sc.setAttribute("href","../css/m_wuqinglan.css"); //手机
                    } 
            }
        </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、直接媒体查询然后写样式

 

@media only screen and (max-width: 1024px) {
    .div1{
        width:50%;
    }
    .div2{
        width:50%;
    }
    .div3 {
        width:50%;
    }
}

@media only screen and (min-width: 1024px) {
    .div1{
        width:100%;
    }
    .div2{
        width:100%;
    }
    .div3 {
        width:100%;
    }
}

 

 

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。