1.问题描述：
我用vue做的是一个官网，现在要适配移动端。就如大部分的移动端页面那样，顶部有个固定定位的导航栏。我们这个官网在pc状态时也是有的，但是固定定位(position: fixed;)在pc时是没问题的，切换成移动端后，css里写了position: fixed但并没有生效，div还是会跟着滚动轴的滑动而被卷起来。
2.解决问题：
①父级及以上盒子去掉transform属性。百度后发现大多的解决方式就是在父或上级或上级上级 … 找有没有设置transfrom这个css属性，如果有的话 把它的值改为none 或者 直接去掉再 或者 加上display：inline。【我的项目里没有出现这个问题，如果你的也是，那么继续往下看】
参考链接：position fixed 固定定位失效问题及解决方案
②加上box-sizing: border-box(改为IE怪异盒模型) 或者 设置宽度120%，去掉padding属性。我也是无意间看到的，我觉得设置宽度120%不太正常，可以选择使用使用ie盒模型试试。【我的项目里没有出现这个问题，如果你的也是，那么继续往下看】
参考链接：vue移动端中position:fixed失效，会跟着页面滚动
③设置html中head标签中的meta注解。通常情况下，我们适配移动端时，我们都会在头中写
但是我就用的这个导致的position:fixed不生效的，vue脚手架项目本身有一个meta，用它本身的就无问题，具体如下
//示例
//代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>XXXX官网</title>
<link rel="shortcut icon" href="./static/img/favicon.ico" type="image/x-icon">
</head>
<script >
//测试环境
window.apiURL = 'XXXXXXXX';
//测试环境
</script>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
3.回顾问题
如果不是我多此一举的话，也不会出现这个问题的哈，这就是踩坑的过程吧。
最后我还想说一句↓
未来总是充满希望！ 加油。
![没救了! 困扰程序员一辈子的5个魔咒, 改掉比登天还难！[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)