通过媒体查询加载对应css的两种常用方法

方法一：用媒体查询加载对应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)"/>

方法二：直接媒体查询然后写样式

@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%;
    }
}