移动端H5开发填坑

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在移动端上会有偏差,需要手动去调整(初次遇到,也可能是未知部分影响)

(未完待续)

猜你喜欢

转载自www.cnblogs.com/longflag/p/10653933.html