1、首先，打开html编辑器，新建html文件，例如：index.html。2、在index.html中的标签中，输入meta代码：。3、浏览器运行index.html页面，此时PC端的网页在移动端上也能自动适配。
两种思路：
一、响应式网站（PC、PAD、手机等自适应）
在HTML源文件中的头部head加入：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">具体meta标签的含义自己可以查一下，学习一下，根据自己的情况设定。
给对应的屏幕尺寸写单独的代码css样式表里写：@media screen and (min-width:640px){这里面写手机端标签的代码，例如，body{font-size:18px}， banner{width:640px}}，根据自己的需求调整下字体大小，尺寸等。
注：@media标签要放在PC样式的下方，不然模式识别前面的标签会导致PC也显示这个样式。
响应式网站用框架比较方便，对于各个屏幕的大小需要做之前好好规划，应用百分比让网站自适应，缺点但不利于SEO，显示内容与PC、PAD基本都是一致的内容。
二、用JS识别做网站跳转
这种方法比较灵活，可以做一套自己想要的手机网站，比如做成APP的形式
1.加入js代码控制网站跳转：
var browser_class = navigator.userAgent; console.log(browser_class); var browser_class_name1 = browser_class.match("Mobile"); var browser_class_name2 = browser_class.match("mobile"); var location_url = window.location.href; console.log(location_url); if (browser_class_name1 != null || browser_class_name2 != null){ if (location_url.match("wap") == null){ window.location.href="
http://m.baidu.com/"; } } else { if (location_url.match("3g") != null || location_url.match("wap") != null){ window.location.href="
http://m.baidu.com/"; } }2.单独做一个手机网站，域名指向m.baidu.com
这种方式比较灵活，PC网站已经做好了，改响应式比较费劲，这种方法也挺好，也利于SEO
2017-08-21
