博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
移动端H5开发填坑
阅读量:6583 次
发布时间:2019-06-24

本文共 1298 字,大约阅读时间需要 4 分钟。

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

(未完待续)

转载于:https://www.cnblogs.com/longflag/p/10653933.html

你可能感兴趣的文章
Navicat for MySQL 使用SSH方式链接远程数据库(二)
查看>>
poj 1274The Perfect Stall
查看>>
HDU 4720 Naive and Silly Muggles (外切圆心)
查看>>
垂死挣扎还是涅槃重生 -- Delphi XE5 公布会归来感想
查看>>
Ubuntu上运行Blender,在控制台上查看运行结果
查看>>
怎么检查网站的死链接呢?
查看>>
scrapy爬虫框架实例一,爬取自己博客
查看>>
React是UI的未来吗?
查看>>
中国人社部:2018年15个省(区、市)调整最低工资标准
查看>>
手把手教你通过Thrift 访问ApsaraDB for HBase
查看>>
MacOS安装MySQL 报错
查看>>
Java知识点总结(反射-反射操作泛型)
查看>>
Vue+webpack+Element 兼容问题总结
查看>>
《软技能》读书笔记(下)
查看>>
textarea文域高度自适应
查看>>
go语言renderer包代码分析
查看>>
【Scala谜题】成员声明的位置
查看>>
git最最最最...常用命令
查看>>
复杂recyclerView封装库
查看>>
使用Redis构建文章投票网站(Java)
查看>>