Apa yang anda perlu tahu tentang tapak web responsif?

Apakah tapak web responsif?

Jika kami membuka tapak web responsif pada mana-mana peranti, kandungan setiap halaman web tidak akan melimpah atau diliputi oleh halaman web lain. Sebagai contoh, buka tapak web TutorialsPoint.com pada sebarang peranti saiz. Pengguna boleh melihat bahawa kandungan halaman web tetap sama, tetapi penggantian kandungan menjadi berbeza supaya kandungan boleh dibaca.

Jadi, perkara asas tapak web responsif adalah untuk menjadikan kandungan kelihatan dan bergaya pada setiap peranti.

Mengapa kita memerlukan tapak web yang responsif?

Sekarang, persoalannya ialah mengapa kita perlu memerlukan laman web yang responsif, inilah jawapannya.

Terdahulu, pengguna boleh mengakses tapak web dari desktop sahaja, tetapi kini, pengguna boleh mengakses tapak web daripada peranti dengan saiz yang berbeza, seperti peranti mudah alih dan tablet. Malah kebanyakan trafik tapak web datang daripada peranti mudah alih, bukan peranti desktop.

Kini, setiap perniagaan beroperasi di Internet dan cuba menarik pelanggan dalam talian melalui laman webnya. Jika pengguna mengakses tapak web anda daripada peranti mudah alih dan tapak web anda tidak mempunyai reka bentuk responsif, pengguna akan segera menutup tapak web anda dan pergi ke tapak web pesaing.

Jadi, tapak web responsif berguna untuk mendapatkan lebih ramai pelanggan dan pelawat.

Bagaimana untuk mula membuat tapak web responsif?

Kita perlu menggunakan titik putus biasa berdasarkan dimensi penyemak imbas dan menggayakan elemen HTML dengan sewajarnya. Berikut adalah titik putus biasa.

Mobile: 360 x 640 px
Tablet: 768 x 1024 px
Laptop: 1366 x 768 px
HDdesktop: 1920 x 1080 px

Sebagai langkah pertama, kita perlu menambah tag meta berikut dalam bahagian

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Kini, kandungan HTML kami akan kekal sama seperti halaman web, tetapi kami perlu menulis CSS sedemikian rupa supaya kandungan HTML boleh dibaca dengan mudah pada setiap peranti.

Contoh 1 (Tetapkan Dimensi Elemen dalam Peratusan)

Dalam contoh di bawah, kami mempunyai elemen div 'bekas' yang mengandungi dua elemen div 'col' Kami telah menetapkan dimensi elemen div bekas dalam peratusan dan dimensi untuk elemen div 'col' dalam peratusan.

Dalam output, pengguna boleh melihat bahawa ia boleh dibaca pada sebarang peranti saiz.

   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   


   
Creating the responsive website by setting up dimensions in percentage for the HTML element 
   

      

         Column 1
      
      

         Column 2
      
   

Contoh 2 (Menggunakan Pertanyaan Media)

Dalam contoh di bawah, kami menggunakan pertanyaan media untuk mencipta reka bentuk web responsif. Menggunakan pertanyaan media, kami boleh menambah titik putus pada halaman web dan menggayakannya secara individu untuk setiap peranti.

Di sini, pengguna boleh melihat bahawa kami telah menukar dimensi div 'utama' untuk peranti yang mempunyai lebar kurang daripada 600px Selain itu, kami telah menukar saiz fon, warna fon dan margin untuk peranti mudah alih menggunakan media pertanyaan.

   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   


   
 Creating the responsive website by Using the media Queries in CSS 
   

      
      

         The above is a logo of TutorilasPoint. The logo is responsive, and it will be displayed in the centre of
         the screen.
      
   

Contoh 3 (menggunakan fungsi Clamp)

Dalam contoh di bawah, kami telah menggunakan fungsi clamp() untuk menjadikan halaman web kami responsif Fungsi clamp() mengambil tiga argumen, dan yang pertama ialah lebar minimum, yang kedua ialah peratusan dan yang ketiga ialah maksimum. lebar.

Di sini kami menghantar 400px sebagai parameter pertama, 30% sebagai parameter kedua dan 600px sebagai parameter ketiga fungsi clamp(), yang bermaksud bahawa pada mana-mana peranti, lebar kad tidak akan lebih rendah daripada 400px, dan tidak lebih daripada 600px. Jika 30% daripada lebar skrin adalah antara 400px dan 600px, nilai akan ditetapkan kepada lebar kad.

Dalam output, pengguna boleh memerhati kad pada peranti berbeza dan menyemak sama ada ia responsif.

<html>
<head>
   <meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
   <style>
      .card {
         height: 400px;
         width: clamp(400px, 30%, 600px);
         background-color: rgb(13, 247, 247);
         padding: 5px;
         border-radius: 12px;
         border: 2px solid green;
      }
      img {
         height: 90%;
         width: 100%;
         border-radius: 12px;
      }
      .content {
         font-size: 20px;
         font-weight: bold;
         text-align: center;
         padding: 10px;
         color: green;
      }
   </style>
</head>
<body>
   <h2 id="Creating-the-responsive-website-by-Using-the-clamp-function-in-CSS"> Creating the responsive website by Using the clamp() function in CSS </h2>
   <div class = "card">
      <img src = "https://thumbs.dreamstime.com/b/environment-earth-day-hands-trees-growing-seedlings-bokeh-green-background-female-hand-holding-tree-nature-field-gra-130247647.jpg"
      Alt = "tree image">
      <div class = "content">
         Save the Environment!
      </div>
   </div>
</body>
</html>

Contoh 4 (Memperkenalkan Flexbox)

Dalam contoh di bawah, kami memperkenalkan Flexbox untuk membuat halaman web responsif. Kita boleh menggunakan "display flex" untuk memaparkan sebarang elemen HTML sebagai Flexbox. Selepas itu, kami boleh menggunakan pelbagai sifat CSS untuk menyesuaikan kandungan Flexbox.

Di sini, kami mempunyai div 'baris' yang mengandungi berbilang div 'col' Dimensi div 'baris' berubah mengikut dimensi peranti, tetapi dimensi div 'col' telah ditetapkan Sifat CSS 'flex-wrap: wrap' untuk membungkus kandungan di dalam div 'baris' Ia menunjukkan jumlah bilangan div 'col' dalam baris tunggal berdasarkan lebar baris.

<html>
<head>
   <meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
   <style>
      .row {
         height: auto;
         width: 90%;
         margin: 0 auto;
         background-color: yellow;
         padding: 10px 20px;
         border: 2px solid green;
         border-radius: 12px;
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
      }
      .col {
         height: 200px;
         min-width: 200px;
         background-color: red;
         border: 2px solid green;
         border-radius: 12px;
         margin: 10px 20px;
      }
   </style>
</head>
<body>
   <h2 id="Creating-the-i-responsive-website-i-by-Using-the-media-Queries-in-CSS">Creating the <i> responsive website </i> by Using the media Queries in CSS. </h2>
   <div class = "row">
      <div class = "col">
      </div>
      <div class = "col">
      </div>
      <div class = "col">
      </div>
      <div class = "col">
      </div>
   </div>
</body>
</html>

Dalam tutorial ini, pengguna mempelajari cara membuat tapak web responsif. Contoh di atas menunjukkan kepada kita pelbagai sifat, fungsi dan peraturan CSS yang digunakan untuk membuat tapak web responsif. Pembangun perlu menggabungkan semua ini untuk menghasilkan tapak web secara langsung. Di sini kami menggunakan satu atribut dalam satu contoh hanya untuk tujuan pembelajaran.

Atas ialah kandungan terperinci Apa yang anda perlu tahu tentang tapak web responsif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!