How to set 750 width in uniapp

In front-end development, adaptation is a very important issue. Because various screen sizes and different devices will cause the page to display differently. In uniapp we can solve this problem by setting 750 width.

Where does the 750 width come from?

750 width is a common design draft size in mobile development. Under normal circumstances, designers will set the width of the UI design draft to 750, and the height will be determined based on the actual situation. Why is the width of the design draft 750? This is because the minimum resolution of many mobile devices is 750. For example, the resolution of the iPhone XR is 828*1792, which basically meets the ratio of 1:1.78.

How to set 750 width in uniapp?

Before developing uniapp, you need to install the uni-app plug-in. After the installation is successful, start writing code.

1. In the main.js file, add the following code:

import 'uni-percentage-support'

With this line of code, we introduce the uni-percentage-support plug-in into uniapp, thus The page will be adjusted accordingly.

2. In the App.vue file, add the following code:

<style>
  html{
    font-size:50vw;
  }
</style>

Here, we use vw (window percentage unit) instead of px. Among them, 1vw is equal to 1% of the window width. Since we need to adapt based on the width of 750, we set the font size of the root element html to 50vw, so that the page can be adapted based on the width of 750.

3. In the page that needs to be adapted, write the following code:

<view style="width:100%;height: 100%;background-color:#f5f5f5;">
  <view style="width:37.5rem;height:3rem;margin: 0 auto;background-color:#409EFF;border-radius:5px;"></view>
</view>

Here, we set the width of the container to 100% and the height to 100%. Internally, we set a label with a width of 37.5rem and a height of 3rem, and use margin: 0 auto to center it. Since we set the font size of html to 50vw in the App.vue file, the 37.5rem here is actually equal to 750px.

Through the above operations, the page can be adapted based on the width of 750.

Summary

In uniapp, it is a common method to adapt by setting the width of 750. By installing the uni-percentage-support plug-in and setting the font size of the HTML, we can adapt the page based on the 750 width, thereby presenting similar effects on the screens of different devices. Of course, these parameters can also be adjusted according to the actual situation to achieve the best results.

The above is the detailed content of How to set 750 width in uniapp. For more information, please follow other related articles on the PHP Chinese website!