快速将pc和移动端网站合并成响应式网站

一、使用媒体查询加载不同css文件

<link rel="stylesheet" type="text/css" href="m/css/style.css" media="screen and (max-width:800px)"><!--小于800px时加载移动端样式-->

<link rel="stylesheet" type="text/css" href="/style/css/home_header.css" media="screen and (min-width: 800px)"><!--大于800px时加载pc端样式-->
<link rel="stylesheet" type="text/css" href="/style/css/style.css" media="screen and (min-width: 800px)"><!--大于800px时加载pc端样式-->

<link rel="stylesheet" type="text/css" href="/style/css/lightbox.css" media="screen and (min-width: 800px)"><!--大于800px时加载pc端样式-->

二、控制显示内容

<style type="text/css">

/*移动端pc端媒体查询*/


.pc_show{ /*div里是pc端布局*/
display: none;
}
.phone_show{/*div里是移动端布局*/
display: none;
}


@media (min-width: 300px) {
.phone_show {
        display: block;
    }
    .pc_show{
    display: none;
    }
       
    }
@media (min-width: 700px) {
    .pc_show {
         display: block;
    }
    .phone_show{
    display: none;
    }
}

</style>

三、布局

<div class="pc_show">此处放pc布局</div>

<div class="phone_show">此处放移动端布局</div>