search
HomeWeb Front-enduni-appHow 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.

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

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
How do I handle local storage in uni-app?How do I handle local storage in uni-app?Mar 11, 2025 pm 07:12 PM

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

How do I manage state in uni-app using Vuex or Pinia?How do I manage state in uni-app using Vuex or Pinia?Mar 11, 2025 pm 07:08 PM

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

How do I make API requests and handle data in uni-app?How do I make API requests and handle data in uni-app?Mar 11, 2025 pm 07:09 PM

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

How do I use uni-app's geolocation APIs?How do I use uni-app's geolocation APIs?Mar 11, 2025 pm 07:14 PM

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

How do I use uni-app's social sharing APIs?How do I use uni-app's social sharing APIs?Mar 13, 2025 pm 06:30 PM

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.

How do I use uni-app's easycom feature for automatic component registration?How do I use uni-app's easycom feature for automatic component registration?Mar 11, 2025 pm 07:11 PM

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.

How do I use preprocessors (Sass, Less) with uni-app?How do I use preprocessors (Sass, Less) with uni-app?Mar 18, 2025 pm 12:20 PM

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]

How do I use uni-app's uni.request API for making HTTP requests?How do I use uni-app's uni.request API for making HTTP requests?Mar 11, 2025 pm 07:13 PM

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

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

Safe Exam Browser

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

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

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),