rem 自适应屏幕解决方案

1.使用的长度单位rem、vw

rem
这个单位代表根元素的 font-size大小(一般来说是html元素的font-size)。当用在根元素的font-size上面时 ,它代表了它的初始值。

vw
1vw就是屏幕宽度的百分之一,窗口放大或缩小1vw的值也会变化。

2.使用方法

假设UI设计稿的宽度是1920px,html的font-size想要设置为20px,设以rem为单位font-size大小为x。得出100vw/x=1920/20,则x=100vw/96,具体情况就按照UI的设计图计算一下。
示例:

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

这样页面的所有宽度都会随着屏幕的变化而变化了

如果担心屏幕太大,导致大屏幕中的字体会变得特别大,这时候就可以用媒体查询

@media screen and (min-width: 1920px){
	html{
		font-size:20px;
	}
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值