tetapan rem susun atur vue

Vue.js ialah rangka kerja JavaScript moden untuk membina antara muka pengguna. Fleksibiliti dan kebolehskalaannya menjadikannya salah satu rangka kerja pembangunan bahagian hadapan yang paling popular. Sangat mudah untuk menggunakan rem untuk melaksanakan reka letak responsif dalam Vue.js Di sini kami akan memperkenalkan cara menggunakan rem untuk melaksanakan reka letak responsif dalam Vue.js.

1. Apa itu Rem?

Rem ialah unit relatif, yang dikira berdasarkan lebar port pandangan Ia bermaksud "menskala secara berkadar berdasarkan saiz fon elemen akar." Sebagai contoh, jika saiz fon elemen akar ialah 10px, maka 1rem akan sama dengan 10px. Jika saiz fon elemen akar ialah 20px, maka 1rem akan sama dengan 20px.

Kelebihan menggunakan Rem untuk reka bentuk responsif ialah apabila pengguna mengubah saiz tetingkap penyemak imbas, elemen dalam halaman akan berskala sewajarnya, dengan itu mengekalkan perhubungan saiz relatif dan menjadikannya boleh dibaca pada peranti dan kemudahan yang berbeza guna.

2. Tetapkan Rem

Dalam Vue.js, kita boleh menggunakan kod berikut untuk menetapkan rem:

// 设置基准值
const baseSize = 32 // 设计图尺寸（1920px）/ 60

// 设置 rem 函数
function setRem () {
  const scale = document.documentElement.clientWidth / 1920
  document.documentElement.style.fontSize = `${baseSize * Math.min(scale, 1)}px`
}

// 初始化
setRem()

// 改变窗口大小时重新设置 rem
window.addEventListener('resize', () => {
  setRem()
})

Dalam kod di atas, kita tentukan dahulu Nilai asas baseSize Biasanya, kami akan menetapkan nilai asas kepada saiz draf reka bentuk (dengan andaian saiz draf reka bentuk ialah 1920px). Seterusnya, fungsi setRem ditakrifkan, yang digunakan untuk mengira saiz fon dan nilai rem berdasarkan lebar tetingkap semasa. Akhir sekali, semasa pemulaan, panggil fungsi setRem untuk menetapkan nilai rem semasa dan gunakan window.addEventListener untuk mendengar peristiwa perubahan saiz tetingkap supaya nilai rem boleh ditetapkan semula apabila saiz tetingkap berubah.

3. Menggunakan Rem dalam Vue

Dengan persediaan rem, anda boleh menggunakannya dalam Vue.js untuk reka letak responsif. Kaedah menggunakan rem dalam komponen adalah seperti berikut:

<template>
  <div class="container">
    <div class="box" :style="{ width: '32rem', height: '18rem' }"></div>
  </div>
</template>

<script>
export default {
  name: 'Demo',
  data () {
    return {
      msg: 'Hello World!'
    }
  }
}
</script>

<style scoped>
.container {
  width: 60rem;
  margin: 0 auto;
}

.box {
  background-color: #F00;
  margin: 2rem auto;
}
</style>

Dalam kod di atas, kami mula-mula menetapkan gaya .container, yang mempunyai kesan penjajaran lebar dan tengah tetap. Dalam gaya .box, kami menggunakan margin untuk meletakkan sedikit jarak antara elemen dan .container. Tetapkan nilai dalam gaya kepada nilai rem untuk membolehkannya skala secara responsif berdasarkan saiz tetingkap.

4. Kesimpulan

Menggunakan Rem dalam Vue.js untuk reka letak responsif ialah kaedah biasa, yang boleh membantu kami menyesuaikan diri dengan lebih baik pada peranti dan saiz tetingkap yang berbeza . Menggunakan Rem, saiz fon dan nilai rem boleh dikira berdasarkan saiz port pandangan dan digunakan dalam gaya. Menyediakan Rem dalam Vue.js adalah semudah menulis beberapa kod JavaScript.

Sudah tentu, terdapat cara lain untuk mencapai reka letak responsif, seperti menggunakan rangka kerja CSS seperti Bootstrap. Sebagai perbandingan, kaedah menggunakan Rem adalah lebih fleksibel dan boleh menyokong keperluan yang lebih disesuaikan.

Atas ialah kandungan terperinci tetapan rem susun atur vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!