设计响应式网页,PC端和移动端的样式兼容性,很让人挠头,最常见的就是文字垂直不居中,而且苹果手机和安卓手机下表现也不尽相同,往往苹果手机是垂直居中的,但在安卓机上字却靠上了,总是差那么一像素,应该是安卓对line-height兼容有问题。
办法一
父容器不要设置高度,line-height不设置具体数值,通过padding调整内边框。
line-height: normol; padding: 8px 0; display:inline-block;
方法二
把字体大小、定位、间距、高度和边框线整体都放大2倍,然后再缩小一倍:
transform: scale(0.5); transform-origin: 0 0;
个人推荐方法一。
本站文章大部分为原创,用于个人学习记录,可能对您有所帮助,仅供参考!
我的微信
微信号已复制
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!