Hiểu về CSS Media Types và Media Queries

CSS Media Types và Media Queries giúp người dùng định nghĩa các style nhất định phù hợp với loại thiết bị chung (screen, print, v.v.) hoặc các đặc điểm của thiết bị (độ phân giải màn hình, kích thước viewport, v.v.)

Cú pháp Media Queries

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

Media query được áp dụng khi:

• mediatype khớp với loại thiết bị hiển thị tài liệu
• Nếu not/only không được định nghĩa thì media query áp dụng cho tất cả mediatypes
• Nếu not/only được chỉ định thì media query không/chỉ áp dụng cho mediatype tương ứng

Người dùng có thể có nhiều stylesheet khác nhau, mỗi cái tương ứng với một media khác nhau. Ví dụ, stylesheet riêng cho print và screen.

<link rel="stylesheet" media="print and|not|only (expressions)" href="print.css">

<link rel="stylesheet" media="screen and|not|only (expressions)" href="screen.css">

Media Types trong CSS3

Lưu ý: Các media type cũ như tty, tv, projection, handheld, braille, embossed, aural đã bị deprecated trong CSS3.

Các phương pháp tạo stylesheet phụ thuộc media

• Sử dụng @media At-rules
• Sử dụng @import At-rules
• Sử dụng HTML <link> element với thuộc tính media

Ví dụ 1: Responsive design với @media

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  * { box-sizing: border-box; }
  .col { float: left; width: 20%; padding: 40px; }
  body { background-color: lemonchiffon; margin: 20px; }
  @media screen and (max-width: 850px) {
    .col { width: 50%; }
    body { background-color: mediumseagreen; }
  }
  @media screen and (max-width: 550px) {
    .col { width: 100%; }
    body { background-color: powderblue; }
  }
</style>
</head>
<body>
  <div class="row">
    <div class="col" style="background-color:#373;"></div>
    <div class="col" style="background-color:#363;"></div>
    <div class="col" style="background-color:#353;"></div>
    <div class="col" style="background-color:#343;"></div>
    <div class="col" style="background-color:#333;"></div>
  </div>
</body></html>

Kết quả

Khi kích thước màn hình > 850px:

Khi kích thước màn hình 550px - 850px:

Khi kích thước màn hình < 550px:

Ví dụ 2: @import cho screen và print

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
  @import url(screen.css) screen;
  @import url(print.css) print;
</style>
</head>
<body>
  <p> Vivamus commodo, dolor eu porttitor sagittis, orci nisl consectetur ipsum, vel volutpat nibh lectus at erat. Cras scelerisque faucibus tellus aliquam commodo.Donec sem urna, facilisis at ipsum id, viverra sollicitudin est. Nam rhoncus sollicitudin lorem, a accumsan purus varius eget. </p>
  <p class="two">In ultrices lectus nisi. Nulla varius ex ut tortor congue viverra. Sed sodales vehicula leo, vitae interdum elit vehicula nec. Donec turpis nunc, iaculis et nisi sit amet, feugiat lacinia metus. </p>
  <p>Suspendisse eget ligula et risus lobortis ornare id at elit. Suspendisse potenti. Vivamus pellentesque eleifend pellentesque. Vestibulum neque ante, iaculis a sagittis et, fermentum at metus.</p>
</body>
</html>

CSS document (screen.css):

p { color: navy; font-style: italic; }
.two { color: #c303c3; font-size: 20px; }
body { background-color: honeydew; }

CSS document (print.css):

p { color: red; font-style: italic; }
.two { color: #989898; font-size: 40px; }

Kết quả

Khi tài liệu hiển thị trên màn hình (screen mediatype):

Khi tài liệu hiển thị cho in ấn (print mediatype):

Media Features thường dùng:

• width, min-width, max-width - chiều rộng viewport
• height, min-height, max-height - chiều cao viewport
• orientation - portrait | landscape
• resolution - độ phân giải (dpi, dpcm, dppx)
• hover, pointer - khả năng tương tác
• prefers-color-scheme - light | dark mode
• prefers-reduced-motion - giảm chuyển động