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

移动设备网页上使用 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 聊聊， 查看更多联系方式