cari

Rumah  >  Artikel  >  hujung hadapan web  >  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?

WBOY
WBOYke hadapan
2023-09-07 22:13:101372semak imbas

如何更改 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!

css 运算符 逻辑运算符
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Sifat manakah yang digunakan untuk menggariskan, garis atas dan teks coretan menggunakan CSS?Artikel seterusnya：Sifat manakah yang digunakan untuk menggariskan, garis atas dan teks coretan menggunakan CSS?

Artikel berkaitan

Lihat lagi