seo căn bản, thủ thuật blogspot, thủ thuật seo,giao dien blogspot

1. @media CSS là gì?

@media CSS là một tính năng mới của CSS3, tính năng này cho phép ta tùy chỉnh CSS cho nhiều thiết bị khác nhau từ máy tính cho đến điện thoại smart phone và các thiết bị in ấn. Thuộc tính này có cú pháp như sau:

@media not|only mediatype and (media feature) {

    CSS-Code;

}

Trong đó mediatype gồm các thuộc tính hay sử dụng sau:

all: Dùng cho mọi thiết bị
print: Dùng cho máy in
screen: Dùng cho máy tính và các thiết bị smart phone

Thực tế vẫn còn nhiều nữa nhưng với lập trình web thì chúng ta thường sử dụng ba thuộc tính đó thôi. Và trước khi đi vào tìm hiểu các thuộc tính thì ban phải phân biệt hai khái niệm sau:

Device: Là thiết bị sử dụng website như Laptop, Desktop, Iphone, ..
Viewport: Là kích thước hiển thị của giao diện.

Và media featured thì gồm các thuộc tính sau:

aspect-ratio: Tỉ lệ giữa chiều rộng và chiều cao của viewport
min-aspect-ratio: Tỉ lệ tối thiểu giữa chiều rộng và chiều cao của viewport
max-aspect-ratio: Tỉ lệ tôi đa giữa chiều rộng và chiều cao của viewport
color: Số bits cho mỗi màu sắc của device
color-index: Số lượng màu sắc mà device có thể hiển thị
device-aspect-ratio: Tỉ lệ giữa chiều rộng và chiều cao của device
max-device-aspect-ratio: Tỉ lệ tối đa giữa chiều rộng và chiều cao của device
min-device-aspect-ratio: Tỉ lệ tối thiểu giữa chiều rộng và chiều cao của device
device-height: Chiều cao của device
device-width: Chiều rộng của device
height: Chiều cao của viewport
width: Chiều rộng của viewport
max-width: Chiều rộng tối đa của viewport
min-width: Chiều rộng tối thiểu của viewport
max-height: Chiều cao tối đa của viewport
min-height: Chiều cao tối thiểu của viewport
min-device-width: Chiều rộng tối thiểu của device
max-device-width: Chiều rộng tối đa của device
min-device-height: Chiều cao tối thiểu của device
max-device-height: Chiều cao tối đa của device
orientation: Định hướng của khung nhìn (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)

Ví dụ: Nếu chiều rộng của trình duyệt nhỏ hơn hoặc bằng 480px thì ẩn class .large.

@media only screen and (max-width: 480px){

  .large{

      display: none;

  }

}

Với đoạn code này thì khi bạn sử dụng điện thoại hoặc kéo nhỏ trình duyệt nhỏ hơn 480px thì đối tượng HTML đang sử dụng class .large sẽ bị ẩn. Nếu bạn thiết lập trong khoảng nào đó thì sử dụng thêm một điều kiện and nữa.

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

  .large{

      display: none;

  }

}

Với đoạn code này thì khi chiều rộng nằm trong khoảng 324px - 480px thì mới có tác dụng. Cò nếu ban muốn chỉ có tác dụng cho máy in thì làm như sau:

@media only print

  .large{

      display: none;

  }

}

Ngoài cách tạo trực tiếp trong CSS như vậy thì ban có thể tạo một file riêng và sử dụng thuộc tính media của thẻ link.

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

2. Sử dụng @media để tạo Responsive Website

Việc sử dụng media đòi hỏi bạn phải thành thạo CSS nói chung và am hiểu về độ phân giải các thiết bị nói riêng. Và sau đây mình sẽ làm một ví dụ nhỏ về cách tạo Responsive.

Cho đoạn mã HTML sau: XEM DEMO

<!DOCTYPE html>

<html>

    <head>

        <title>Tạo responsive</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style>

            .left, .right{

                height: 400px;

            }

            .left{

                background: blue;

                float: left;

                width: 70%;

            }

            .right{

                background: red;

                float: right;

                width: 30%;

            }

        </style>

    </head>

    <body>

        <div class="container">

            <div class="left">

                LEFT

            </div>

            <div class="right">

                RIGHT

            </div>

        </div>

    </body>

</html>

Chạy giao diện này lên sẽ như sau:

Đề bài yêu cầu hãy tạo responsive cho layout này theo đúng tiêu chuẩn sau:

Nếu kích thước trình duyệt nhỏ hơn 769px thì hiển thị 1 hàng dọc
Ngược lại thì hiển thị hai hàng dọc

Lúc này ta sẽ thiết lập CSS như sau:

@media only screen and (max-width: 768px){

    .left, .right{

        float: none;

        width: 100%;

    }

}

Chỉ cần thêm đoạn mã đó thôi là bài toán được giải quyết: XEM DEMO

Và đây là hình kết quả nếu bạn kéo nhỏ trình duyệt nhỏ hơn 789px.

1

Sử dụng @Media CSS tạo Responsive cho Website phần 2

3. Sử dụng @Media với các thiết bị di động và máy tính

Với danh sách các thuộc tính của @media thì ta dễ dàng phát hiện ra các thiết bị. Và sau đây là danh sách các câu query @media cho các thiết bị thông dụng.

Sử dụng @Media CSS tạo Responsive cho Website phần 1

1. @media CSS là gì?

2. Sử dụng @media để tạo Responsive Website

Sử dụng @Media CSS tạo Responsive cho Website phần 2

Bài đăng phổ biến

Thiết kế website

LĨNH VỰC HOẠT ĐỘNG

HỖ TRỢ KHÁCH HÀNG