hujung hadapan web
tutorial css
Cara menggunakan unit CSS Viewport untuk melaraskan kedudukan elemen berdasarkan saiz skrin
Cara menggunakan unit CSS Viewport untuk melaraskan kedudukan elemen berdasarkan saiz skrin
Cara menggunakan unit CSS Viewport untuk melaraskan kedudukan elemen mengikut saiz skrin
Dalam pembangunan web, kita sering menghadapi keperluan Keperluan untuk melaraskan kedudukan dan saiz elemen mengikut saiz skrin yang berbeza. Untuk mencapai matlamat ini, unit CSS Viewport digunakan secara meluas. Unit viewport ialah unit relatif kepada saiz tetingkap penyemak imbas Dengan menggunakannya, kami boleh melaraskan kedudukan elemen secara dinamik berdasarkan saiz skrin, dengan itu memberikan pengalaman pengguna yang lebih baik.
1 Memahami unit Viewport
Terdapat empat jenis unit Viewport: vw (peratusan lebar tingkap), vh (peratusan ketinggian tingkap), vmin (antara lebar tingkap dan ketinggian) sebagai peratusan daripada nilai yang lebih kecil) dan vmax (peratusan daripada lebar dan ketinggian port pandangan yang lebih besar).
Ambil vw sebagai contoh, dengan mengandaikan lebar viewport ialah 1000px, jika kita menetapkan lebar elemen kepada 50vw, lebarnya ialah 500px (separuh daripada 1000px), tanpa mengira saiz skrin pengguna Bagaimana besar kan.
2. Contoh Demonstrasi
Yang berikut menggunakan contoh untuk menunjukkan cara menggunakan unit Viewport untuk melaraskan kedudukan elemen.
html Kod:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 50vw;
height: 50vh;
background-color: #ff0000;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>Dalam kod di atas, kami mencipta elemen div bernama "bekas" dan menetapkan lebar dan tinggi kepada 100vw dan 100vh, yang bermaksud Ia akan mengambil masa ke atas seluruh skrin. Seterusnya, elemen div bernama "kotak" ditambahkan pada bekas, dan lebar dan ketinggian ditetapkan kepada 50vw dan 50vh, dan warna latar belakang adalah merah.
Menjalankan kod di atas, kita dapat melihat bahawa tidak kira betapa besar saiz skrin, elemen kotak sentiasa dipaparkan di tengah, dan lebar dan ketinggiannya disesuaikan secara adaptif mengikut saiz skrin.
3. Lebih banyak senario aplikasi
Selain contoh asas melaraskan kedudukan dan saiz elemen, unit Viewport juga boleh digunakan untuk senario aplikasi yang lebih kompleks. Contohnya, anda boleh menggunakan unit vw untuk menetapkan saiz imej responsif atau menggunakan unit vh untuk mencapai kesan tatal skrin penuh yang menyesuaikan diri dengan ketinggian skrin.
Selain itu, anda juga boleh menggabungkan Pertanyaan Media CSS dan unit Viewport untuk melaraskan reka letak dan gaya yang berbeza mengikut saiz skrin. Sebagai contoh, anda boleh menyembunyikan elemen pada peranti skrin kecil dan menunjukkannya pada peranti skrin besar dan anda boleh menggunakan unit Viewport untuk melaraskan saiz dan kedudukan elemen.
Ringkasan
Unit Viewport CSS menyediakan cara yang fleksibel untuk melaraskan kedudukan dan saiz elemen berdasarkan saiz skrin. Kita boleh menggunakan unit vw, vh, vmin dan vmax untuk menetapkan lebar, ketinggian dan kedudukan elemen untuk memberikan pengalaman pengguna yang lebih baik. Sama ada reka letak berpusat yang ringkas atau reka bentuk responsif yang kompleks, unit Viewport boleh membantu kami mencapai reka letak dan kesan gaya yang fleksibel.
Atas ialah kandungan terperinci Cara menggunakan unit CSS Viewport untuk melaraskan kedudukan elemen berdasarkan saiz skrin. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Saiz skrin Redmi K70 Extreme Edition
Jul 02, 2024 am 11:13 AM
Redmi K70 Extreme Edition bakal dikeluarkan Konfigurasi parameter Redmi K70 Extreme Edition pada asasnya bukan sahaja menghadapi kenaikan harga, tetapi semua aspek telah dinaik taraf secara menyeluruh, termasuk skrin, penampilan, fotografi, dan lain-lain daripada Redmi K70 Extreme Edition setiap aspek. Dan khabarnya saiz skrin Redmi K70 Extreme Edition juga akan dilaraskan, datang dan ketahui. Saiz skrin Redmi K70 Extreme Edition: 6.67-inci Redmi K70 Extreme Edition akan menggunakan skrin terus 6.67-inci 1.5K Ketinggian telefon adalah lebih kurang 162.78 mm, lebarnya lebih kurang 75.44 mm, dan ketebalannya lebih kurang 8.7 mm. Parameter skrin K70 Extreme Edition pembekal skrin terperinci: Huaxing Optoelektronik Kadar penyegaran skrin: Menyokong kadar penyegaran e-sukan 144Hz Selain itu, skrin K70 Extreme Edition menggunakan Huaxing Optoelektronik
Gunakan unit CSS Viewport vmin dan vmax untuk melaksanakan pensaiz semula dinamik elemen
Sep 13, 2023 am 09:57 AM
Gunakan unit CSSViewport vmin dan vmax untuk melaraskan saiz elemen secara dinamik Dengan populariti peranti mudah alih dan kemunculan terminal pelbagai saiz, reka bentuk responsif halaman web menjadi semakin penting. Untuk mengekalkan saiz relatif elemen merentas saiz skrin yang berbeza, kami boleh menggunakan unit CSSViewport vmin dan vmax. Artikel ini akan menerangkan cara menggunakan kedua-dua unit ini untuk melaksanakan pensaiz semula dinamik elemen dan menyediakan beberapa contoh kod untuk rujukan.
Pertanyaan media CSS: gunakan gaya berbeza untuk peranti dan saiz skrin yang berbeza
Nov 18, 2023 pm 05:28 PM
Pertanyaan media CSS ialah teknik yang sangat berguna dalam reka bentuk web yang membolehkan kami menggunakan gaya berbeza berdasarkan peranti dan saiz skrin yang berbeza. Melalui pertanyaan media, kami boleh melaraskan susun atur dan penampilan halaman web berdasarkan jenis peranti yang digunakan oleh pengguna, seperti komputer, tablet atau telefon mudah alih, serta faktor seperti lebar dan ketinggian skrin, untuk memberikan yang lebih baik. pengalaman pengguna. Sebelum menggunakan pertanyaan media CSS, kita perlu memahami beberapa konsep asas dan penggunaan. Pertama sekali, kita perlu menjelaskan dengan jelas bahawa pertanyaan media ialah fungsi CSS3, jadi pelayar diperlukan untuk menyokong
Apakah saiz skrin Huawei Enjoy 70z?
Mar 18, 2024 pm 10:58 PM
Apabila telefon bimbit terus berkembang, skrin telefon bimbit menjadi lebih besar dan lebih besar. Malah, bagi kebanyakan orang, saiz skrin telefon bimbit kini telah melebihi julat kawalan satu tangan Apabila menggunakan telefon bimbit, semua orang perlu mengendalikannya dengan dua tangan, yang membawa kesulitan kepada pengalaman penggunaan harian setiap orang. Jadi sebagai telefon baharu yang baru dikeluarkan, apakah saiz skrin Huawei Enjoy 70z? Apakah saiz skrin Huawei Enjoy 70z? Saiz skrin ialah 6.75 inci Huawei Enjoy 70z mempunyai skrin titisan air LCD 6.75 inci dengan resolusi sehingga 1600×720, dan kesan visualnya jelas dan selesa. Dengan badan yang nipis dan ringan 8.98mm dan berat 199g, ia terasa hebat di tangan. Tiga warna yang bergaya: Magic Night Black, Galaxy Blue dan Snowy White akan menyerlahkan anda di antara banyak telefon mudah alih! Walaupun tiada
Memilih unit untuk disesuaikan dengan saiz skrin yang berbeza ialah amalan terbaik untuk reka letak responsif
Jan 27, 2024 am 09:59 AM
Apakah unit yang harus digunakan oleh reka letak responsif untuk menyesuaikan diri dengan saiz skrin yang berbeza? Dalam era peranti mudah alih di mana-mana hari ini, pembangun web berhadapan dengan masalah penting: cara membuat halaman web dipaparkan dengan baik pada saiz skrin yang berbeza. Untuk menyelesaikan masalah ini, susun atur responsif (ResponsiveDesign) wujud. Reka bentuk responsif ialah kaedah reka bentuk web yang menyesuaikan secara automatik kepada saiz dan resolusi skrin yang berbeza. Ia boleh melaraskan susun atur dan susun atur halaman web secara automatik mengikut saiz skrin dan orientasi peranti, supaya ia boleh
Cara menggunakan unit CSS Viewport untuk melaraskan saiz fon berdasarkan saiz skrin
Sep 13, 2023 am 08:57 AM
Cara menggunakan unit CSSViewport untuk melaraskan saiz fon mengikut saiz skrin Unit CSSViewport ialah unit berbanding dengan saiz port pandangan, yang boleh membantu kami melaraskan saiz fon mengikut saiz skrin secara dinamik. Dalam era peranti mudah alih, teknologi ini boleh membantu kita menyelesaikan masalah fon terlalu besar atau terlalu kecil yang disebabkan oleh saiz skrin yang pelbagai. Artikel ini akan memperkenalkan cara menggunakan unit CSSViewport untuk melaraskan saiz fon mengikut saiz skrin dan menyediakan beberapa kod tertentu
Cara menggunakan unit CSS Viewport untuk melaraskan kedudukan elemen berdasarkan saiz skrin
Sep 13, 2023 pm 01:18 PM
Petua tentang cara menggunakan unit CSSViewport untuk melaraskan kedudukan elemen mengikut saiz skrin Dalam pembangunan web, kami sering menghadapi keperluan untuk melaraskan kedudukan dan saiz elemen mengikut saiz skrin yang berbeza. Untuk mencapai matlamat ini, unit CSSViewport digunakan secara meluas. Unit viewport ialah unit relatif kepada saiz tetingkap penyemak imbas Dengan menggunakannya, kami boleh melaraskan kedudukan elemen secara dinamik berdasarkan saiz skrin, dengan itu memberikan pengalaman pengguna yang lebih baik. 1. Memahami Vi
Bagaimana untuk mengurangkan saiz skrin win10
Jan 02, 2024 pm 09:38 PM
Sistem win10 adalah sistem yang sangat baik dan hebat Kepintaran yang berkuasa menghalang sistem daripada mengalami beberapa masalah pelik Hari ini saya akan membawakan anda kaedah untuk melaraskan nisbah paparan skrin win10 jika anda boleh melakukannya tetapan paparan desktop Operasi selesai. Bagaimana untuk mengurangkan saiz skrin Windows 10 jika ia terlalu besar: 1. Pertama, klik kanan ruang kosong pada desktop, dan kemudian klik "Tetapan Paparan". 2. Anda kemudian boleh melihat resolusi monitor dalam senarai di sebelah kanan. 3. Klik lungsur turun resolusi dan pilih Disyorkan. 4. Selepas memilih resolusi, pergi ke "Skala dan Susun Atur" dan pilih nilai yang disyorkan, yang biasanya 100%.
