首页vue使用rem适配

vue使用rem适配

时间: 2023-07-05 15:04:00 浏览: 97

Vue可以使用rem适配来实现不同设备之间的页面自适应。下面是具体的步骤： 1. 在index.html中设置页面的根字体大小： ```html <html> <head> <meta charset="utf-8"> <title>My App</title> <script> // 设置根字体大小 document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'; </script> </head> <body> <div id="app"></div>  </body> </html> ``` 上面代码中，将根字体大小设置为屏幕宽度的10分之一。 2. 在App.vue中设置样式： ```css /* 假设设计稿宽度为750px */ html { font-size: 75px; } .box { width: 10rem; /* 相当于设计稿中的100px */ height: 5rem; /* 相当于设计稿中的50px */ } ``` 上面代码中，将根字体大小设置为75px，在样式中使用rem作为单位。 3. 在组件中使用样式： ```vue <template> <div class="box"></div> </template> <style> .box { width: 10rem; height: 5rem; } </style> ``` 上面代码中，组件中使用样式时，也可以使用rem作为单位。这样就可以使用rem适配来实现Vue页面的自适应了。

阅读全文