Responsive trong Html

Responsive là khái niệm được áp dụng trọng việc  tạo ra các trang web trông đẹp mắt trên tất cả các thiết bị (máy tính để bàn, máy tính bảng và điện thoại…)

Để tạo một website Responsive trước tiên bạn cần cài đặt viewport bằng thẻ meta bên trong thể head đầu trang. “Viewport là kích thước cửa sổ trình duyệt. 1vw = 1% chiều rộng khung nhìn. Nếu khung nhìn rộng 50cm thì 1vw là 0,5cm.”

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

Responsive cho Ảnh: Sử dụng thuộc tính chiều rộng

Nếu thuộc tính CSS width được đặt giá trị 100%, hình ảnh của bạn sẽ phản hồi và tăng giảm tỷ lệ màn hình:

<img src="minacode_banner.jpg" style="width:100%;">

Lưu ý rằng trong ví dụ trên, hình ảnh có thể được phóng to lên lớn hơn kích thước ban đầu của nó. Trong nhiều trường hợp, giải pháp tối ưu sẽ là sử dụng max-width.

Nếu thuộc tính max-width được đặt thành 100%, hình ảnh sẽ giảm tỷ lệ nếu cần, nhưng không bao giờ tăng tỷ lệ lên lớn hơn kích thước ban đầu của nó:

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

Chúng ta có thể sử dụng thẻ <picture> để Hiển thị hình ảnh khác nhau tùy thuộc vào chiều rộng trình duyệt

<picture>
  <source srcset="banner1.jpg" media="(max-width: 600px)">
  <source srcset="banner2.jpg " media="(max-width: 1500px)">
  <source srcset="banner3.jpg">
  <img src="banner2.jpg" alt="minacode-banner" style="width:auto;" >
</picture>

Responsive cho Văn bản:  Kích thước văn bản có thể được đặt bằng đơn vị "vw", có nghĩa là "chiều rộng khung nhìn". Bằng cách này, kích thước văn bản sẽ tuân theo kích thước của cửa sổ trình duyệt:

<h1 style="font-size:10vw">Xin chào! Mình là MinaCode</h1>

Responsive với Media Queries:

<style>
@media screen and (max-width: 800px) {
  .banner {
    display: none; /*Ảnh Banner sẽ biến mất khi Chiều rộng màn hình dưới 800px*/
  }
}
</style>

Responsive với Frameworks như BootStraps.

Một số thẻ khác trong Html

Thẻ Code trong Html được dụng để chứa mã máy tình ví dụ:

<code>
x = 5;
y = 6;
z = x + y;
</code>

Thẻ <kbd>được sử dụng để xác định đầu vào là dữ liệu bàn phím. Nội dung bên trong được hiển thị bằng phông chữ đơn theo cách mặc định của trình duyệt.

<p>Hãy lưu lại tài liệu của bạn bằng cách gõ <kbd>Ctrl + S</kbd></p>

Thẻ <samp> được sử dụng để xác định đầu ra mẫu từ một chương trình máy tính. Nội dung bên trong được hiển thị bằng phông chữ đơn theo cách mặc định của trình duyệt.

<p>Message from my computer:</p>
<p><samp>File not found.<br>Press F1 to continue</samp></p>

Thẻ <var> được sử dụng để xác định một biến trong lập trình hoặc trong biểu thức toán học. Nội dung bên trong thường được hiển thị bằng chữ nghiêng.

<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where <var>b</var> is the base, and <var>h</var> is the vertical height.</p>

Thẻ <pre>xác định văn bản được định dạng sẵn.

Văn bản trong một thẻ <pre> được hiển thị bằng phông chữ có chiều rộng cố định và văn bản giữ nguyên cả dấu cách và dấu ngắt dòng. Văn bản sẽ được hiển thị chính xác như được viết trong mã nguồn HTML.

<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks
</pre>

>>Còn tiếp nhé anh em>>