Truy vấn Media trong CSS

@media trong CSS là một tính năng cho phép ta tùy chỉnh CSS để phù hợp với nhiều thiết bị khác nhau như máy tính để bàn, tablet, điện thoại smartphone, thiết bị truyền hình và các thiết bị in ấn…

Các truy vấn media này sẽ xem xét các khía cạnh khác nhau như chiều rộng và chiều cao của viewport, chiều rộng và chiều cao của thiết bị hiển thị, hướng sử dụng là ngang hay dọc cùng với độ phân giải riêng để điều chỉnh cho hợp.

Tóm Tắt

Cú pháp của @media

Thuộc tính này có cú pháp như sau:

@media not|only mediatype and (media feature) {
  CSS-Code;
}

Media Type

Giá trịMô tảallDùng cho mọi thiết bịprintDùng cho máy inscreenDùng cho máy tính, tablet, smartphonespeechDùng cho thiết bị đọc màn hình

Media Feature

Giá trịMô tảaspect-ratioTỉ lệ giữa chiều rộng và chiều cao của viewportcolorSố bit cho mỗi màu sắc của thiết bị sử dụngcolor-indexSố lượng màu sắc mà thiết bị sử dụng có thể hiển thịheightChiều cao của viewportmax-aspect-ratioTỉ lệ tối đa giữa chiều rộng và chiều cao của viewportmax-colorSố bit tối đa cho mỗi màu sắc của thiết bị sử dụngmax-color-indexSố lượng màu sắc tối đa mà thiết bị sử dụng có thể hiển thịmax-heightChiều cao tối đa của viewportmax-monochromeSố bit tối đa cho mỗi màu sắc của thiết bị đen trắngmax-resolutionĐộ phân tối đa giải của thiết bị đầu ra, sử dụng dpi hoặc dpcmmax-widthChiều rộng tối đa của viewportmin-aspect-ratioTỉ lệ tối thiểu giữa chiều rộng và chiều cao của viewportmin-colorSố bit tối thiểu cho mỗi màu sắc của thiết bị sử dụngmin-color-indexSố lượng màu sắc tối thiểu mà thiết bị sử dụng có thể hiển thịmin-heightChiều cao tối thiểu của viewportmin-monochromeSố bit tối thiểu cho mỗi màu sắc của thiết bị đen trắngmin-resolutionĐộ phân giải tối thiểu của thiết bị đầu ra, sử dụng dpi hoặc dpcmmin-widthChiều rộng tối thiểu của viewportmonochromeSố bit cho mỗi màu sắc của thiết bị đen trắngorientationHướng của viewport (xoay hoặc không xoay thiết bị)resolutionĐộ phân giải của thiết bị đầu ra, sử dụng dpi hoặc dpcmwidthChiều rộng của viewport

Một số ví dụ

1. Nếu chiều rộng của trình duyệt nhỏ hơn hoặc bằng 600px thì ẩn phần tử div class example

@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

Code đầy đủ:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
 background-color: purple;
  color: white;
  padding: 20px;
}

@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}
</style>
</head>
<body>

<h2>Ẩn div khi kích thước màn hình nhỏ lại</h2>
<div class="example">Example DIV (QuanTriMang)</div>
<p>Quantrimang.com là mạng xã hội về khoa học công nghệ, mở rộng nội dung để 
đáp ứng nhu cầu của các thành viên về nhiều lĩnh vực công nghệ hơn như điện 
thoại, thiết bị thông minh, điện tử, bảo mật máy tính...</p>

</body>
</html>

2. Nếu chiều rộng của trình duyệt lớn hơn 800px thì set background màu lavender, 400px đến 999px thì màu lightsalmon, nhỏ hơn 400px thì lightblue.

body {
  background-color: lightblue;
}

@media screen and (min-width: 400px) {
  body {
    background-color: lightgreen;
  }
}

@media screen and (min-width: 800px) {
  body {
    background-color: lavender;
  }
}

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightblue;
}

@media screen and (min-width: 400px) {
  body {
    background-color: lightsalmon;
  }
}

@media screen and (min-width: 800px) {
  body {
    background-color: lavender;
}
}
</style>
</head>
<body>

<h2>Website Quản Trị Mạng</h2>
<p>Quantrimang.com là mạng xã hội về khoa học công nghệ, mở rộng nội dung để 
đáp ứng nhu cầu của các thành viên về nhiều lĩnh vực công nghệ hơn như điện 
thoại, thiết bị thông minh, điện tử, bảo mật máy tính...</p>

</body>
</html>

3. Tạo navigation menu hiển thị linh hoạt đáp ứng nhiều kích cỡ giao diện (hiển thị theo chiều ngang trên màn hình lớn và theo chiều dọc trên màn hình nhỏ):

@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}

/* Định dạng thanh điều hướng trên cùng */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Định dạng link điều hướng */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Thay đổi màu liên kết khi di chuột qua*/
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Các link trên menu xếp chồng lên nhau thay vì cạnh nhau khi màn hình có chiều rộng dưới 600px */
@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
</style>
</head>
<body>

<h2>Website Quản Trị Mạng</h2>
<p>Quantrimang.com là mạng xã hội về khoa học công nghệ, mở rộng nội dung để 
đáp ứng nhu cầu của các thành viên về nhiều lĩnh vực công nghệ hơn như điện 
thoại, thiết bị thông minh, điện tử, bảo mật máy tính...</p>

<div class="topnav">
  <a href="#">Làng Công nghệ</a>
  <a href="#">Công nghệ</a>
  <a href="#">Cuộc sống</a>
</div>

</body>
</html>

4. Tạo giao diện các cột hiển thị linh hoạt đáp ứng nhiều kích cỡ giao diện.

/* hiển thị 2 cột thay vì 4 cột mặc định khi màn hình có chiều rộng dưới 920px*/
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}

/* các cột xếp chồng lên nhau thay vì cạnh nhau khi màn hình có chiều rộng dưới 600px */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Bạn resize trình duyệt để xem sự thay đổi:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Create four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding: 10px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* hiển thị 2 cột thay vì 4 cột mặc định khi màn hình có chiều rộng dưới 920px */
@media screen and (max-width: 690px) {
  .column {
    width: 50%;
  }
}

/* các cột xếp chồng lên nhau thay vì cạnh nhau khi màn hình có chiều rộng dưới 600px */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}
</style>
</head>
<body>

<h2>Website Quản Trị Mạng</h2>
<p></p>

<div class="row">
  <div class="column" style="background-color:rgba(88,37,123, 0.2);">
    <h2>QTM</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:rgba(88,37,123, 0.3);">
    <h2>QTM</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:rgba(88,37,123, 0.4);">
    <h2>QTM</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:rgba(88,37,123, 0.5);">
    <h2>QTM</h2>
    <p>Some text..</p>
  </div>
</div>

</body>
</html>

5. Tạo layout website hiển thị linh hoạt đáp ứng nhiều kích cỡ giao diện.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Style the body */
body {
  font-family: Arial;
  padding: 10px;
  background: #e9d8f4;
  margin: 0;
}

/* Header/logo Title */
.header {
  padding: 10px;
  text-align: center;
  background: white;
  color: #58257b;
}
.header h1 {
  font-size: 40px;
}

.header p {
  font-size: 20px;
}
/* Định dạng navigation bar */
.navbar {
  display: flex;
  background-color: #58257b;
}

/* Định dạng link điều hướng */
.navbar a {
  color: #f2f2f2;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}

/* Thay đổi màu liên kết khi di chuột qua */
.navbar a:hover {
  background-color: #db7093;
  color: white;
}

/* Column container */
.row {
  display: flex;
  flex-wrap: wrap;
}

/* Tạo hai cột không bằng nhau nằm cạnh nhau */
/* Sidebar/Cột trái */
.side {
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}

/* Cột chính */
.main {
  flex: 70%;
  background-color: white;
  padding: 20px;
}

/* Hình ảnh tượng trưng */
.fakeimg {
  background-color: #baa1cc;
  width: 100%;
  padding: 20px;
}

/* Footer */
.footer {
  padding: 10px;
  text-align: center;
  background: white;
  margin-top: 10px;
}

/* Bố cục linh hoạt: các cột xếp chồng lên nhau thay vì cạnh nhau khi màn hình 
có chiều rộng dưới 600px */
@media screen and (max-width: 600px) {
  .row, .navbar {
    flex-direction: column;
  }
}
</style>
</head>
<body>

<!-- Header -->
<div class="header">
  <h1>Website Quản Trị Mạng</h1>
  <p>Kiến thức - Kinh nghiệm - Hỏi đáp</p>
  <p>Sử dụng <b>flexible</b> layout.</p>
</div>

<!-- Navigation Bar -->
<div class="navbar">
  <a href="#">Làng Công nghệ</a>
  <a href="#">Công nghệ</a>
  <a href="#">Khoa học</a>
  <a href="#">Cuộc sống</a>
</div>

<!-- Nội dung -->
<div class="row">
  <div class="side">
    <h2>Giới thiệu</h2>
    <div class="fakeimg" style="height:200px;">Ảnh</div>
    <p>Quantrimang.com là mạng xã hội về khoa học công nghệ.</p>
    <h3>Nổi bật</h3>
    <div class="fakeimg" style="height:60px;">Ảnh</div><br>
    <div class="fakeimg" style="height:60px;">Ảnh</div><br>
    <div class="fakeimg" style="height:60px;">Ảnh</div>
    <h3>Follow Me</h3>
    <p>Facebook</p>
    <p>YouTube</p>
  </div>

  <div class="main">
    <h2>Form - Biểu mẫu trong CSS</h2>
    <h5>Quách Tỉnh, 14/02/2019</h5>
    <div class="fakeimg" style="height:200px;">Ảnh</div>
    <p>Form là một phần không thể thiếu trong bất kì loại website nào.</p>
    <p>Ở bài viết này, Quantrimang.com sẽ hướng dẫn bạn cách xây dựng phần 
    giao diện hiển thị của một biểu mẫu cơ bản. Giao diện này có thể được làm 
    khá đẹp mắt với CSS</p>
    <br>
    <h2>Attribute Selector trong CSS</h2>
    <h5>Quách Tỉnh, 14/02/2019</h5>
    <div class="fakeimg" style="height:200px;">Ảnh</div>
    <p>Attribute selector là cách chọn các phần tử bạn muốn định kiểu trong 
    tài liệu HTML dựa vào thuộc tính của một hay nhiều thẻ HTML nào đó.</p>
    <p>Attribute selector có thể chọn được các đối tượng mà không cần phải 
    khai báo thêm các Class hoặc ID vào trong thẻ HTML và vẫn có thể hướng 
    được đến các thành phần đó, giúp code gọn gàng hơn và mạch lạc hơn.</p>
  </div>
</div>

<!-- Footer -->
<div class="footer">
  <h4>Giấy phép số 362/GP-BTTTT. Bộ TT&TT cấp ngày 30/06/2016.</h4>
</div>

</body>
</html>

Cú pháp của @media

Media Type

Media Feature

Một số ví dụ

mtoplist