HTML Responsive
Responsive Вэб дизайн гэж юу вэ?
Responsive вэб дизайн гэдэг нь вэб сайтад хандаж буй төхөөрөмжид (компьютер, Гар утас, таблет, ...) тохируулан автоматаар вэб сайтын загварыг өөрчлөх, зарим элементийг нуух, томруулах, багасгах зэрэг өөрчлөлтийг хийж тухайн төхөөрөмжид илүү тохиромжтой, эвтэйхэн харагдуулахыг Responsive вэб дизайн гэнэ.
Responsive бүрэн жишээ
Үр дүнг харахViewport-г тохируулах
Responsive вэб хуудас хийхдээ доорхи <meta> элементийг бүх вэб хуудсанд нэмж өгнө.
Viewport нь таны вэб хуудасны харагдах байдлыг тохируулж, интернет хөтөч-өд мэдээллийг дамжуулах болно.
Responsive зураг
Responsive зураг нь бүх интернет хөтчид уян хатан тохирч ажиллаж чаддаг.
Width шинж чанарыг ашиглаж үзье
Хэрэв CSS-н width шинж чанарт 100% гэж зааж өгвөл зураг автоматаар responsive болж компьютер болон гар утаснаас вэб хуудсанд хандахад зураг автоматаар том, жижиг болно.
Жишээ нь
<img src="/static/img/html/mongolia1.jpg" alt="Responsive зураг" width="100%" /">
Дээрх жишээнд зураг нь жижиг, дэлгэц нь том байх тохиолдолд зургийн анхны хэмжээ алдагдаж томрох болно. max-width шинж чанарын тусламжтай өргөний хамгийн дээд хэмжээг зааж өгч болно.
max-width шинж чанарыг ашиглаж үзье
Зургийн хамгийн дээд өргөнийг 100% гэж max-width шинж чанарт зааж өгвөл зураг нь өөрийн хэмжээнээс томрохгүй бөгөөд харин жижиг дэлгэц дээр жижигхэн болох болно.
Жишээ нь
<img src="/static/img/html/mongolia.jpg" alt="Responsive зураг" style="max-width:100%; height:auto;" /">
Responsive Текстийн хэмжээ
Текстийн хэмжээг "vw" нэгжээр тохируулах бөгөөд "viewport width" гэсэг үг юм.
Responsive текст
Интернет хөтчийг ихэсгэж багасгаж үзээрэй
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1 style="font-size:10vw;">Интернет хөтчийг ихэсгэж багасгаж үээрэй</h1>
<p style="font-size:5vw;">Интернет хөтчийг ихэсгэж багасгаж үээрэй</p>
<p>Энэ бол responsive биш энгийн догол мөр</p>
</body>
</html>
Viewport нь Интернет хөтчийн хэмжээ бөгөөд 1vw = 1% байна. Хэрэв дэлгэцийн хэмжээг 100см гэж үзвэл 1vw нь 1см гэсэн үг юм.
Responsive HTML
Зөвхөн зураг болно текстийн хэмжээг өөрчлөхөөс гадна вэб хуудсыг ч бас өөрчилж чадна. Доорх 3-н div элемент нь том дэлгэцэд хэвтээ байдлаар, жижиг дэлгэцэд босоо байдлаар харагдах болно. Хөтчийн хэмжээг өөрчлөөд үзээрэй.
Жишээ нь
<style>
* {
box-sizing:border-box;
}
.left {
background-color:orange;
padding:30px;
float: left;
width: 20%; /* Баруун болон зүүн тал дэлгэцийн 20%, 20%-н хувь */
}
.right {
background-color:red;
padding:30px;
float: left;
width: 20%; /* Баруун болон зүүн тал дэлгэцийн 20%, 20%-н хувь */
}
.main {
background-color:#C1C1C1;
padding:30px;
float: left;
width: 60%; /* Контент агуулах хэсэг 60% */
}
/* Media query-д дэлгэцийн өргөн 800px болон түүнээс бага байх үед: 3-н div босоо, бүх элементийн өргөн 100% байна гэдгийг зааж өгнө. */
@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%;
}
}
</style>
Сэтгэгдэлүүд
