---
title: HTML Responsive Web Design
description: "> Уян вэб дизайн(Responsive web design) нь бүх төхөөрөмж дээр сайн харагддаг вэб хуудас үүсгэх явдал юм! > > > > Уян вэб дизайн(Responsive web design) дэлгэцийн янз бүрийн хэмжээ, харах цонхнуудад автоматаар тохируулах болно. ## Уян вэб дизайн(Responsive web…"
url: "https://apprentice.mn/docs/html-responsive-web-design/"
updated: "2021-07-07"
category: HTML
---

# HTML Responsive Web Design

> Уян вэб дизайн(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% гэж тохируулсан бол зураг уян болох бөгөөд дээш доош хэмжээтэй болно.

![](https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/10.jpg)

**Сануулга: **Дээрх жишээн дээр байгаа зураг нь эх зурагны хэмжээнээсээ илүү том болох боломжтой. Ингэхийн тулд `max-width`-ийг ашиглана

### max-width-ийг ашиглах

Хэрвээ  `max-width`-ийг 100%тай байна гэж тохируулвал зураг хэмжээгээ багасгах шаардлагтай бол багасгана гэхдээ эх зурагаасаа илүү том болох боломжгүй:

![](https://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/10.jpg)

### Хөтчийн өргөнөөс хамааран өөр өөр зургийг гаргах

HTML `<picture>` элемент нь янз бүрийн хөтчийн цонхны хэмжээгээр  зургийг өөр өөр хэмжээгээр гаргах боломжийг олгодог.

Хөтчийн цонхны хэмжээг өөрчилөлтийн хэмжээнээс хамааран доорх зураг хэрхэн өөрчлөгдөж байгааг хараарай

     ![Cliff](ihttps://mgl-bucket.s3.eu-central-1.amazonaws.com/mgl/11.jpg)

## Уян текстийн хэмжээ

Текстийн хэмжээг “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>`

## Уян вэб хуудас – Бүтэн жишээ

Уян вэб хуудас нь жижиг болон том дэлгэцтэй төхөөрөмжүүдэнд сайн харагддах ёстой

     

# Apprenitce

    [Link 1](#) [Link 2](#) [Link 3](#) [Link 4](#)

## Apprenitce

Apprentice is real deal.

## About

Progamming course .

         `<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.CSS

# 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>`        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-responsive-web-design%2F&linkname=HTML%20Responsive%20Web%20Design](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-responsive-web-design%2F&linkname=HTML%20Responsive%20Web%20Design)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-responsive-web-design%2F&linkname=HTML%20Responsive%20Web%20Design](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-responsive-web-design%2F&linkname=HTML%20Responsive%20Web%20Design)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-responsive-web-design%2F&linkname=HTML%20Responsive%20Web%20Design](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fhtml-responsive-web-design%2F&linkname=HTML%20Responsive%20Web%20Design)[https://www.addtoany.com/share](https://www.addtoany.com/share)