一、 meta viewport
在head标签内部加上这段代码
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=, maximum-scale=, minimum-scale=">
该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。
width=device-width: 让当前viewport宽度等于设备的宽度
user-scalable=no: 禁止用户缩放
initial-scale= 设置页面的初始缩放值为不缩放
maximum-scale= 允许用户的最大缩放值为minimum-scale= 允许用户的最小缩放值为二、 媒体查询（响应式)
格式一：
@media （）and（）{}
//满足（）里的条件，就执行大括号里css的样式
举例：
<style>
@media (max-width:320px){
body{
background:red;
}
}
@media (min-width:321px) and (max-width:320px){
body{
background:orange;
}
}
@media (min-width:376px) and (max-width:425px){
body{
background:green;
}
}
@media (min-width:426px) and (max-width:768px){
body{
background:blue;
}
}
@media (min-width:769px){
body{
background:grey;
}
}
</style>
格式二并举例：
<link rel="stylesheet" href=""media="(max-width:320px)">
注意点：
1、link标签会下载好，但是是否生效取决于media的条件；
2、有PC端经验，就有移动端经验，只是多了一个media查询；
3、通过添加多个css样式来满足不同的屏幕宽度；
三、动态 rem 方案
1rem等于根元素html的font-size的值。
在<script>标签加入这段代码：
<script>
var pageWidth = ('<style>html{font-size:' + pageWidth + 'px;}</style>')
</script>
现在，根元素 html 的 font-size 的大小为 页面的宽度 pageWidth 。
也就是说： 现在 ，1 rem === html 的 font-size === pageWidth。
因此，就可以利用 rem 来动态的控制页面的大小。
作者：_zyw_
链接：
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
<meta http-equiv="Cache-Control" content="no-transform" /> pc 移动添加
<meta http-equiv="Cache-Control" content="no-SiteAPP" /> pc 移动添加
<link rel="alternate" media="only screen and(max-width: 640px)" href="http://手机网址/" > pc添加
<meta name="mobile-agent" content="format=xhtml;url=http://手机网址/"> pc添加
wap对应pc关系 <link rel="canonical" href="http://pc网址/" > 移动添加
声明 <meta name="applicable-device"content="pc"> pc添加
<meta name="applicable-device"content="mobile"> 移动添加
最后去站长后台进行适配关系的添加，上面有正则格式
