在移动端开发时,有时对 button
同时设置了 height
及相等的 line-height
,文本会出现偏下不居中的情况。解决方案:是让其使用默认的 line-height: normal
就可以了 继续阅读
月份:2020年1月
canvas 中如何实现文字换行?canvas 中如何实现 letter-space 效果?
在 canvas
使用过程中,我们经常会遇到到把文字换行的情况,canvas
要实现换行,并没有 css
中使用样式换行那么方便,但 canvas
提供测量工具函数 measureText
给你测出每个文字的宽度,然后自己用它来按需切割文本为多行,然后按需把多行一行一行地绘画到 canvas 上实现换行效果。在 canvas 要实现 letter-space
也没有太好的办法,但在 stackoverflow
中,有人提出一种比较有效的近似的办法, 继续阅读
使用 vw 结合 scss / sass 超简单实现页面自适应 / 响应式布局
最近做大屏幕开发时需要把 1920px
的设计稿做成响应式布局,因为是要在同一个 Vue 项目里面同时实现移动端 + PC 端大屏幕的自适应,移动端的设计稿是 750px
,大屏幕的设计稿则是 1920px
,项目中默认使用了 750px
的淘宝 flexible.js
的 rem 的自适应的解决方案,那么 PC 端大屏幕端呢?现需要同时实现 PC 端大屏幕端自适应。让 UI 把设计稿改为 750 是不可能的。之前就了解过 vw
/ vh 的自适应解决方案,但还未真正在项目中使用过, 继续阅读
使用淘宝 flexible.js / amfe-flexible.js 的 Rem 解决方案部分手机适配不了问题
使用淘宝 flexible.js
/ amfe-flexible.js
的 Rem
解决方案部分手机会出现适配不了问题。网上已经有了解决方案,但很多人并不知道是什么原因导致的。导致此问题的出现主要是用户的手机使用了自定义的字体,导致我们动态设置 html
根元素的 font-size
的值后,与实际的效果 font-size
值不一致。为什么呢?因为某些自定义的字体,假如你设置根元素的 font-size
为 41.4px
,但其实这种字体是偏大的,结果其实际在页面上看到的效果可能是 42px
。这样就会导致:假如页面屏宽为 414px
,但我们设置页面宽度为的 10rem
为 420px
,页面效果就是会偏大, 继续阅读