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