需求场景是在一个使用绝对定位布局的页面中,动态渲染一个可以滑动的子模块。
开发的时候在电脑 Chrome 上面调试没问题,安卓手机和常规 IOS 版本测试了也没问题,但是由于苹果最近更新了新的系统版本(14),在新版本上出现了滚动滑动不了的问题。
“IPHONE / H5 / IOS 14 版本滚条 / 滑动失效问题”继续阅读
需求场景是在一个使用绝对定位布局的页面中,动态渲染一个可以滑动的子模块。
开发的时候在电脑 Chrome 上面调试没问题,安卓手机和常规 IOS 版本测试了也没问题,但是由于苹果最近更新了新的系统版本(14),在新版本上出现了滚动滑动不了的问题。
“IPHONE / H5 / IOS 14 版本滚条 / 滑动失效问题”继续阅读
在 UI 切图过程中,页面往往由三个部分组成,头部、内容和底部。当页面的内容高度不够撑满屏幕,底部(footer)就跟着内容浮动上来了,小屏幕由于高度有限看不出来异常,但如果是大屏的话,底部下面变会多出很多空白,非常影响美观。
头部使用 position: sticky;
吸顶,再使用盒子(main
)来包住内容(container > content
)和底部(footer
),这个盒子设置最小高度为除头部外的剩余屏幕高度:min-height: calc(100vh - 50px);
,盒子里面使用弹性布局(flex: 1 1 auto;
)让内容区域自动撑开,而底部保持不变(flex: 0 0 auto;
),这样就有了内容不够时底部自动吸底,内容足够时底部自动下移的效果。
“CSS 实现内容高度不够的时候底部(footer)自动贴底”继续阅读
husky + lint-staged + prettier + eslint + commitlint
git commit
, git push
。“通过 eslint stylelint htmllint 规范前端项目代码”继续阅读
组件名为多个单词,并且用连接线(-)连接,避免与 HTML 标签冲突,并且结构更加清晰。
示例:
// 反例 export default { name: 'item' } // 正例 export default { name: 'page-article-item' }
“基于 Vue 的前端开发规范”继续阅读
“浮动元素引起的问题和解决办法”继续阅读
“CSS3 Flex布局(容器)”继续阅读
“CSS伪类选择器active模拟JavaScript点击事件”继续阅读