Chủ Nhật, 29 tháng 12, 2013
CSS Media Types
Bằng cách sử dụng các quy tắc @ phương tiện truyền thông, một trang web có thể có một bố cục khác nhau cho màn hình, in ấn, điện thoại di động, máy tính bảng, vv
Các loại phương tiện truyền thông
Một số thuộc tính CSS chỉ được thiết kế cho một phương tiện truyền thông nhất định. Ví dụ như "giọng nói gia đình" tài sản được thiết kế cho các đại lý sử dụng âm thanh. Một số tài sản khác có thể được sử dụng cho các loại phương tiện truyền thông khác nhau. Ví dụ, "font-size" tài sản có thể được sử dụng cho cả màn hình và phương tiện truyền thông in ấn, nhưng có lẽ với các giá trị khác nhau. Một tài liệu thường cần một font-size lớn hơn trên một màn hình hơn trên giấy, và phông chữ sans-serif dễ đọc trên màn hình, trong khi serif dễ đọc trên giấy.
Các phương tiện truyền thông @ Rule
Các phương tiện truyền thông quy tắc @ cho phép quy tắc phong cách khác nhau cho phương tiện truyền thông khác nhau trong phong cách trang tương tự.
Phong cách trong ví dụ dưới đây cho trình duyệt để hiển thị một 14 pixel Verdana phông chữ trên màn hình. Nhưng nếu trang được in, nó sẽ là một trong 10 điểm ảnh phông Times. Nhận thấy rằng các font-weight được thiết lập để in đậm, cả trên màn hình và trên giấy:
<html>
<head>
<style>
@media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
p.test {font-weight:bold;}
}
</style>
</head>
<body>
....
</body>
</html>
<head>
<style>
@media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
p.test {font-weight:bold;}
}
</style>
</head>
<body>
....
</body>
</html>
Thấy nó cho mình! In trang này (hoặc mở Print Preview), và bạn sẽ thấy rằng đoạn dưới "Các loại Media" sẽ được hiển thị trong font chữ khác, và có một cỡ chữ nhỏ hơn so với phần còn lại của văn bản.
Các loại truyền thông khác
| 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 |
| 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 |
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét