仿站，如何让手机和PC，两个页面，融合成一个响应式页面

也就是2合1

具体怎么做呢？

本质的要求是

1.pc和M加载不同的css和js
2.pc和M展现不同的html

有一篇文章是这样的

他提供了三种方法
1.给link标签，加上id，获取这个id元素，修改link的css属性。

<link rel="stylesheet" type="text/css" id="links" href="../css/m_wuqinglan.css"/>
        <script type="text/javascript">
            window.onload=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.在link中增加media属性，根据media属性，进行加载不同的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.直接在css中写媒体查询

直接媒体查询然后写样式
@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%;
    }
}
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

显然，css的加载我们解决了，那js和html呢

OK 现在实现，不同的页面尺寸加载不同的js

1.根绝屏幕尺寸，加载不同的js

<script type="text/javascript">  
// 根据屏幕尺寸  
if (screen && screen.width > 480) {  
document.write('<script type="text/javascript" charset="utf-8" src="123.js"><\/script>');  
}  
  
// userAgent判断  
if( /Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)){  
document.write('<script type="text/javascript" charset="utf-8" src="123.js"><\/script>');  
}  
</script>  

2.根据不同的手机useagent加载不同的js

<script type="text/javascript">  
function browserRedirect() {  
var sUserAgent = navigator.userAgent.toLowerCase();  
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";  
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";  
var bIsMidp = sUserAgent.match(/midp/i) == "midp";  
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";  
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";  
var bIsAndroid = sUserAgent.match(/android/i) == "android";  
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";  
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";  
// document.writeln("您的浏览设备为：");  
if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {  
  
// alert("手机浏览！");  
  
document.write('<script type="text/javascript" charset="utf-8" src="123.js"><\/script>');  
} else {  
  
// alert("PC浏览！");  
document.write('<script type="text/javascript" charset="utf-8" src="123.js"><\/script>');  
}  
}  
browserRedirect();  
</script>  

如何在pc和手机，呈现不同的html

1.如果使用响应式，设置display：none。难免会出现冗余代码。
2.不使用响应式的方法，有没有呢？

除非使用SPA单页写法，否则，只能通过display：none实现

最终已经实现：代码打包如下，点击下载*
https://files.cnblogs.com/files/cn-oldboy/JS根据不同的宽度，实现不同的jscssmeta和html展示.zip