移动端H5开发填坑

2022-09-17 13:37:18

1.0.5像素边框

　　由于UI的样式要求，在项目中所有的线全部都得是0.5像素，所以在网上找到了一个比较好用的写法，就是比较麻烦

.best3_title{
  height: 48px;
  font-size: 14px;
  font-weight: bold;
  color: #000000;
  line-height: 48px;
  margin: 0 16px;
  position: relative;/* 本体必加属性 */
}
.best3_title:after{
  position: absolute;
  left: 0;
  right: 0;
  content: "";
  display: block;
  bottom: 0;
  border-bottom: 1px solid #e7e7e7;/*你需要的线*/
  transform: scaleY(0.5);/* 当线是横线时使用Y如果是竖线则需要改成X*/
  width: 100%;
}

2.关于Vue项目中自己用div拼成的select

　　在使用div+ul+li拼出当前的select时需要注意，一般UI会要求在下拉候选项出来的时候出现蒙层，并保持下层部分无法滚动，经过多次试验，需要将蒙层定位设置为fixed铺满屏幕，其次将蒙层下内容区使用overflow:hidden截取并设置高度为100vh在内容区有margin的情况则需要同时设置margin为0代码如下：

(1)蒙层样式：

.flow_all{
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  z-index:998;
  background: #333;
  opacity: 0.4;
}

(2)js修改动态修改

//显示蒙层时
document.getElementById(‘region_report‘).style.height=‘100vh‘;
document.getElementById(‘region_report‘).style.marginBottom=‘0px‘
document.getElementById(‘region_report‘).style.overflowY=‘hidden‘;

//蒙层消失时
document.getElementById(‘region_report‘).style.height=‘auto‘
document.getElementById(‘region_report‘).style.marginBottom=‘44px‘
document.getElementById(‘region_report‘).style.overflowY=‘scroll‘;

3.使用固定line-heigh在移动端上会有偏差，需要手动去调整（初次遇到，也可能是未知部分影响）

(未完待续)

移动端H5开发填坑

码农公寓

相关文章