移动端字体点大小转像素转rem

最新推荐文章于 2023-09-01 16:56:40 发布

清酒白粥

最新推荐文章于 2023-09-01 16:56:40 发布

阅读量453

点赞数

分类专栏： h5

本文链接：https://blog.csdn.net/qq_36030737/article/details/82979628

版权

h5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.ctrl+k把字体的单位改为像素

2.如果用px那直接除以倍数就好，我用的less计算

//less代码

// 手机端适配
@media (min-width: 320px){html{font-size: 32px;} }
@media (min-width: 360px){html{font-size: 36px;} }
@media (min-width: 375px){html{font-size: 37.5px;} }
@media (min-width: 384px){html{font-size: 38.5px;} }
@media (min-width: 414px){html{font-size: 41.4px;} }
@media (min-width: 448px){html{font-size: 44.8px;} }
@media (min-width: 480px){html{font-size: 48px;} }
@media (min-width: 512px){html{font-size: 51.2px;} }
@media (min-width: 544px){html{font-size: 54.4px;} }
@media (min-width: 576px){html{font-size: 57.6px;} }
@media (min-width: 608px){html{font-size: 60.8px;} }
@media (min-width: 640px){html{font-size: 64px;} }
@media (min-width: 750px){html{font-size: 75px;} }

// 750的设计图原稿
@c:75rem;


//使用时，44为设计图上的字体尺寸，直接转换，不需要自己再计算。
font-size: 44/@c;

//所有像素一样直接使用
height: 90/@c;
line-height: 90/@c;
padding:0 15/@c 0 15/@c;