本文记录下一些对于微信小程序兼容h5踩过的坑。
不知道大家在写小程序的时候有没有遇到以下情况：在微信开发者工具以及真机上测试的时候都没有问题，但是用浏览器打开可能会出现布局错乱的情况。针对这种情况，首先想到的就是媒体查询啦。代码如下：
@media only screen and (min-width:700px){
html{
font-size: 13px;
height: 100vh;
overflow: hidden;
}
body {
max-width: 375px;
max-height: 667px;
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
border: solid 1px #e5e5e5;
box-shadow: 0 5px 15px -5px rgba(0,0,0,.5);
}
}
直接给他设置个屏幕大于700px的时候宽高不让他撑起来（max-width、max-height），然后再修饰加工一波，屏幕居中起来。 上面的设置好整体的大小了。但是先页面里免不了你哪个地方用了fixed布局，那完了，芭比Q了，可能在h5上乱飞起来了。这时候我的解决方案是用css的计算属性calc()，先来简单介绍一波这个属性：
calc() 函数用于动态计算长度值。
- 需要注意的是，运算符前后都需要保留一个空格，例如：
width: calc(100% - 10px)；- 任何长度值都可以使用calc()函数进行计算；
- calc()函数支持 "+", "-", "*", "/" 运算；
- calc()函数使用标准的数学运算优先级规则；
回归正题，怎么解决h5上fixed定位乱飞的问题呢？代码如下：
@media only screen and (min-width:700px){
.batch-share{
bottom: calc((100vh - 574px) / 2) !important;
top: unset !important;
}
}
100vh是屏幕的高度，此处除以2有个好处：直接除以2找到屏幕中间的位置，然后再调。对比一下我对于类名为batch-share的元素原来的操作：
.batch-share{
position: fixed;
display: flex;
flex-direction: column;
align-items: center;
top: 82%;
border-radius: 50%;
width: 90rpx;
height: 90rpx;
font-size: 20rpx;
line-height: 110%;
}
原来我进行的是fixed定位，top设置的82%。关于上面calc中的数据，是调位置的时候一点点找到的合适位置。 这个可能不是最好的解决方案，期待大佬评论补充！
