css3 apakah itu susun atur penyesuaian

Reka letak adaptif, juga dikenali sebagai "reka letak responsif", merujuk kepada reka letak halaman web yang boleh mengecam lebar skrin secara automatik dan membuat pelarasan yang sepadan dengan halaman web sedemikian boleh serasi dengan berbilang terminal yang berbeza, bukannya menjadi disesuaikan untuk setiap Terminal membuat versi tertentu. Reka letak penyesuaian dilahirkan untuk menyelesaikan masalah penyemakan imbas web mudah alih, dan boleh memberikan pengalaman pengguna yang baik untuk pengguna yang menggunakan terminal yang berbeza.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Apakah itu susun atur penyesuaian

Susun atur suai, juga dikenali sebagai "susun atur responsif", boleh mengecam lebar skrin secara automatik dan membuat perubahan yang sepadan. reka letak halaman web yang dilaraskan hanya bermaksud bahawa halaman web boleh serasi dengan berbilang terminal (peranti) yang berbeza, dan bukannya membuat versi khusus untuk setiap terminal.

Malah, secara ringkasnya, perbezaan antara adaptif dan bukan adaptif ialah halaman boleh mengecam dan menyesuaikan secara automatik tanpa mengira resolusi peranti, membawa pengalaman yang lebih baik kepada pengguna menyemak imbas.

Konsep ini dilahirkan untuk menyelesaikan masalah pelayaran mudah alih web. Reka letak penyesuaian boleh memberikan pengalaman pengguna yang baik untuk pengguna yang menggunakan terminal yang berbeza, dan dengan populariti telefon pintar skrin besar, tidaklah keterlaluan untuk menggambarkannya sebagai "trend umum".

Cara melaksanakan susun atur adaptif dalam css3

Kaedah yang biasa digunakan adalah seperti berikut:

• Gunakan pertanyaan media dalam CSS (yang paling mudah); rangka kerja (Sebagai contoh, bootstrap boleh menyokong pelbagai pelayar dengan baik).

• Seterusnya, mari kita ambil pertanyaan media sebagai contoh untuk menunjukkan pelaksanaan reka letak penyesuaian.

• 1. Tetapkan tag meta

Pertama, kita perlu menetapkan tag meta untuk memberitahu penyemak imbas untuk membuat lebar port pandangan (kawasan yang boleh dilihat ​​halaman web) sama dengan lebar lebar peranti, dan melarang pengguna daripada mengezum halaman, seperti yang ditunjukkan di bawah:

Anda perlu memberi perhatian semasa menetapkan port pandangan adalah saiz kawasan yang kelihatan pada halaman web Apabila menetapkan ruang pandang, anda hanya perlu menetapkan lebar Tidak perlu Ia mengambil berat tentang ketinggian secara automatik oleh kandungan halaman web. Maksud kandungan dalam teg meta di atas adalah seperti berikut:

port pandangan: port pandangan, yang mewakili kawasan kelihatan halaman web

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

lebar: mengawal port pandangan Saiz boleh menentukan nilai tertentu, seperti 600, atau nilai khas yang terdiri daripada kata kunci Sebagai contoh, lebar peranti mewakili lebar peranti; 🎜>

skala permulaan: Mewakili nisbah penskalaan awal, iaitu nisbah penskalaan apabila halaman pertama kali dimuatkan; pengguna, antara 0 hingga 10.0;

• skala minimum: Menunjukkan bahawa pengguna dibenarkan mengezum kepada nisbah minimum, antara 0 hingga 10.0;
• boleh skala pengguna: Menunjukkan sama ada pengguna boleh mengezum secara manual, "ya" bermakna penskalaan dibenarkan, "tidak" bermakna penskalaan adalah dilarang.

• 2. Pertanyaan media

• Pertanyaan media CSS boleh mentakrifkan CSS yang berbeza untuk jenis media yang berbeza (cetakan skrin) berdasarkan syarat yang ditetapkan. supaya pengguna yang menggunakan peranti berbeza boleh mendapatkan pengalaman terbaik.
  Terdapat tiga cara untuk melaksanakan pertanyaan media:
• 1), gunakannya terus dalam fail CSS, kod sampel adalah seperti berikut:

2), gunakan @ import, kod sampel adalah seperti berikut:

• 3), digunakan dalam teg pautan, kod sampel adalah seperti berikut:

Berikut adalah komprehensif contoh untuk menunjukkan reka letak responsif Pelaksanaan:

Apabila tetingkap penyemak imbas kurang daripada 1200 piksel dan lebih besar daripada 980 piksel, gaya berbeza daripada apabila ia lebih besar daripada 640 piksel dan kurang daripada 980 piksel.

(Mempelajari perkongsian video:

tutorial video css

@media (max-width: 320px) {
    /*0~320*/
    body {
        background: pink;
    }
}
@media (min-width: 321px) and (max-width: 375px) {
    /*321~768*/
    body {
        background: red;
    }
}
@media (min-width: 376px) and (max-width: 425px) {
    /*376~425*/
    body {
        background: yellow;
    }
}
@media (min-width: 426px) and (max-width: 768px) {
    /*426~768*/
    body {
        background: blue;
    }
}
@media (min-width: 769px) {
    /*769~+∞*/
    body {
        background: green;
    }
}

,

bahagian hadapan web

)

@import 'index01.css' screen and (max-width:1024px) and (min-width:720px)
@import 'index02.css' screen and (max-width:720px)

Atas ialah kandungan terperinci css3 apakah itu susun atur penyesuaian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!