Cara melaksanakan penukaran saiz dalam uniapp (dua cara)

Dengan perkembangan pesat Internet mudah alih, semakin ramai orang memilih untuk menggunakan aplikasi pada telefon mudah alih mereka untuk mendapatkan maklumat, komunikasi dan hiburan. Pada masa ini, penyelesaian berbilang platform menjadi semakin diperlukan, dan uniapp ialah rangka kerja pembangunan berbilang terminal yang dibangunkan berdasarkan Vue Anda hanya perlu menulis satu set kod untuk aplikasi dan menerbitkannya ke berbilang platform.

Kelebihan uniapp adalah jelas, tetapi terdapat juga beberapa masalah yang datang bersamanya, yang paling biasa ialah penyesuaian saiz. Oleh kerana saiz skrin, dpi, piksel dan parameter lain adalah berbeza pada peranti yang berbeza, adalah perlu untuk menyesuaikan diri dengan peranti yang berbeza dan membolehkan aplikasi dipaparkan dalam skrin penuh.

Biasanya terdapat dua kaedah untuk melaksanakan penukaran saiz dalam uniapp: kaedah rem + less dan kaedah penukaran unit. Di bawah ini kami akan memperkenalkan kaedah pelaksanaan kedua-dua kaedah ini masing-masing.

1. kaedah rem + less

rem ialah unit panjang relatif, iaitu unit relatif kepada saiz fon elemen akar Biasanya saiz fon akar elemen ialah 16px. Kemudian, dalam uniapp, kita boleh menetapkan fon elemen akar kepada satu persepuluh daripada 750, iaitu, 75px, dan kemudian mengira semua saiz dalam rem, supaya ia boleh menyesuaikan diri dengan saiz skrin yang berbeza.

Selain itu, untuk memudahkan lagi pembangunan, kami boleh menggunakan lebih sedikit untuk memproses fail gaya dan menggunakan pembolehubah dan fungsi pencampurannya untuk mencapai penukaran saiz.

Kaedah pelaksanaan khusus adalah seperti berikut:

(1) Cipta fail config.less dalam direktori akar projek dengan kandungan berikut:

// Tentukan lebar draf reka bentuk
@designWidth: 750;

// Tentukan saiz fon elemen akar, iaitu satu persepuluh daripada lebar draf reka bentuk
@rootFont: (@designWidth / 10);

// Fungsi penukaran rem definisi
rem(@pxValue) {
return (@pxValue / @rootFont) rem;
}

(2 ) Dalam fail gaya yang perlu menggunakan penukaran saiz, perkenalkan fail config.less dan gunakan fungsi rem untuk pengiraan, contohnya:

@import "config.less";

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

Dengan cara ini, kita boleh mencapai kesan paparan yang sama pada peranti yang berbeza.

2. Kaedah penukaran unit

Cara lain untuk mencapai penukaran saiz ialah menggunakan API yang disediakan oleh uniapp untuk menukar unit kepada rpx, upx, px dan unit lain. Kaedah ini agak mudah, hanya gunakan API terus dalam fail wxss.

Sebagai contoh, kami ingin menetapkan saiz fon kepada 32px dan menggunakan kaedah rpx untuk menukar Kodnya adalah seperti berikut:

.upx{
saiz fon: uni.upx2px. (32) uni. upx2rpx(32);
}

Antaranya, uni.upx2px(32) bermaksud menukar 32upx kepada unit piksel dan uni.upx2rpx(32) bermaksud menukar 32upx kepada unit rpx. Dengan cara ini, kita boleh mencapai kesan paparan yang sama pada peranti yang berbeza.

Ringkasnya, uniapp ialah rangka kerja pembangunan berbilang terminal yang sangat baik Walau bagaimanapun, semasa proses pembangunan, isu penyesuaian saiz tidak dapat dielakkan. Walau bagaimanapun, kami boleh menggunakan kaedah rem + less atau kaedah penukaran unit untuk menyelesaikan masalah ini, supaya aplikasi boleh menyesuaikan diri dengan peranti yang berbeza dan dipaparkan dalam skrin penuh.

Atas ialah kandungan terperinci Cara melaksanakan penukaran saiz dalam uniapp (dua cara). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!