MohirDox

Ko'rinishi

HTML Responsiv Veb Dizayn ​

Responsiv veb dizayn — barcha qurilmalarda yaxshi ko‘rinadigan veb sahifalarni yaratish haqida!

Responsiv veb dizayn turli ekran o‘lchamlari va ko‘rinish oynalari uchun avtomatik moslashadi.

Responsiv Veb Dizayn

Responsiv Veb Dizayn Nima? ​

Responsiv veb dizayn — HTML va CSS yordamida veb saytni avtomatik ravishda o‘lchamini o‘zgartirish, yashirish, kichraytirish yoki kattalashtirish orqali barcha qurilmalarda (kompyuter, planshet, telefon) yaxshi ko‘rinishini ta’minlash:

Ko‘rinish Oynasini Sozlash ​

Responsiv sayt yaratish uchun barcha sahifalarga quyidagi <meta> tegini qo‘shing:

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

Bu sahifangiz ko‘rinish oynasini belgilaydi va brauzerga sahifa o‘lchamlari hamda masshtabini boshqarish bo‘yicha ko‘rsatma beradi.

Quyida viewport meta tegi yo‘q va bor sahifa misollari keltirilgan:

Viewport meta tegi yo‘q:
Without viewport meta tag
Viewport meta tegi bor:
With viewport meta tag

TIP

Agar ushbu sahifani telefon yoki planshetda ko‘rayotgan bo‘lsangiz, yuqoridagi ikki havolani bosib farqni ko‘rishingiz mumkin.

Responsiv Rasmlar ​

Responsiv rasm — har qanday brauzer o‘lchamiga moslashadigan rasm.

width Xususiyati ​

Agar CSS width xususiyati 100% ga o‘rnatilsa, rasm responsiv bo‘ladi va o‘lchami o‘zgaradi:

html
<img src="/img_girl.jpg" style="width:100%;">

Yuqoridagi misolda rasm asl o‘lchamidan kattaroq bo‘lishi mumkin.
Ko‘p hollarda, yaxshiroq yechim — max-width xususiyatidan foydalanish.

max-width Xususiyati ​

Agar max-width xususiyati 100% ga o‘rnatilsa, rasm faqat kichrayadi, lekin hech qachon asl o‘lchamidan kattaroq bo‘lmaydi:

html
<img src="/img_girl.jpg" style="max-width:100%;height:auto;">

Brauzer Oynasi O‘lchamiga Qarab Turli Rasmlarni Ko‘rsatish ​

HTML <picture> elementi turli brauzer oyna o‘lchamlari uchun turli rasmlarni belgilash imkonini beradi.

Brauzer oynasini o‘lchamini o‘zgartiring va rasm qanday o‘zgarishini ko‘ring:

html
<picture>
  <source media="(max-width: 600px)" srcset="img_smallflower.jpg">
  <source media="(max-width: 1500px)" srcset="img_flowers.jpg">
  <source srcset="flowers.jpg">
  <img src="img_smallflower.jpg" alt="Flowers">
</picture>

Responsiv Matn O‘lchami ​

Matn o‘lchamini vw birligi bilan belgilash mumkin, bu "viewport width" degani.

Shunda matn o‘lchami brauzer oynasi o‘lchamiga moslashadi:

html
<h1 style="font-size:10vw">Salom Dunyo</h1>

TIP

Viewport — brauzer oynasi o‘lchami. 1vw = viewport kengligining 1%. Agar viewport 50sm bo‘lsa, 1vw = 0.5sm.

Media So‘rovlar ​

Matn va rasm o‘lchamini o‘zgartirishdan tashqari, responsiv veb sahifalarda media so‘rovlar ham keng qo‘llaniladi.

Media so‘rovlar yordamida turli brauzer o‘lchamlari uchun butunlay boshqa uslublarni belgilash mumkin.

Misol: brauzer oynasini o‘lchamini o‘zgartiring, quyidagi uchta div element katta ekranda gorizontal, kichik ekranda vertikal joylashadi:

css
menyu {
  width:20%;
  float:left;
}
asosiy {
  width:60%;
  float:left;
}
ong {
  width:20%;
  float:left;
}
@media (max-width:800px) {
  menyu, asosiy, ong {
  width:100%;
  }
}

TIP

Media so‘rovlar va responsiv veb dizayn haqida ko‘proq bilish uchun RWD Qo‘llanmasi ni o‘qing.

Responsiv Veb Sahifa — To‘liq Misol ​

Responsiv veb sahifa katta kompyuter ekranida ham, kichik mobil telefonlarda ham yaxshi ko‘rinishi kerak.

TIP

W3Schools Spaces haqida eshitganmisiz? Bu yerda siz o‘z veb saytingizni noldan yaratishingiz yoki shablondan foydalanishingiz va bepul joylashtirishingiz mumkin.
Bepul boshlash ❯

Responsiv Veb Dizayn — Frameworklar ​

Barcha mashhur CSS frameworklar responsiv dizaynni qo‘llab-quvvatlaydi.
Ular bepul va ishlatish oson.

W3.CSS ​

W3.CSS — zamonaviy CSS framework bo‘lib, kompyuter, planshet va mobil dizaynni standart tarzda qo‘llab-quvvatlaydi.

W3.CSS boshqa frameworklarga nisbatan kichik va tez ishlaydi.

W3.CSS jQuery yoki boshqa JavaScript kutubxonalariga bog‘liq emas.

html
<!DOCTYPE html>
<html>
<head>
  <title>W3.CSS</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>

<div class="w3-container w3-green">
  <h1>W3Schools Demo</h1>
  <p>Ushbu responsiv sahifani o‘lchamini o‘zgartiring!</p>
</div>

<div class="w3-row-padding">
  <div class="w3-third">
  <h2>London</h2>
  <p>London — Angliya poytaxti.</p>
  <p>Buyuk Britaniyaning eng yirik shahri, metropoliten hududi 13 milliondan ortiq aholi.</p>
  </div>
  <div class="w3-third">
  <h2>Parij</h2>
  <p>Parij — Fransiya poytaxti.</p>
  <p>Parij hududi Yevropadagi eng yirik aholi markazlaridan biri, 12 milliondan ortiq aholi.</p>
  </div>
  <div class="w3-third">
  <h2>Tokio</h2>
  <p>Tokio — Yaponiya poytaxti.</p>
  <p>Katta Tokio hududi markazi, dunyodagi eng ko‘p aholi yashaydigan metropoliten.</p>
  </div>
</div>

</body>
</html>

W3.CSS haqida ko‘proq bilish uchun W3.CSS Qo‘llanmasi ni o‘qing.

Bootstrap ​

Yana bir mashhur CSS framework — Bootstrap:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 Misol</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>Mening Birinchi Bootstrap Sahifam</h1>
  <p>Ushbu responsiv sahifani o‘lchamini o‘zgartirib effektini ko‘ring!</p>
</div>

<div class="container mt-5">
  <div class="row">
  <div class="col-sm-4">
    <h3>1-Ustun</h3>
    <p>Lorem ipsum...</p>
  </div>
  <div class="col-sm-4">
    <h3>2-Ustun</h3>
    <p>Lorem ipsum...</p>
  </div>
  <div class="col-sm-4">
    <h3>3-Ustun</h3>
    <p>Lorem ipsum...</p>
  </div>
  </div>
</div>

</body>
</html>

Bootstrap haqida ko‘proq bilish uchun Bootstrap Qo‘llanmasi ni o‘qing.