最近在接触手机端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');//引入字体
}