Evolusi dan aplikasi unit susun atur CSS: daripada piksel kepada unit relatif berdasarkan saiz fon elemen akar

Dari px ke rem: Evolusi dan aplikasi unit susun atur CSS

Pengenalan:
Dalam pembangunan bahagian hadapan, kita selalunya perlu menggunakan CSS untuk melaksanakan reka letak halaman. Sejak beberapa tahun kebelakangan ini, unit susun atur CSS telah berkembang dan berkembang. Pada mulanya kami menggunakan piksel (px) sebagai unit untuk menetapkan saiz dan kedudukan elemen. Walau bagaimanapun, dengan peningkatan reka bentuk responsif dan populariti peranti mudah alih, unit piksel telah mendedahkan beberapa masalah secara beransur-ansur. Untuk menyelesaikan masalah ini, rem unit baharu wujud dan secara beransur-ansur digunakan secara meluas dalam reka letak CSS.

1. Had unit piksel (px)
1.1 Saiz tetap
Sebagai unit terawal digunakan secara meluas, unit piksel mempunyai ciri saiz tetap dalam reka letak. Ini bermakna apabila halaman dipaparkan pada peranti yang berbeza atau saiz skrin yang berbeza, saiz unit piksel tidak akan menyesuaikan diri, menyebabkan reka letak halaman tidak teratur atau tidak dapat dipaparkan sepenuhnya.

1.2 Isu peranti resolusi tinggi
Dengan populariti peranti resolusi tinggi, seperti skrin Retina, kelemahan unit piksel lebih jelas. Apabila elemen dengan tetapan unit piksel rendah dipaparkan pada peranti resolusi tinggi, ia akan menyebabkan paparan piksel atau kabur, menjejaskan pengalaman pengguna.

1.3 Pengeditan yang kompleks
Unit piksel perlu dilaraskan mengikut resolusi peranti, yang bermaksud bahawa ketumpatan piksel peranti berbeza perlu dipertimbangkan semasa menulis CSS, yang meningkatkan kerumitan menulis dan mengekalkan kod.

2. Pengenalan kepada unit rem
2.1 Apa itu rem
rem ialah unit relatif, yang mewakili unit saiz fon berbanding elemen akar (html). Saiznya adalah relatif kepada saiz fon unsur akar. Apabila kami menetapkan saiz fon elemen akar kepada 16px, 1rem bersamaan dengan 16px. .

Menyelesaikan masalah peranti resolusi tinggi: Memandangkan rem ialah unit relatif dan tidak dipengaruhi oleh ketumpatan piksel peranti, kesan susun atur yang konsisten boleh dicapai di bawah resolusi yang berbeza.

Memudahkan penulisan kod: Menggunakan unit rem boleh memudahkan penulisan kod dan anda tidak perlu lagi mempertimbangkan ketumpatan piksel peranti berbeza.
• 3. Cara menggunakan unit rem
3.1 Tetapkan saiz fon elemen akar
• Sebelum menggunakan unit rem, anda perlu menetapkan saiz fon elemen akar terlebih dahulu. Biasanya, kami akan menetapkan saiz fon elemen akar kepada 16px, iaitu, 1rem=16px.

html {
  font-size: 16px;
}

Salin selepas log masuk

Setelah anda menetapkan saiz fon elemen akar, anda boleh menggunakan unit rem dalam elemen lain untuk reka letak.

.container {
  width: 20rem; /* 相当于320px */
  height: 10rem; /* 相当于160px */
  font-size: 1.2rem; /* 相当于19.2px */
  margin-top: 2rem; /* 相当于32px */
}

Pertanyaan media boleh menukar saiz fon elemen akar mengikut saiz skrin yang berbeza secara dinamik.

@media screen and (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

@media screen and (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

@media screen and (min-width: 1024px) {
  html {
    font-size: 18px;
  }
}

Gunakan JavaScript untuk mengira saiz fon unsur akar secara dinamik berdasarkan saiz skrin.

function setRootFontSize() {
  var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  var fontSize = screenWidth / 10;
  document.documentElement.style.fontSize = fontSize + 'px';
}

setRootFontSize();

window.addEventListener('resize', setRootFontSize);

Rujukan:

https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-size

https://www.w3schools.com/cssref/css_units.asp

https ://juejin.cn/post/6844904117648772110

Atas ialah kandungan terperinci Evolusi dan aplikasi unit susun atur CSS: daripada piksel kepada unit relatif berdasarkan saiz fon elemen akar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!