CSS3 – Media Query và Responsive Web Design

Tính năng Media Query của CSS3 dự định sẽ mang lại một “kỉ nguyên” mới của kĩ thuật thiết kế web mới trong năm 2012. Nhờ tính năng, các trang web sẽ hiển thị linh hoạt hơn trên các loại thiết bị, độ phân giải màn hình, kích thước trình duyệt khác nhau mà không cần phải sử dụng bất kì mã xử lý javascript nào. Kĩ thuật thiết kế này được gọi là Responsive Web Design và được ứng dụng rất phổ biến trên thế giới.

CSS2: Media Type

Phiên bản CSS 2 mặc dù chưa hỗ trợ  Media Query nhưng cũng đã hỗ trợ các Media Type. Tính năng này cho phép xác định các định dạng cho mỗi loại thiết bị nhưng không linh hoạt và rất hạn chế.

Media Type	Description
All	Used for all media type devices
Aural	Used for speech and sound synthesizers
Braille	Used for braille tactile feedback devices
Embossed	Used for paged braille printers
Handheld	Used for small or handheld devices
Print	Used for printers
Projection	Used for projected presentations, like slides
Screen	Used for computer screens
Tty	Used for media using a fixed-pitch character grid, like teletypes and terminals
Tv	Used for television-type devices

Trong cùng một style sheet, bạn có thể sử dụng các luật (hoặc chỉ thị) @media để quy định loại thiết bị nào sẽ được áp dụng bởi các khối định dạng CSS bên trong mỗi luật đó.
Ví dụ như đoạn style sheet sau sẽ thiết lập chiều rộng của trang web là 800px khi được xem trên máy tính và 300px khi xem trên các thiết bị cầm tay.  Cả hai loại thiết bị này đều hiển thị font-weight của các thẻ là bold.

01

CSS3 : Media Query

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 là một biểu thức logic và chỉ được áp dụng khi nó có giá trị true.
Các Media Query có thể được sử dụng bằng các cách dùng thẻ trong HTML hoặc thẻ trong XML, ngoài ra thì trong HTML bạn có thể dùng các luật @import và @media. Các ví dụ sau sẽ áp dụng style css cho các loại máy vi tính và hỗ trợ màu:

1	"stylesheet" type="text/css" href=" example.css" media="screen and (color)">

2

3	"screen and (color)" rel="stylesheet" href="example.css" ?>

4

5	@import url(style.css) screen and (color);

6

7	@media screen and (color) and (min-width:400px) {

8

9

}

Một Media Query được tạo thành từ một Media Type  và không hoặc nhiều expression (biểu thức) nối với nhau bằng toán tử and. Cấu trúc của một Media Query có dạng:
-          Media Feature: bao gồm các thuộc tính như width, height, device-width, device-height, color, resolution, … Các thuộc tính này thường được thêm các tiếp đầu ngữ min- hoặc max- để xác định phạm vi ảnh hưởng của thuộc tính trong Media Query.

Media Features (http://reference.sitepoint.com/css/mediaqueries)
Feature	Value	Min/Max	Description
color	integer	yes	number of bits per color component
color-index	integer	yes	number of entries in the color lookup table
device-aspect-ratio	integer/integer	yes	aspect ratio
device-height	length	yes	height of the output device
device-width	length	yes	width of the output device
grid	integer	no	true for a grid-based device
height	length	yes	height of the rendering surface
monochrome	integer	yes	number of bits per pixel in a monochrome frame buffer
resolution	resolution (“dpi” or”dpcm”)	yes	resolution
scan	“progressive”or”interlaced”	no	scanning process of ”tv”media types
width	length	yes	width of the rendering surface

-          Expression: bao gồm một Media Feature và không hoặc một giá trị của nó được ngăn cách bởi dấu hai chấm “:”. Mỗi Expression được bao trong cặp ngoặc đơn.
Ví dụ: (color) và (min-width : 200px).
Nhiều expression nối với nhau bằng toán tử and: (color) and (min-width : 200px)
-          Media Type: Tham khảo bảng ở phần trên.
-          Media Query: Bắt đầu bằng một Media Type và theo sau là một chuỗi Expression cũng được nối với nhau bằng toán tử and.
-          Các Media Query có thể được nối với nhau bằng dấu phẩy “,”, tương tự như khi dùng selector của css.

Ngoài ra bạn có thể sử dụng thêm hai toán tử là not và only vào đầu Media Query. Công dụng của hai toán tử này:
-Toán tử not giúp đảo ngược giá trị của Media Query. Toán tử này có độ ưu tiên thấp nhất nên sẽ được tính cuối cùng.
-Toán tử only giúp ẩn các style sheet trên các trình duyệt không hỗ trợ Media Query.

Demo: Thiết kế một trang web theo Responsive Design

Trình duyệt với kích thước >800px:
Khi thu nhỏ width lại bạn sẽ thấy vị trí sidebar thay đổi và biến mất nếu như nhỏ hơn 400px:

Mã nguồn hoàn chỉnh:

01

<html>

02

<head>

03	<title>Responsive Design Demo</title>

04

05	<style type="text/css">

06	header, section, aside, footer {

07	background: wheat;

08	border: 1px solid gray;

09	margin: 2px;

10	font-family: Sans-serif;

11	font-size: 1.6em;

12	font-style: bold;

13

}

14	aside, section {

15	height: 300px;

16

}

17

footer{

18	clear: both;

19

}

20

21	/* Media queries */

22

23	@media screen {

24

section {

25	width: auto;

26	float: none;

27

}

28

aside {

29	display: none;

30

}

31

}

32	@media screen and (min-width: 400px) {

33

section {

34	width: auto;

35	float: none;

36

}

37

aside {

38	width: auto;

39	height: 200px;

40	float: none;

41	display: block;

42

}

43

44

}

45

46	@media screen and (min-width: 800px) {

47

section {

48	width: 78%;

49	float: left;

50

}

51

aside {

52	width: 20%;

53	height: 300px;

54	float: right;

55	display: block;

56

}

57

}

58

</style>

59

</head>

60

61

<body>

62

<header>

63

Header

64

</header>

65

66

<section>

67	Main Content

68	</section>

69

70

<aside>

71

Sidebar

72

</aside>

73

74

<footer>

75

Footer

76

</footer>

77

</body>

78

</html>

Tham khảo cú pháp hoàn chỉnh của Media Query tại: https://developer.mozilla.org/en/CSS/media_queries
YinYang’s Programming.
(http://yinyangit.wordpress.com/2012/02/18/css3-media-query-va-responsive-web-design/)