[RWD Bài 3] Media Queries Là Gì ? Và Cách Sử Dụng

Media Query la gi va cach su dung trong Responsive Web Design

Media Queries là gì và cách sử dụng trong Responsive Web Design – ảnh bởi seobility.net

Trong bài này chúng ta cần hiểu Media Queries là gì ? Và cách sử dụng nó như thế nào trong Responsive Web Design.

Media Queries là gì ?

Media Queries tạm dịch qua tiếng Việt: Truy vấn phương tiện là một kỹ thuật CSS, được giới thiệu trong CSS3. Cho phép kết xuất nội dung để thích ứng với các điều kiện như độ phân giải màn hình (ví dụ: màn hình điện thoại thông minh so với màn hình máy tính). Nó đã trở thành một tiêu chuẩn được đề xuất của W3C vào tháng 6 năm 2012 và là một công nghệ nền tảng của thiết kế web đáp ứng (RWD).

Với Media Queries thì bạn có thể định dạng cách hiển thị trang web sao cho nó hiển thị Responsive trên nhiều kích cỡ trình duyệt khác nhau như cái hình ở đầu bài ấy. Nếu thiết bị là Desktop trở lên thì độ rộng tối thiểu của màn hình @min-width phải là 1024px | Tablet để đứng thì có độ rộng tối thiểu 768px và cao nhất là 1024px trên Smartphone thì tối đa là 767px chẳng hạn.

Khi người dùng xem trang web bằng thiết bị có màn hình cỡ nào thì nó sẽ tự đối chiếu và đưa ra định dạng trang web tương ứng. Ví dụ cụ thể thì bạn xem tiếp phần sử dụng Media Queries là sẽ hình dung.

Cách sử dụng Media Queries

Các nhóm kích thước thiết bị điển hình

Hiện nay có không biết bao nhiêu thiết bị với vô vàng kích thước màn hình khác nhau từ Desktop, Laptop, Tablet, Smartphone. Và nếu định hình nhiều nhóm kích thước sẽ rối nên chúng ta sẽ thường sử dụng các nhóm dưới đây:

/* (1) Màn hình nhỏ để đứng (phones, 600px và nhỏ hơn) */
@media only screen and (max-width: 600px) {...}

/* (2) Màn hình nhỏ để ngang(phones 600px và lớn hơn) */
@media only screen and (min-width: 600px) {...}

/* (3) Màn hình cỡ thường để đứng (tablets, 768px và lớn hơn) */
@media only screen and (min-width: 768px) {...}

/* (4) Màn hình lớn (laptops/desktops, 992px và lớn hơn) */
@media only screen and (min-width: 992px) {...}

/* (5) Màn hình lớn với độ phân giải cao (màn hình 1200px, 2k, 4k, 8k và lớn hơn) */
@media only screen and (min-width: 1200px) {...}

Ví dụ về sử dụng Media Queries

Thay vì làm ví dụ chia cột, phóng to thu nhỏ trên các thiết bị thì nó rắc rối quá, qua ví dụ 1 dưới đây bạn chỉ cần hình dung với mỗi nhóm kích thước ta định dạng cho nó một màu sắc là OK.

Ta xét một ví dụ đơn giản là tạo một cái Box và gán cho nó màu đỏ nếu màn hình có độ rộng nhỏ hơn 600px.

Khi lớn hơn 600px thì cho nó màu xanh lá cây;
Lớn hơn 768px thì cho nó màu xanh da trời,
Lớn hơn 992px thì cho nó màu cam;
Lớn hơn 1200px thì cho nó màu hồng.

Giờ bạn tạo một file vidu2.html và chép đoạn code dưới đây vào, sau đó mở nó với trình duyệt Chrome và nhấn Ctrl + cuộn chuột để xem kết quả nhé.

<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <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:600px) {
         /* 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>Hello World</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>Lorum Ipsum</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
         </div>
         <div class="right">
            <h2>About</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
         </div>
      </div>
      <div style="background-color:#e5e5e5;text-align:center;padding:10px;margin-top:7px;">© copyright w3schools.com</div>
   </body>
</html>

Kết quả thế nào ? Hay ho phết đúng không, giờ thay vì đổi màu đối tượng thì bạn xét ví dụ 2 có chia cột dưới đây nhé. (Cũng tạo mới file vidu3.html rồi copy nguyên đoạn dưới đây dán vào, sau đó mở nó lên bằng Chrome và cuộn chuộc để xem như ví dụ vừa rồi).

<!DOCTYPE html> 
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <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:600px) {   /* 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>Hello World</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>Lorum Ipsum</h2>
                
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
              
         </div>
           
         <div class="right">
                
            <h2>About</h2>
                
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
              
         </div>
      </div>
      <div style="background-color:#e5e5e5;text-align:center;padding:10px;margin-top:7px;">© copyright w3schools.com</div>
   </body>
</html>

Ví dụ này nó cũng dễ hiểu thôi, đó là trang web chia làm 3 cột (trong đó có 4 box tương ứng với từng độ rộng định sẵn) ở chế độ màn hình lớn hơn 600px, nếu màn hình xem dưới 600px thì nó sẽ hiển thị thành một cột, mỗi box sẽ đưa về độ rộng 100% hết.

Chốt lại: Như 2 ví dụ vừa rồi thì các bạn thấy nó đổi màu theo từng nhóm kích thước màn hình ở ví dụ 1 cũng như đổi độ rộng của các box về 100% ở ví dụ 2. Tuy nhiên nó không chỉ có thế, mà theo đó ta có thể ứng dụng để ẩn bớt thành phần cũng như định dạng cách hiển thị nó khác đi ở từng nhóm màn hình.

Một số nhóm kích thước màn hình khác

Trong các nhóm ví dụ ở trên thì ta chỉ thấy khi nó lớn hơn cỡ màn hình nào thì dùng, song ta cũng có thể tạo nhóm kích thước từ cỡ này đến cỡ kia như dưới đây:

@media (min-width: 1281px) {

@media (min-width: 1025px) and (max-width: 1280px) {

@media (min-width: 768px) and (max-width: 1024px) {

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

@media (min-width: 481px) and (max-width: 767px) {

@media (min-width: 320px) and (max-width: 480px) {