Apakah maksud reka bentuk responsif html5?

reka bentuk responsif HTML5 bermaksud menggunakan susun atur peratusan untuk mencipta antara muka yang cair dan fleksibel, sambil menggunakan pertanyaan media untuk mengehadkan julat perubahan elemen konsep reka bentuk responsif adalah berdasarkan reka letak bendalir, gambar fleksibel, jadual fleksibel; anjal Gabungan teknik seperti pertanyaan video dan media.

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi HTML5, komputer Dell G3.

Apakah maksud reka bentuk responsif html5?

Apakah responsif:

Konsep reka bentuk responsif adalah berdasarkan reka letak bendalir, gambar fleksibel dan fleksibel tables , gabungan teknologi seperti video anjal dan pertanyaan media. Menggunakan susun atur peratusan untuk mencipta antara muka yang lancar dan fleksibel, dan menggunakan pertanyaan media untuk mengehadkan julat elemen yang berubah-ubah, gabungan kedua-duanya membentuk teras reka bentuk responsif.

Apakah itu viewport:

Viewport ialah konsep yang sangat penting dalam reka bentuk responsif. Konsep viewport terbahagi kepada dua jenis viewport untuk penyemak imbas mudah alih, satu ialah visible viewport, iaitu saiz peranti, dan satu lagi view window viewport, iaitu lebar halaman web.

teg

Dalam HTML5, teg boleh digunakan untuk mengkonfigurasi sifat viewport

Sintaks asas:

  <meta name="viewport" content="uesr-scalable=no, width=device-width,initial-scale=1.0,maximum-scale=1.0">

Penjelasan atribut:

uesr-scalable=no: digunakan untuk menetapkan sama ada pengguna boleh zum, nilai lalai ialah ya

width=device-width: digunakan untuk menetapkan lebar tetingkap viewport, di sini Menunjukkan lebar yang sama dengan viewport yang boleh dilihat

initial-scale=1.0: digunakan untuk menetapkan nisbah zum awal, nilainya ialah 0·10.0

maximum-scale=1.0: used untuk menetapkan nisbah zum minimum , nilainya ialah 0·10.0

tinggi: digunakan untuk menetapkan lebar port pandangan tetingkap

skala minimum: digunakan untuk menetapkan nisbah zum minimum

pertanyaan media

Dalam spesifikasi CSS3, pertanyaan media boleh menukar mod paparan halaman berdasarkan perbezaan dalam lebar port pandangan, orientasi peranti, dsb. Pertanyaan media terdiri daripada jenis media dan ungkapan bersyarat.

Kod sampel kelihatan seperti ini:

@media screen and(max-width:960px){
               /*样式设置：表示媒体类型screen并且屏幕宽度小于等于960px时的样式*/
  }

Peratusan susun atur:

Reka letak tetap (dalam piksel) boleh ditukar kepada peratusan lebar, Kepada mencapai susun atur peratusan:

Formula penukaran ialah: lebar elemen sasaran/lebar kotak induk = lebar peratusan

(Perkongsian video pembelajaran: tutorial video css, html Tutorial video)

Atas ialah kandungan terperinci Apakah maksud reka bentuk responsif html5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!