CSS3 Media Queries

CSS3 Media Queries.
Với sự đa dạng của các thiết bị có chức năng duyệt web như ngày nay, các web-developer rất khó để website của mình hiển thị như ý muốn trên tất cả chúng. CSS3 ra đời đã làm cho điều đó dễ dàng hơn với MEDIA QUERIES - một chức năng giúp xác định và khoanh vùng chính xác thiết bị của người dùng, từ đó đưa ra stylesheet thích hợp.

Thật thú vị và tại sao không tìm hiểu nó ngay hôm nay!!? @hay Hãy tăng giảm kích thước trình duyệt của bạn để xem 2 demo sau đây làm dc những gì nhé.

Demo1 | Demo2

#bl2 Với Media chúng ta có 2 cách dùng thông dụng, một dùng cho các External stylesheet link.

<link rel="stylesheet" type="text/css" media="screen" href="screen.css">

- Cách còn lại dùng Internal stylesheet

@media screen {
  body { font-family: sans-serif; }
  p { margin: 0px; }
}

#bl2 Background
- Đây là danh sách các nền tảng hoặc thiết bị mà Media có thể phân biệt cho đến lúc này: ‘aural’, ‘braille’, ‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’, ‘tv’, ‘embossed’, ‘speech’ và ‘all’. Các bạn hãy tìm hiểu về sự khác nhau của chúng trước khi vận dụng nhé. Thông thường mần hình của chúng ta là ‘screen’

<link rel="stylesheet" type="text/css" media="screen" href="screen.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">
/* hoặc */
@media screen {
  body { width: 900px; }
  p { margin: 0px; }
}
@media print {
  body {  width: 100%; }
}

#bl2 Media features
Với các đặt tính kết hợp này, Media sẽ xác định được chính xác những gì bạn muốn hiển thị thông qua độ phân giải, kích thước, màu sắc...

• width
• height
• device-width
• device-height
• orientation
• aspect-ratio
• device-aspect-ratio
• color
• color-index
• monochrome
• resolution
• scan
• grid

- Một số đặt tính trên có thể kết hợp với max- hoặc min- để Media queries được linh động hơn. Sau đây là một số ví dụ

/* Style chỉ được áp dụng cho màn hình kích thước lớn hơn 900px */
@media screen and (min-width: 900px) {
  .class {
    background: #666;
  }
}

/* Theo độ phân giải màn hình */
@media screen and (device-aspect-ratio: 16/9) { … }
@media screen and (device-aspect-ratio: 32/18) { … }
@media screen and (device-aspect-ratio: 1280/720) { … }

// Đây là dùng cho Ipad
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

#blsrc Reference http://www.w3.org/

Cùng wWw.blogit.info chia sẻ Thế giới công nghệ 4 sao