HTML moslashuvchan dizayn
Adaptiv veb-dizayn — barcha qurilmalarda yaxshi ko‘rinadigan veb-sahifalar yaratishdir!
Adaptiv veb-dizayn turli ekran o‘lchamlari va viewportlarga avtomatik moslashadi.
Adaptiv veb-dizayn nima?
Adaptiv veb-dizayn — saytni barcha qurilmalarda (kompyuter, planshet va telefonlarda) yaxshi ko‘rinadigan qilish uchun HTML va CSS yordamida uning o‘lchamini avtomatik o‘zgartirish, yashirish, kichraytirish yoki kattalashtirishdir:
Viewport’ni sozlash
Adaptiv veb-sayt yaratish uchun barcha veb-sahifalaringizga quyidagi <meta> tegini qo‘shing:
Misol
<meta name="viewport" content="width=device-width, initial-scale=1.0">
O‘zingiz sinab ko‘ring »
Bu sahifangizning viewportini o‘rnatadi va brauzerga sahifa o‘lchamlari va masshtabini qanday boshqarish haqida ko‘rsatma beradi.
Mana viewport meta tegisiz veb-sahifa va shu veb-sahifaning viewport meta tegi bilan holatiga misol:
Maslahat: bu sahifani telefon yoki planshetda ko‘rayotgan bo‘lsangiz, farqni ko‘rish uchun yuqoridagi ikkita havolani bosishingiz mumkin.
Adaptiv rasmlar
Adaptiv rasmlar — har qanday brauzer o‘lchamiga go‘zal moslashadigan rasmlardir.
width xossasidan foydalanish
CSS width xususiyati 100% qilib belgilansa, rasm adaptiv bo‘ladi va kattalashib-kichrayadi:
E’tibor bering: yuqoridagi misolda rasm asl o‘lchamidan kattaroq qilib cho‘zilishi mumkin. Ko‘p hollarda buning o‘rniga max-width xususiyatidan foydalanish yaxshiroq yechim bo‘ladi.
max-width xususiyatidan foydalanish
Agar max-width xususiyati 100% qilib belgilansa, rasm zarur bo‘lsa kichrayadi, lekin hech qachon asl o‘lchamidan kattalashmaydi:
Brauzer kengligiga qarab turli rasmlar ko‘rsatish
HTML <picture> elementi turli brauzer oyna o‘lchamlari uchun turli rasmlarni belgilash imkonini beradi.
Quyidagi rasm kenglikka qarab qanday o‘zgarishini ko‘rish uchun brauzer oynasining o‘lchamini o‘zgartiring:
Misol
<picture>
<source srcset="img_smallflower.jpg" media="(max-width:
600px)">
<source srcset="img_flowers.jpg" media="(max-width:
1500px)">
<source srcset="flowers.jpg">
<img src="img_smallflower.jpg"
alt="Flowers">
</picture>
O‘zingiz sinab ko‘ring »
Adaptiv matn o‘lchami
Matn o‘lchami "vw" birligi bilan o‘rnatilishi mumkin — bu "viewport kengligi" degani.
Shu tarzda matn o‘lchami brauzer oynasi o‘lchamiga moslashadi:
Hello World
Matn o‘lchami qanday moslashishini ko‘rish uchun brauzer oynasining o‘lchamini o‘zgartiring.
Viewport — brauzer oynasining o‘lchami. 1vw = viewport kengligining 1%. Agar viewport kengligi 50 sm bo‘lsa, 1vw 0,5 sm bo‘ladi.
Media so‘rovlar
Adaptiv veb-sahifalarda matn va rasmlarni o‘lchashdan tashqari, media so‘rovlaridan (media queries) foydalanish ham odatiy holdir.
Media so‘rovlari yordamida turli brauzer o‘lchamlari uchun butunlay turli uslublarni belgilashingiz mumkin.
Misol: brauzer oynasining o‘lchamini o‘zgartiring — quyidagi uchta div elementi katta ekranlarda yonma-yon, kichik ekranlarda esa vertikal ko‘rinadi:
Misol
<style>
.left, .right {
float: left;
width: 20%; /* The width is 20%, by default */
}
.main {
float: left;
width: 60%; /* The width is 60%, by default */
}
/* Use a media query to
add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
.left,
.main, .right {
width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
}
}
</style>
O‘zingiz sinab ko‘ring »
Maslahat: media so‘rovlari va moslashuvchan veb-dizayn haqida RWD darsligimizda batafsil o‘qing.
Adaptiv veb-sahifa — to‘liq misol
Adaptiv veb-sahifa katta kompyuter ekranlarida ham, kichik mobil telefonlarda ham yaxshi ko‘rinishi kerak.
W3Schools Spaces haqida eshitganmisiz? Bu yerda veb-saytingizni noldan yaratishingiz yoki shablondan foydalanishingiz mumkin.
Bepul boshlang ❯Adaptiv veb-dizayn — frameworklar
Barcha mashhur CSS freymvorklar adaptiv dizaynni ta’minlaydi.
Ular bepul va ulardan foydalanish oson.
W3.CSS
W3.CSS — standart tarzda kompyuter, planshet va mobil dizaynni qo‘llab-quvvatlaydigan zamonaviy CSS freymvork.
W3.CSS o‘xshash CSS freymvorklarga qaraganda kichikroq va tezroq.
W3.CSS jQuery yoki boshqa JavaScript kutubxonasidan mustaqil bo‘lishi uchun loyihalangan.
W3.CSS namoyishi
Moslashuvchanlikni (responsiveness) ko‘rish uchun sahifa o‘lchamini o‘zgartiring!
London
London — Angliyaning poytaxti.
U Birlashgan Qirollikning eng ko‘p aholisi shahri bo‘lib, metropoliten hududida 13 milliondan ortiq aholi yashaydi.
Paris
Parij — Fransiyaning poytaxti.
Parij hududi Yevropadagi eng yirik aholi markazlaridan biri bo‘lib, 12 milliondan ortiq aholi yashaydi.
Tokyo
Tokio — Yaponiyaning poytaxti.
U Katta Tokio hududining markazi va dunyodagi eng ko‘p aholisi metropoliten hududidir.
Misol
<!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>Resize this responsive page!</p>
</div>
<div
class="w3-row-padding">
<div class="w3-third">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</div>
<div
class="w3-third">
<h2>Paris</h2>
<p>Paris is
the capital of France.</p>
<p>The Paris area is one of the largest
population centers in Europe,
with more than 12 million
inhabitants.</p>
</div>
<div class="w3-third">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It
is the center of the Greater Tokyo Area,
and the most populous
metropolitan area in the world.</p>
</div>
</div>
</body>
</html>
O‘zingiz sinab ko‘ring »
W3.CSS haqida ko‘proq bilish uchun W3.CSS darsligimizni o‘qing.
Bootstrap
Yana bir mashhur CSS freymvork — Bootstrap:
Misol
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5
Example</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>My First Bootstrap Page</h1>
<p>Resize
this responsive page to see the effect!</p>
</div>
<div
class="container mt-5">
<div class="row">
<div
class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum...</p>
</div>
<div
class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum...</p>
</div>
<div
class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum...</p>
</div>
</div>
</div>
O‘zingiz sinab ko‘ring »
Bootstrap haqida ko‘proq bilish uchun Bootstrap darsligimizga murojaat qiling.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!