2018-10-10工作日报

上午

1.开始“我的积分”页面的实现,由于与原页面只更换了头部,考虑先把原页面的逻辑理清楚。

2.window.changeHref()方法和window.hrefParam属性是在index.ejs里定义的,是处理与客户端交互时使用的。

3."我的积分"页面将原先页面复用过来,并且删除了未用到的代码,如下图待修改样式和调整结构:
在这里插入图片描述

下午

开始研究flex布局在安卓上的兼容性问题:

4.flex布局兼容性写法
此文中使用的兼容性前缀,正好我们项目中用到的autoprefixer会自动在css样式中添加,据文章称支持安卓2.3以上,待验证正确性。

5.在前端兼容性查询网站caniuse上找到一张关于flex布局兼容性的图,
在这里插入图片描述
由上图所见,真的不管怎么设置前缀,安卓4.4以下确实会直接挂,不过这都8102年了,4.3是13年的技术,真的有安卓机还在用4.3吗?
吐槽归吐槽,问题还是要继续解决。

6.考虑使用手机来进行兼容性调整,电脑开启无线热点,手机连上,再访问电脑的本地服务器,即可看到项目的界面。192.168.137.1为我本机的IP地址。

7.我们项目里gulp-autoprefixer的配置如下代码:

.pipe(autoprefixer({
      browsers: ['Android >= 4.0','iOS 7']		
    }))

我看了一下,已经支持display:-webkit-box的写法了,也就是说是支持从2.3开始的安卓版本了。问题基本解决。
在这里插入图片描述

8.页面中出现了图片被挤到压缩的情况,实质上本不应该这样,应当是滚动条。调了很久,设置了flex:0;取消缩放后解决问题。
在这里插入图片描述

9.css兼容问题css移动端的兼容性问题 (适配问题)

猜你喜欢

转载自blog.csdn.net/qq_36620428/article/details/82997722