Bagaimana untuk menetapkan 750 lebar dalam uniapp

Dalam pembangunan bahagian hadapan, penyesuaian adalah isu yang sangat penting. Kerana pelbagai saiz skrin dan peranti yang berbeza akan menyebabkan halaman dipaparkan secara berbeza. Dalam uniapp, kita boleh menyelesaikan masalah ini dengan menetapkan 750 lebar.

Dari manakah datangnya lebar 750?

Lebar 750 ialah saiz draf reka bentuk biasa dalam pembangunan mudah alih. Dalam keadaan biasa, pereka bentuk akan menetapkan lebar draf reka bentuk UI kepada 750, dan ketinggian akan ditentukan berdasarkan situasi sebenar. Mengapakah lebar draf reka bentuk 750? Ini kerana resolusi minimum bagi kebanyakan peranti mudah alih ialah 750. Contohnya, resolusi iPhone XR ialah 828*1792, yang pada asasnya memenuhi nisbah 1:1.78.

Bagaimana untuk menetapkan 750 lebar dalam uniapp?

Sebelum membangunkan uniapp, anda perlu memasang pemalam uni-app Selepas pemasangan berjaya, mula menulis kod.

1. Dalam fail main.js, tambahkan kod berikut:

import 'uni-percentage-support'

Dengan baris kod ini, kami memperkenalkan pemalam sokongan uni-peratusan ke dalam uniapp. Dengan itu membuat pelarasan yang sepadan pada halaman.

2. Dalam fail App.vue, tambahkan kod berikut:

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

Di sini, kami menggunakan vw (unit peratusan tetingkap) dan bukannya px. Antaranya, 1vw bersamaan dengan 1% lebar tingkap. Oleh kerana kita perlu menyesuaikan diri berdasarkan lebar 750, kami menetapkan saiz fon html elemen akar kepada 50vw, supaya halaman boleh disesuaikan berdasarkan lebar 750.

3. Dalam halaman yang perlu disesuaikan, tulis kod berikut:

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

Di sini, kami menetapkan lebar bekas kepada 100% dan ketinggian kepada 100%. Secara dalaman, kami menetapkan label dengan lebar 37.5rem dan ketinggian 3rem, dan menggunakan margin: 0 auto untuk memusatkannya. Memandangkan kami menetapkan saiz fon html kepada 50vw dalam fail App.vue, 37.5rem di sini sebenarnya sama dengan 750px.

Melalui operasi di atas, halaman boleh disesuaikan berdasarkan lebar 750.

Ringkasan

Dalam uniapp, ia merupakan kaedah biasa untuk menyesuaikan diri dengan menetapkan lebar 750. Dengan memasang pemalam sokongan uni-peratusan dan menetapkan saiz fon HTML, kami boleh menyesuaikan halaman berdasarkan lebar 750, dengan itu mempersembahkan kesan yang serupa pada skrin peranti berbeza. Sudah tentu, parameter ini juga boleh diselaraskan mengikut keadaan sebenar untuk mencapai hasil yang terbaik.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan 750 lebar dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!