hujung hadapan web
tutorial css
Bagaimana untuk menukar warna latar belakang kawasan pandang yang lebih luas dalam CSS?
Bagaimana untuk menukar warna latar belakang kawasan pandang yang lebih luas dalam CSS?
Kami boleh menentukan peranti yang kami gunakan dengan menggunakan apa yang kami panggil lebar "port pandang".
Dalam grafik komputer, port pandangan biasanya merujuk kepada kawasan poligon (biasanya segi empat tepat) yang sedang dilihat pengguna. Apabila kita bercakap tentang viewport dalam Pelayar web, kita biasanya merujuk kepada tetingkap di mana kandungan boleh dilihat dan pengguna tidak boleh melihat kandungan di luar tetingkap.
Pada asasnya terdapat dua jenis viewport.
Port pandangan tetap di mana penyemak imbas melukis keseluruhan halaman web dipanggil port pandangan reka letak.
Bahagian port pandangan reka letak yang kelihatan pada masa ini disebabkan penskalaan atau sebarang sebab lain dipanggil port pandangan visual.
Saiz skrin
Ia pada asasnya merujuk kepada lebar dan ketinggian fizikal peranti. Terdapat banyak peranti dengan saiz skrin yang berbeza bergantung pada saiz skrin, cara pengguna berinteraksi dengan halaman web berubah. Jadi apakah hubungan antara saiz skrin dan lebar viewport.
Tidak kira peranti, pengguna lebih terbiasa dengan menatal menegak, itulah sebabnya kami menggunakan lebar port pandangan untuk mengklasifikasikan peranti, kerana lebar maksimum port pandangan reka letak yang boleh ada dikekang oleh fizik peranti. lebar.
Pada ketika ini, kami tahu apa itu "port pandangan" dan cara ia berkaitan dengan saiz skrin. Jika kita mahukan halaman web responsif yang menukar gaya selepas lebar tertentu, kita perlu menetapkan viewport menggunakan tag meta viewport.
Teg ini memberitahu penyemak imbas cara mengawal saiz dan zum halaman. Nilai meta viewport width=device-width memberitahu halaman untuk melaraskan lebarnya (dalam piksel bebas peranti) agar sepadan dengan lebar skrin.
Halaman boleh menggunakan keseluruhan lebar landskap dengan menambahkan nilai initial-scale=1, yang mengarahkan penyemak imbas untuk mewujudkan hubungan 1:1 antara piksel CSS dan piksel bebas peranti tanpa mengira orientasi peranti.
Contoh
Di bawah ialah contoh menetapkan port pandang menggunakan lebar peranti dan skala awal 1.
<!DOCTYPE html> <html lang="en"> <head> <title>Example of Viewport</title> </head> <body> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque earum in iste non animi itaque debitis sint! Repellat vero aliquid ullam. Aliquid voluptates recusandae praesentium numquam reiciendis, ullam aliquam nostrum! </p> </body> </html>
Pertanyaan Media dan Peraturan Media
Kami tahu bahawa kami boleh menggunakan lebar port pandangan untuk mencetuskan perubahan gaya, kini kami akan membincangkan pertanyaan media dalam CSS. Anda boleh menggunakan pertanyaan media untuk menggunakan gaya CSS berdasarkan jenis keseluruhan peranti (seperti cetakan lwn. skrin) atau butiran lain (seperti peleraian skrin atau lebar port pandangan penyemak imbas). Kami menggunakan pertanyaan media untuk menyelesaikan tugasan berikut −
Gunakan gaya secara bersyarat.
Apabila kita perlu menyasarkan sebarang bentuk media tertentu
Atau bila kita nak test atau kena pantau status media
Untuk menggunakan pertanyaan media, kami mesti menentukan jenis media sasaran dan fungsi sasaran kami. Kami juga boleh memanfaatkan pengendali logik untuk mencipta pertanyaan media yang sangat kompleks. Kita juga boleh menggunakan untuk tidak membalikkan maksud pertanyaan media, yang boleh menjadi sangat mudah dalam sesetengah situasi. Mari lihat contoh pertanyaan media.
@media print {
color: black;
font-size: larger;
}
Pertanyaan media di atas hanya akan digunakan pada media jenis cetak dan akan menukar warna kepada hitam dan meningkatkan saiz fon.
Contoh pertanyaan media yang kompleks diberikan di bawah.
@media (min-width: 30em) and (orientation: landscape)
{Color: black;
Font-size: larger;
}
Pertanyaan di atas sesuai untuk media dengan saiz sekurang-kurangnya 30em dan orientasi landskap.
Peraturan Media −
Bahagian di mana kami menentukan jenis media dan ciri media sering dipanggil peraturan media.
Disenaraikan di bawah adalah pelbagai operator logik yang boleh digunakan dalam peraturan media -
Bukan
dan
atau
Contoh
Diberikan di bawah adalah contoh kod untuk menyelesaikan masalah semasa menggunakan pertanyaan media.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
body {
background-color: rgb(223, 241, 223);
font-size: 20px;
}
@media only screen and (max-width: 750px) {
body {
background-color: aliceblue;
}
}
</style>
</head>
<body>
<h1>Example of media query to change background color</h1>
<p>Please resize the browser window to see a change in background color. </p>
</body>
</html>
Kesimpulan
Untuk meringkaskan, dengan menggunakan pertanyaan media dalam CSS anda boleh menukar warna latar belakang pada port pandangan yang lebih luas tertentu. Anda hanya tentukan lebar viewport dan gunakannya dalam kod untuk menetapkan warna latar belakang yang berbeza untuk saiz viewport tertentu. Ini akan membolehkan anda membuat reka bentuk tapak web yang dioptimumkan untuk setiap jenis peranti dan saiz skrin, yang penting untuk menyampaikan pengalaman pengguna yang hebat.
Atas ialah kandungan terperinci Bagaimana untuk menukar warna latar belakang kawasan pandang yang lebih luas dalam CSS?. 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
1359
52
Pembaca Skrin Demystifying: Borang & Amalan Terbaik Diakses
Mar 08, 2025 am 09:45 AM
Ini adalah jawatan ke -3 dalam siri kecil yang kami lakukan dalam kebolehcapaian bentuk. Jika anda terlepas jawatan kedua, lihat "Menguruskan Fokus Pengguna dengan: Fokus-Visible". Dalam
Menambah bayang -bayang kotak ke blok dan elemen WordPress
Mar 09, 2025 pm 12:53 PM
CSS box-shadow dan garis besar sifat mendapat tema.json Sokongan dalam WordPress 6.1. Let ' s melihat beberapa contoh bagaimana ia berfungsi dalam tema sebenar, dan pilihan apa yang kita perlu gunakan gaya ini ke blok dan elemen WordPress.
Bekerja dengan Caching Graphql
Mar 19, 2025 am 09:36 AM
Sekiranya anda baru -baru ini mula bekerja dengan GraphQL, atau mengkaji semula kebaikan dan keburukannya, anda tidak akan ragu -ragu mendengar perkara seperti "Graphql tidak menyokong caching" atau
Menjadikan Peralihan Svelte Khas pertama anda
Mar 15, 2025 am 11:08 AM
API Peralihan Svelte menyediakan cara untuk menghidupkan komponen apabila mereka memasuki atau meninggalkan dokumen, termasuk peralihan svelte adat.
CSS Scrollbars Custom Custom: Pameran
Mar 10, 2025 am 11:37 AM
Dalam artikel ini kita akan menyelam ke dunia scrollbars. Saya tahu, ia tidak terdengar terlalu glamor, tetapi percayalah, halaman yang direka dengan baik
Tunjukkan, jangan beritahu
Mar 16, 2025 am 11:49 AM
Berapa banyak masa yang anda habiskan untuk merancang persembahan kandungan untuk laman web anda? Semasa anda menulis catatan blog baru atau membuat halaman baru, adakah anda memikirkan
Apa yang ada perintah npm?
Mar 15, 2025 am 11:36 AM
Perintah NPM menjalankan pelbagai tugas untuk anda, sama ada sebagai satu-satunya atau proses berjalan terus untuk perkara seperti memulakan pelayan atau menyusun kod.
Membina aplikasi Ethereum menggunakan redwood.js dan fauna
Mar 28, 2025 am 09:18 AM
Dengan pendakian harga bitcoin baru -baru ini lebih dari 20k $ USD, dan baru -baru ini melanggar 30k, saya fikir ia patut mengambil menyelam yang mendalam kembali ke dalam mewujudkan Ethereum
