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.
- 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.
- 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!

This article details uni-app's local storage APIs (uni.setStorageSync(), uni.getStorageSync(), and their async counterparts), emphasizing best practices like using descriptive keys, limiting data size, and handling JSON parsing. It stresses that lo

This article compares Vuex and Pinia for state management in uni-app. It details their features, implementation, and best practices, highlighting Pinia's simplicity versus Vuex's structure. The choice depends on project complexity, with Pinia suita

This article details making and securing API requests within uni-app using uni.request or Axios. It covers handling JSON responses, best security practices (HTTPS, authentication, input validation), troubleshooting failures (network issues, CORS, s

This article details uni-app's geolocation APIs, focusing on uni.getLocation(). It addresses common pitfalls like incorrect coordinate systems (gcj02 vs. wgs84) and permission issues. Improving location accuracy via averaging readings and handling

The article details how to integrate social sharing into uni-app projects using uni.share API, covering setup, configuration, and testing across platforms like WeChat and Weibo.

This article explains uni-app's easycom feature, automating component registration. It details configuration, including autoscan and custom component mapping, highlighting benefits like reduced boilerplate, improved speed, and enhanced readability.

Article discusses using Sass and Less preprocessors in uni-app, detailing setup, benefits, and dual usage. Main focus is on configuration and advantages.[159 characters]

This article details uni.request API in uni-app for making HTTP requests. It covers basic usage, advanced options (methods, headers, data types), robust error handling techniques (fail callbacks, status code checks), and integration with authenticat


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Atom editor mac version download
The most popular open source editor

Dreamweaver Mac version
Visual web development tools

Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),