Уян вэб дизайн(Responsive web design) нь бүх төхөөрөмж дээр сайн харагддаг вэб хуудас үүсгэх явдал юм!
Уян вэб дизайн(Responsive web design) дэлгэцийн янз бүрийн хэмжээ, харах цонхнуудад автоматаар тохируулах болно.
Уян вэб дизайн(Responsive web design) гэж юу вэ? #
Уян вэб дизайн(Responsive web design) нь вэбсайтыг бүх төхөөрөмжид (ширээний компьютер, таблет, утас) сайнаар харагдуулахын тулд вэбсайтын хэмжээг автоматаар өөрчлөх, нуух, багасгах, томруулах зорилгоор HTML болон CSS ашиглах явдал юм.
Харах цонхийг тохируулах #
Уян вэбсайтыг үүсгэхийн тулд, <meta> тэмдэглэгээг нэмнэ:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Уян зурагууд(Responsive images) #
Уян зураг гэдэг нь ямар ч хөтөчийн хэмжээтэй таарч тохирсон хэмжээтэй зураг юм.
width ашиглах #
Хэрэв CSS width -ийг 100% гэж тохируулсан бол зураг уян болох бөгөөд дээш доош хэмжээтэй болно.
Сануулга: Дээрх жишээн дээр байгаа зураг нь эх зурагны хэмжээнээсээ илүү том болох боломжтой. Ингэхийн тулд max-width-ийг ашиглана
max-width-ийг ашиглах #
Хэрвээ max-width-ийг 100%тай байна гэж тохируулвал зураг хэмжээгээ багасгах шаардлагтай бол багасгана гэхдээ эх зурагаасаа илүү том болох боломжгүй:
Хөтчийн өргөнөөс хамааран өөр өөр зургийг гаргах #
HTML <picture> элемент нь янз бүрийн хөтчийн цонхны хэмжээгээр зургийг өөр өөр хэмжээгээр гаргах боломжийг олгодог.
Хөтчийн цонхны хэмжээг өөрчилөлтийн хэмжээнээс хамааран доорх зураг хэрхэн өөрчлөгдөж байгааг хараарай
Уян текстийн хэмжээ #
Текстийн хэмжээг “vw” нэгжээр тохируулж болох бөгөөд энэ нь “харах цонхны өргөн”(viewport widht) гэсэн үг юм.
Ингэснээр текстийн хэмжээ нь хөтчийн цонхны хэмжээг дагаж өөрчлөгдөх болно.
Сайн байна уу #
Текстийн хэмжээ хэрхэн хэмжигдэхийг харахын тулд хөтөчийн цонхны хэмжээг өөрчил.
<h1 style="font-size:10vw">Hello World</h1>
Мэдээллийн хэрэгсэл асуулгууд(Media Queries) #
Текст, зургийн хэмжээг өөрчилөхийн тулд уян вэб хуудсанд медиа асуулгыг ашиглах нь түгээмэл байдаг.
With media queries you can define completely different styles for different browser sizes.
Example: resize the browser window to see that the three div elements below will display horizontally on large screens and stacked vertically on small screens:
Left Menu
Main Content
Right Content
<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> Уян вэб хуудас – Бүтэн жишээ #
Уян вэб хуудас нь жижиг болон том дэлгэцтэй төхөөрөмжүүдэнд сайн харагддах ёстой
<style>
* {
box-sizing: border-box;
}
.menu {
float: left;
width: 20%;
text-align: center;
}
.menu a {
background-color: #e5e5e5;
padding: 8px;
margin-top: 7px;
display: block;
width: 100%;
color: black;
}
.main {
float: left;
width: 60%;
padding: 0 20px;
}
.right {
background-color: #e5e5e5;
float: left;
width: 20%;
padding: 15px;
margin-top: 7px;
text-align: center;
}
@media only screen and (max-width: 620px) {
/* For mobile phones: */
.menu, .main, .right {
width: 100%;
}
}
</style>
</head>
<body style="font-family:Verdana;color:#aaaaaa;">
<div style="background-color:#e5e5e5;padding:15px;text-align:center;">
<h1>Apprenitce</h1>
</div>
<div style="overflow:auto">
<div class="menu">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</div>
<div class="main">
<h2>Apprenitce</h2>
<p>Apprentice is real deal.</p>
</div>
<div class="right">
<h2>About</h2>
<p>Progamming course .</p>
</div>
</div>
<div style="background-color:#e5e5e5;text-align:center;padding:10px;margin-top:7px;"> </div> Уян вэбхуудасны дизайн – Frameworks #
Бүх CSS-ийн уян вэб дизайн нь Framework санал болгодог
Эд нар нь үнэгүй байдаг
Apprentice demo #
Resize this responsive page!
London #
London is the capital city of England.
It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Paris #
Paris is the capital of France.
The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.
Tokyo #
Tokyo is the capital of Japan.
It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="Apprentice.mn">
<body>
<div class="w3-container w3-green">
<h1>Aprrenitce 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> 
