Chủ nhật, ngày 11 tháng 12 năm 2016

CSS3 – Media Query và Responsive Web Design

Ngày đăng: 9/4/2012, 8:21:17PM | Lượt xem: 2,466
Hot!

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.

screen - style - desginTí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ẻ <p> là bold.

<style>
@media screen
  {
  body {width:800px;}
  }
@media handheld
  {
  body {width:300px}
  }
@media screen,handheld
  {
  p {font-weight:bold;}
  }
</style>

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ẻ <link> trong HTML hoặc thẻ <?xml-stylesheet> 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:

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

<?xml-stylesheet media="screen and (color)" rel="stylesheet" href="example.css" ?>

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

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

}

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.

Media Query Structure

Ngoài ra bạn có thể sử dụng thêm hai toán tử là notonly 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:

Responsive Web Design Demo Wide ScreenKhi 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:

Responsive Web Design Demo 2
Mã nguồn hoàn chỉnh:

<html>
<head>
<title>Responsive Design Demo</title>

<style type="text/css">
header, section, aside, footer {
	background: wheat;
	border: 1px solid gray;
	margin: 2px;
	font-family: Sans-serif;
	font-size: 1.6em;
	font-style: bold;
}
aside, section {
	height: 300px;
}
footer{
	clear: both;
}

/* Media queries */

@media screen {
	section {
		width: auto;
		float: none;
	}
	aside {
		display: none;
	}
}
@media screen and (min-width: 400px) {
	section {
		width: auto;
		float: none;
	}
	aside {
		width: auto;
		height: 200px;
		float: none;
		display: block;
	}

}

@media screen and (min-width: 800px) {
	section {
		width: 78%;
		float: left;
	}
	aside {
		width: 20%;
		height: 300px;
		float: right;
		display: block;
	}
}
</style>
</head>

<body>
	<header>
		Header
	</header>

	<section>
		Main Content
	</section>

	<aside>
	Sidebar
	</aside>

	<footer>
		Footer
	</footer>
</body>
</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.

 Chia sẻ qua: 
Hot!
Ý kiến bạn đọc

These items will be permanently deleted and cannot be recovered. Are you sure?

Gallery

image

Maecenas viverra rutrum pulvinar

Maecenas viverra rutrum pulvinar! Aenean vehicula nulla sit amet metus aliquam et malesuada risus aliquet. Vestibulum rhoncus, dolor sit amet venenatis porta, metus purus sagittis nisl, sodales volutpat elit lorem…

Read more

Text Links

Thiết kế logo chuyên nghiệp Insky
DAFABET
W88 w88b.com/dang-ky-tai-khoan-w88
W88
Copyright © 2011 - 2012 vietshare.vn by phamkhuong102@gmail.com doanhkisi2315@gmail.com. All rights reserved.