Học CNTT CSS và CSS3

Truy vấn Media trong CSS

Mục lục

@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.

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 in
screenDùng cho máy tính, tablet, smartphone
speechDù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 viewport
colorSố bit cho mỗi màu sắc của thiết bị sử dụng
color-indexSố lượng màu sắc mà thiết bị sử dụng có thể hiển thị
heightChiều cao của viewport
max-aspect-ratioTỉ lệ tối đa giữa chiều rộng và chiều cao của viewport
max-colorSố bit tối đa cho mỗi màu sắc của thiết bị sử dụng
max-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 viewport
max-monochromeSố bit tối đa cho mỗi màu sắc của thiết bị đen trắng
max-resolutionĐộ phân tối đa giải của thiết bị đầu ra, sử dụng dpi hoặc dpcm
max-widthChiều rộng tối đa của viewport
min-aspect-ratioTỉ lệ tối thiểu giữa chiều rộng và chiều cao của viewport
min-colorSố bit tối thiểu cho mỗi màu sắc của thiết bị sử dụng
min-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 viewport
min-monochromeSố bit tối thiểu cho mỗi màu sắc của thiết bị đen trắng
min-resolutionĐộ phân giải tối thiểu của thiết bị đầu ra, sử dụng dpi hoặc dpcm
min-widthChiều rộng tối thiểu của viewport
monochromeSố bit cho mỗi màu sắc của thiết bị đen trắng
orientationHướ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 dpcm
widthChiề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>
Chủ Nhật, 16/06/2019 14:18
4,4 ★ 13 👨 7.017
#CSS

Bạn nên đọc

0 Bình luận
Sắp xếp theo
❖
Xóa Đăng nhập để Gửi
    ❖ CSS và CSS3

    Cũ vẫn chất

    Xem thêm
    CSS và CSS3