How to implement size conversion in uniapp (two ways)

With the rapid development of mobile Internet, more and more people are choosing to use applications on their mobile phones to obtain information, communication and entertainment. At this time, a multi-platform solution becomes more and more necessary, and uniapp is a multi-terminal development framework developed based on Vue. You only need to write a set of code for an application and publish it to multiple platforms.

The advantages of uniapp are self-evident, but there are also some problems that come with it, the most common of which is size adaptation. Since the screen size, dpi, pixels and other parameters are different on different devices, it is necessary to adapt to different devices and enable the application to display in full screen.

There are usually two methods to achieve size conversion in uniapp: rem less method and unit conversion method. Below we will introduce the implementation methods of these two methods respectively.

1. rem less method

rem is a relative length unit, which is a unit relative to the font size of the root element. Normally, the font size of the root element is 16px. Then, in uniapp, we can set the root element font to one-tenth of 750, that is, 75px, and then calculate all sizes in rem, so that it can adapt to different screen sizes.

In addition, in order to further simplify development, we can use less to process style files and use its variables and mixing functions to achieve size conversion.

The specific implementation method is as follows:

(1) Create a config.less file in the project root directory with the following content:

// Define the width of the design draft
@designWidth: 750;

// Define the font size of the root element, which is one-tenth of the width of the design draft
@rootFont: (@designWidth / 10);

// Definition rem conversion function
rem(@pxValue) {
return (@pxValue / @rootFont) rem;
}

(2) In the style file that needs to use size conversion, introduce config.less file, and use the rem function for calculation, for example:

@import "config.less";

.btn {
font-size: rem(32px);
width: rem(100px);
}

In this way, we can achieve the same display effect on different devices.

2. Unit conversion method

Another way to achieve size conversion is to use the API provided by uniapp to convert units into rpx, upx, px and other units. This method is relatively simple, just use the API directly in the wxss file.

For example, we want to set the font size to 32px and use rpx mode for conversion. The code is as follows:

.upx{
font-size: uni.upx2px(32) uni. upx2rpx(32);
}

Among them, uni.upx2px(32) means converting 32upx into pixel units, and uni.upx2rpx(32) means converting 32upx into rpx units. In this way, we can achieve the same display effect on different devices.

To sum up, uniapp is a very excellent multi-terminal development framework. However, during the development process, size adaptation issues are inevitable. However, we can use rem less method or unit conversion method to solve this problem, so that the application can adapt to different devices and display in full screen.

The above is the detailed content of How to implement size conversion in uniapp (two ways). For more information, please follow other related articles on the PHP Chinese website!