Responsive Web Design với Media Query

Theo thống kê hiện nay, cùng với sự phát triển bùng nổ của smartphone và tablet thì có khoảng hơn 60% lượng truy cập trực tuyến đến từ nền tảng di động.

Hôm 21/04, Google đã tung ra bản cập nhật mới mảng tìm kiếm trên thiết bị di động của mình có tên là “Mobile-geddon”, ưu tiên các website có giao diện thân thiện với thiết bị di động. Với Google, gã khổ lồ trong lĩnh vực tìm kiếm thì website có giao diện thân thiện với thiết bị di động là gì?

Font chữ lớn, đường link dễ click. Nhưng những website có kích thước được điều chỉnh phù hợp với màn hình của bất kỳ thiết bị có trình duyệt web hoàn chỉnh mới là điều được google ưu tiên – Hiểu một cách đơn giản nhất là người dung chỉ cần kéo lên và xuống để có thể xem nội dung website của bạn.

Đó chỉ là một ví dụ để bạn thấy rằng cần có sự thay đổi trong thiết kế website.

(Nguồn Internet) Với Responsive Web Design: Một xu hướng mới trong thiết kế và phát triển web, nhằm vào việc tạo các trang web có khả năng tối ưu và tương thích trên mọi thiết bị truy cập internet máy tính cá nhân, smartphone, hoặc tablet. Responsive Web có khả năng tự động thay đổi kích thước của nội dung và hình ảnh cho phù hợp với nhiều loại kích thước màn hình khác nhau để chắc chắn rằng website đó được truy cập hiệu quả và dễ dàng trên bất kỳ thiết bị nào. Đây được coi là xu thế của tương lai bởi tính tiện lợi và tiết kiệm chi phí của nó do không cần thiết kế view riêng cho những thiết bị mobile.

• Media query là một bước cải tiến của luật @media bằng cách kết hợp Media Type và các thông số khác như độ phân giải, kích thước, màu sắc … để tăng thêm tính chặt chẽ và linh hoạt của các luật này. Mỗi luật của Media Query đều là một biểu thức logic và chỉ được áp dụng khi nó có giá trị true.
• Syntax:

        @media not|only mediatype and (media feature) {
	        //css-attribute
        }

        <link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

• Media Keywords, chẳng hạn như "and" và "or" có thể nhóm các Media features với nhau. Nó cũng có thể bị bỏ qua với các trình duyệt cũ nếu browser này không hỗ trợ Media Query.
  • "and", "or": Phải bằng true đối với các trình duyệt để có thể được áp dụng.
  • "not" sẽ làm tất cả mọi thứ mà chúng ta viết phía sau nó. Ngoài ra, trình duyệt cũ không hỗ trợ Media Query sẽ không hiểu từ khóa "not" và do đó nó sẽ không được áp dụng.
  • "only": Các trình duyệt cũ không hỗ trợ.
• Media Types:
  • all: Dùng cho tất cả các loại Media Type
  • handheld: Dùng cho các thiết bị nhỏ, thiết bị cầm tay
  • screen: Dùng cho computer screen
  • print: Dùng cho máy in.
  • Xem thêm tại: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
• Media Features: Mô tả các yêu cầu mà một thiết bị phải đáp ứng để hiển thị một cách nhất định. Các Media Features sau đây sẽ cho phép bạn nhắm mục tiêu các thiết bị cụ thể và hiển thị một trang web phù hợp với nhiều loại thiết bị.
  • min-awidth: lớn hơn hoặc bằng chiều rộng tối thiểu
  • max-awidth: nhỏ hơn hoặc bằng chiều rộng tối thiểu
  • min-height: lớn hơn hoặc bằng chiều cao tối đa
  • max-height: nhỏ hơn hoặc bằng chiều cao tối đa
  • device-awidth, device-height: Thay vì tính toán dựa trên độ rộng, độ cao của trình duyệt thì nay nó sẽ tính toán dựa trên kích cỡ của thiết bị.
  • min-resolution, max- resolution: Tính toán dựa vào độ phân giải của màn hình (dpi – dots per inch hay dpcm – dots per centimeter).
  • orientation: Tính toán dựa trên trạng thái của thiết bị (portrait – xoay dọc, landscape – quay ngang).
  • Xem thêm tại: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
• Ta sử dụng media query kết hợp với các expression để quy định các luật hiển thị trên trang web ngoài các tính năng mà media type có thể làm.
• Các trình duyệt/thiết bị sau đã hỗ trợ hoàn toàn Media Query:
  • Firefox 3.5.
  • Chrome v.21
  • Opera 9
  • Safari 4
  • IE9
  • Media Query cũng được hỗ trợ trong các trình duyệt cho các thiết bị di động chẳng hạn như Opera Mini 4, Opera cho Nintendo Wii, iPhone, và trình duyệt Nokia S60.

**** Đoạn code HTM5 sau sử dụng stylesheet bootstrap và một ít về media query để bạn dễ hình dung hơn. Bạn có thể chạy đoạn code trên, resize trình duyệt để thấy sự thay đổi. Inspect để xem thêm về media query trong stylesheet của bootstrap. - ```HTML <!DOCTYPE html> <html lang="vi"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <style type="text/css"> * { margin: 0px; padding: 0px;}

                    margin: 0 auto;
                }
                .content {
                	display: inline-block;
                }
                .block{
                    float: left;
                    background: #CCC;
                    margin: 10px;
                    awidth: 105px;
                    height: 105px;
                    text-align: center;
                    font-weight: bold;
                    line-height: 100px;
                }
                .footer {
                    border-top: 1px solid #ccc;
                    padding: 10px 0;
                    text-align: right;
                    margin-top: 20px;
                }
                @media (min-awidth: 1296px) {

                    .block {background: yellow;}
                }
                @media (max-awidth: 1296px) and (min-awidth: 768px) {

                    .block {background:#8DC63F;}
                }
                @media (max-awidth: 768px)  {

                    .block {background:#F90;}
                }
            </style>
        </head>
        <body>
            <section id="container">
                <header>
                    <nav class="navbar navbar-default navbar-static-top">
                      <div class="container">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">Home</a></li>
                            <li><a href="#">Link</a></li>
                          </ul>
                      </div>
                    </nav>
                </header>
                <section class="content">
                    <div class="block" id="b1">box 1</div>
                    <div class="block" id="b2">box 2</div>
                    <div class="block" id="b3">box 3</div>
                    <div class="block" id="b4">box 4</div>
                    <div class="block" id="b5">box 5</div>
                    <div class="block" id="b6">box 6</div>
                    <div class="block" id="b7">box 7</div>
                    <div class="block" id="b8">box 8</div>
                    <div class="block" id="b9">box 9</div>
                </section>
                <footer class="footer">
                    <div>
                        <p>Monthly Report</p>
                    </div>
                </footer>
            </section>
        </body>
    </html>

###Kết quả:
![111.png](/uploads/images/430f69e148c3513e5689a7bbd194bbe880e88f71/e51d918db9c9d1d1190944e9735d004cd8b56594.png)
![2222.png](/uploads/images/430f69e148c3513e5689a7bbd194bbe880e88f71/5acb4354514b7baa529353f62f65a3a7826a28a7.png)
![3333.png](/uploads/images/430f69e148c3513e5689a7bbd194bbe880e88f71/909f0564a10d10f9af0cba5b31e615bb66a47444.png)

Bạn có thể kiêm tra tính thân thiện của website theo đánh giá của Google tại link sau: https://www.google.com/webmasters/tools/mobile-friendly/

Reference:
- http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
- http://code.tutsplus.com/tutorials/quick-tip-a-crash-course-in-css-media-queries--net-14531