HTML5 và CSS3 –Các thành phần mở rộng của CSS3

I. CSS3 Media Queries

A, Sử dụng CSS3 media queries để thiết kế layout phù hợp với trình duyệt, thiết bị

Khái quát

Container của trang có độ rộng 980px sẽ được tối ưu hóa cho bất kỳ màn hình nào có độ phân giải lớn hơn 1024px. Truy vấn media kiểm tra viewport có nhỏ hơn 980px hay không, nếu có, mẫu thiết kế sẽ chuyển sang độ rộng phù hợp thay vì dùng độ rộng cố định. Kiểm tra tiếp, nếu nhỏ hơn 650px, sẽ dùng layout chỉ gồm 1 cột

@media only screen and (max-awidth: 480px){
 body{
 padding:5px;
 background-color:#FFF;
 background-image:url(images/smoothieworld_logo_mobile.jpg);
 background-repeat:no-repeat;
 }
}

Quy định chiều rộng lớn nhất khi hiển thị: 480px Sử dụng min-awidth, max-awidth để khai báo chiều rộng hiển thị sẽ chỉ trong khoảng

B, Quy định chiều rộng của trang được hiển thi trên thiết bị

@media only screen and (max-awidth: 480px)

II, Mã HTML cho form trên

A, Dưới đây là cấu trúc của layout. Sử dụng container “pagewrap” để bao nội dung của “header”, “content”, “sidebar”, và “footer” lại.

<div id="pagewrap">
<header id="header">
<hgroup>
<h1 id="site-logo">Demo</h1>
<h2 id="site-description">Site Description</h2>
</hgroup>
<nav> <ul id="main-nav">
<li><a href="#">Home</a></li>
</ul>
</nav>
<form id="searchform">
<input type="search">
</form>
</header>
<div id="content">
<article> blog post </article>
</div>
<aside id="sidebar">
<section> widget </section>
</aside>
<footer id="footer"> footer </footer>
</div>

B/ Cấu trúc CSS chính

Container có độ rộng 980px, header cố định là 160px và “content” 600px.

    #pagewrap { awidth: 980px; margin: 0 auto; }
    #header { height: 160px; }
    #content { awidth: 600px; float: left; }
    #sidebar { awidth: 280px; float: right; }
    #footer { clear: both; }

1/ Viewport nhỏ hơn 980px( layout linh hoạt)

Các lệnh sau được thực hiện:

• pagewrap = reset awidth thành 95%
• content = reset awidth thành 60%
• sidebar = reset awidth thành 30%

    @media screen and (max-awidth: 980px) {
    #pagewrap { awidth: 95%; }
    #content { awidth: 60%; padding: 3% 4%; }
    #sidebar { awidth: 30%; }
    #sidebar .widget
    { padding: 8% 7%; margin-bottom: 10px; }
    }

2/ Viewport nhỏ hơn 650px (Layout một cột)

Kế tiếp, bạn dùng các lệnh CSS sau, khi viewport nhỏ hơn 650px:

• header = reset height thành auto
• searchform = Vị trí searchform nhận trị top: 5px
• main-nav = reset vị trí thành static
• site-logo = reset vị trí thành static
• site-description = reset vị trí thành static
• content = reset awidth thành auto (container sẽ mở rộng thành fullwitdh) và vô hiệu hóa float
• sidebar = reset thành 100%

    @media screen and (max-awidth: 650px) {
    #header { height: auto; }
    #searchform { position: absolute; top: 5px; right: 0; }
    #main-nav { position: static; }
    #site-logo { margin: 15px 100px 5px 0; position: static; }
    #site-description { margin: 0 0 15px; position: static; }
    #content { awidth: auto; float: none; margin: 20px 0; }
    #sidebar { awidth: 100%; float: none; margin: 0; } }

3/ Viewport nhỏ hơn 480px

Lệnh CSS sau sẽ thực hiện khi viewport nhỏ hơn 480px(độ rộng của màn hình iPhone khi xoay ngang).

• html = vô hiệu hóa chức năng điều chỉnh kích thước của text. Mặc định, iPhone sẽ phóng to text để đọc thoải mái, dễ dàng hơn. Bạn vô hiệu hóa bằng lệnh sau

-webkit-text-size-adjust: none;

• main-nav = reset kích thước font chữ thành 90%

@media screen and (max-awidth: 480px) {
html { -webkit-text-size-adjust: none; }
#main-nav a { font-size: 90%; padding: 10px 8px; }
}