首页uniapp 项目移动端字体适配

uniapp 项目移动端字体适配

时间: 2023-09-02 10:15:52 浏览: 167

在移动端字体适配方面，可以使用rem单位来实现。rem单位是相对于html元素的字体大小来计算的，因此只需要设置html元素的字体大小，其他元素的字体大小就可以根据html元素的字体大小进行自适应。步骤如下： 1. 在index.html中设置html元素的字体大小： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>uniapp</title> <style> html { font-size: calc(100vw / 3.75); /* 100vw表示页面宽度的100%，3.75是设计稿的宽度 */ } </style> </head> <body> <div id="app"></div>  <script src="/static/js/manifest.js"></script> <script src="/static/js/vendor.js"></script> <script src="/static/js/app.js"></script> </body> </html> ``` 2. 在样式文件中使用rem单位进行字体设置： ```css /* 根据设计稿中的字体大小设置html元素字体大小 */ html { font-size: 16px; } /* 使用rem单位进行字体设置 */ p { font-size: 0.875rem; /* 14px */ } h1 { font-size: 1.5rem; /* 24px */ } ``` 这样就可以实现移动端字体的自适应了。需要注意的是，在设置html元素的字体大小时，需要根据设计稿的宽度进行计算，一般情况下设计稿的宽度为375px。

阅读全文