Quy tắc @media trong CSS với thiết kế responsive

• Dùng thẻ meta viewport
• Quy tắc @media

Trong phần này chủ yếu nói về quy tắc @media trong CSS, tuy nhiên cũng đề cập các vấn đề cơ bản về thiết kế trang đảm bảo responsive bằng CSS. Một trang web thiết kế mà đảm bảo tính chất responsive (dựa trên HTML, CSS hoặc Javascript) có nghĩa là trang đó đó được thiết kế để hiện thị tốt trên tất cả các loại kích thước màn hình và độ phân giải (từ điện thoại, máy tính bảng, destop, máy in, tv)

Hãy dùng thẻ meta viewport

Khung nhìn - viewport của browser là phần diện tích của sổ tại đó nội dung trang web được hiện thị. Rất nhiều trường hợp khung nhìn trình duyệt và kích thước nội dung của trang là không giống nhau, khi đó sẽ xuất hiện thanh cuộn để bạn cuộn nội dung.

Trên các trang của bạn nên có thẻ meta với nội dung sau:

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

Thiết lập width=device-width cho trình duyệt biết (đặc biệt là trình duyệt trên điện thoại) khung nhìn hiện thị trang bằng kích thước màn hình (không xuất hiện thanh cuộn đứng). initial-scale=1 tỉ lệ thu phóng (đơn vị pixel) của trang khi mới tải hoặc khi xoay màn hình, với giá trị bàng 1 nghĩa là thu phóng 100% - màn hình xoay ngang dọc đều cùng tỉ lệ thu phóng.

Quy tắc @media

Quy tắc @media cho phép bạn viết một tập hợp các quy tắc CSS nó chỉ có hiệu lực tùy thuộc vào thông số cụ thể của cửa sổ, màn hình ...

Cú pháp:

@media media-types [and media-query-conditions]? {
    /* các đoạn mã CSS */
}

media-types

Tham số media-types là loại màn hình, nó có thể nhận nhiều giá trị cách nhau bởi dấu phảy ,. Các giá trị như:

• all : tất cả các loại thiết bị hiện thị
• print : khi ở chế độ xem trước in (print preview)
• screen : màn hình màu máy tính

Ví dụ:

@media print {
    .footer {
        display: none;
    }
}

media query

Trong quy tắc @media còn có thể chứa các truy vấn media, là các thông số cụ thể hơn về khung nhìn, màn hình ... các kiểu media (media type) hay các truy vấn media (media query) có thể kết hợp với nhau bởi các toán tử ký hiệu: và and, hoặc or, phủ định not

Dưới đây là một một số loại query media

Chiều rộng width của khung nhìn với vấn width, min-width và max-width

• min-width: leng; chiều rộng tối thiểu của cửa sổ
• max-width: leng; chiều rộng tối đa

@media (min-width: 1200px) {
  /* các CSS hiệu lực khi màn hình từ 1200px trở đi*/
}

@mdia print and (min-width: 25cm)
{
    /* các CSS hiệu lực khi in ấn, và chiều rộng thiết bị từ 25cm trở lên */
}

@media screen and (min-width: 400px) and (max-width: 700px)
{
    /* Các CSS khi màn hình từ 400px đến 700px */
}

Chiều cao khung nhìn với vấn height, min-height và max-height các dùng tương tự như chiều rộng.

Chiều rộng của thiết bị với các truy vấn device-width, min-device-width và max-device-width

@media screen and (device-width: 800px)
{
    /* các CSS hiệu lực khi là màn hình, màn có chiều rộng 800px */
}

Chiều cao của thiết bị với các truy vấn device-height, min-device-height và max-device-height

Hướng màn hình với truy vấn orientation

• orientation:portrait : màn hình xoay đứng
• orientation:landscape : màn hình xoay ngang

@media all and (orientation:landscape)
{
    /* Các CSS khi màn hình xoay ngang */
}