使用 rem 解决 vantui 在 ipad 上的字体大小自适应问题

更新日期: 2019-09-26 阅读次数: 9931 字数: 262 分类: CSS

移动设备网页上使用 vantui 开发 form 提交界面,在手机上表现良好,但是到了 ipad 等平板设备上时,就会发现字体非常小,严重影响用户的浏览和操作。

解决方法就是替换 vantui 的默认 font size 。

我们希望得到的效果是,屏幕越大,对应的字体越大。

当然这是针对功能页面而言,对应内容页面来说,其实没有太大的问题。

ipad 上 rem 的使用

html {
	font-size: calc(100vw/3.75);
}

.button {
	font-size: 0.16rem;
}

什么是 vw

  • vw 是视窗的宽度
  • vh 是视窗的高度

视窗是指浏览器窗口,还是屏幕的总体大小?

例如

@media screen and (min-width: 750px) and (max-width: 1079px) {
		.van-button {
			font-size: 0.14rem !important;
		}

		.van-cell {
			font-size: 0.12rem !important;
			line-height: 0.24rem !important;
		}

		.van-field__label {
			width: 0.7rem !important;
		}

		.van-picker__cancel, .van-picker__confirm {
			font-size: 0.12rem !important;
		}

		.van-picker-column {
			font-size: 0.12rem !important;
		}

		#cd-menu-trigger {
			font-size: 0.15rem !important;
		}

		#cd-menu-trigger .cd-menu-icon {
			width: 0.13rem !important;
		}

		.van-field__error-message {
			font-size: 0.1rem !important;
		}
}

关于作者 🌱

我是来自山东烟台的一名开发者,有敢兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式