手机端H5开发,屏幕不同尺寸适配方法(屏幕自适应)

最近在接触手机端H5开发,然后设计师将设计图发给我们进行开发,对于第一次接触详细设计图开发的我来说,觉得很新颖毕竟一直没有接触这么正规的设计图(字体样式,颜色,大小等等),之后再开发的时候,就遇到了一个难处。因为设计图是按照px设计,所以以同等大小设计的样式会影响整个页面样式。
与此同时发现手机端需要rem适配,所以开发时要将设计图中的px转换为rem来设计

下面的这段代码就是px转换rem的换算

我们需要设计图的大小:

  • 如:750px*1500px

将下面的这段代码放到你的css页面内,其他写样式的时候换算就ok啦

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

最后换算结果为:10px=0.1rem

同时再介绍下字体引入的方法(先将字体包放到一个文件内)

/* 引入字体 */
@font-face {
	font-family:'SourceHanSansSC-Medium';//字体命名
	src: url('../fonts/SourceHanSansSC-Medium.otf');//引入字体
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值