Hướng dẫn tạo responsive cho website

Hiện nay thì đi đâu cũng thấy, hầu hết mọi website mới bây giờ điều có tính năng responsive. Responsive là thứ giúp cho cấu trúc của một website tự động thay đổi để phù hợp với kích thước màn hình hiện tại. Đây là tính năng khá hấp dẫn vì thay vì phải cực nhọc tạo ra 2 đến 3 giao diện cho từng loại màn hình thì nay bạn chỉ cần một giao diện duy nhất nhưng có thể đáp ứng được tất cả.

Nghe có vẻ ghê gớm quá nhỉ, nếu như bạn đã nắm rõ HTML và CSS thì bạn hoàn toàn có thể yên tâm trọng việc tìm hiểu về việc tạo reponsive cho website vì nó là việc khá đơn giản. Cái khó khăn nhất ở đây mà bạn cần làm chăm chút để chỉnh sửa cho từng đối tượng có trên website, vì nếu bạn không làm đầy đủ cho từng đối tượng có trong website thì rất dễ gây ra hiện tượng phá vỡ bố cục khi màn hình bị thay đổi.

Hướng dẫn tạo responsive cho website

Tại bài viết này tôi xin hướng dẫn các bạn thủ thuật tạo responsive cho website với bố cục đơn giản, đương nhiên là các bạn phải biết HTML và CSS trước rồi, vì nếu không bạn khó có thể, thậm chí là không thể hiểu được những gì tôi sắp hướng dẫn dưới đây.

Bố cục có sẵn để tạo Responsive

Ở đây ví dụ tôi có cấu trúc một website như sau:

Phần HTML
<div id="container">
 <div id="header">
  <h1>
   Site name
  </h1>
 </div>
 <div id="navigation">
  <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Services</a></li>
   <li><a href="#">Contact us</a></li>
  </ul>
 </div>
 <div id="content-container">
  <div id="content">
   <h2>
    Page heading
   </h2>
   <p>
    Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
   </p>
  </div>
  <div id="aside">
   <h3>
    Aside heading
   </h3>
   <p>
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan.
   </p>
  </div>
  <div id="footer">
   Copyright © Site name, 20XX
  </div>
 </div>
</div>
đây là ví dụ gần đúng ở hầu hết mọi website, đương nhiên là phần class và id có thể khác. Ở đoạn mã trên thì bạn sẽ thấy ngay bố cục của website mà tôi đã tạo.

Phần CSS
#container
{
 margin: 0 auto;
 width: 900px;
 background: #fff;
}

#header
{
 background: #ccc;
 padding: 20px;
}

#header h1 { margin: 0; }

#navigation
{
 float: left;
 width: 900px;
 background: #333;
}

#navigation ul
{
 margin: 0;
 padding: 0;
}

#navigation ul li
{
 list-style-type: none;
 display: inline;
}

#navigation li a
{
 display: block;
 float: left;
 padding: 5px 10px;
 color: #fff;
 text-decoration: none;
 border-right: 1px solid #fff;
}

#navigation li a:hover { background: #383; }

#content-container
{
 float: left;
 width: 900px;
 background: #E0E0E0;
}

#content
{
 clear: left;
 float: left;
 width: 560px;
 padding: 20px;
 display: inline;
     background: #5E4C4C;
}

#content h2 { margin: 0; }

#aside
{
 float: right;
 width: 240px;
 padding: 20px 0;
 margin: 0 20px 0 0;
 display: inline;
}

#aside h3 { margin: 0; }

#footer
{
 clear: both;
 background: #ccc;
 text-align: right;
 padding: 20px;
 height: 1%;
}
đây là phần css để tô điểm lại bố cục cho phần HTML của tôi bên trên.

Ôi dài quá các bạn có thể xem demo nó chạy ra gì tại đây nhé
http://jsfiddle.net/b1ndnp53/1/show
Tiện thể tới đây tôi hướng dẫn xem code trên jsfiddle luôn, bạn chỉ cần xóa đoạn "/show" trong domain ở trên đi và truy cập vào là bạn có thể thấy toàn bộ phần phần code tại đó của tôi. Bạn nên làm thế này thì để tránh rối mắt ở trong phần hướng dẫn thì tôi sẽ chỉ nói là tôi thêm gì vào code và nó thành ra như thế nào thôi.

Cách thức tạo Responsive

Cơ bản thì để tạo responsive thì chúng ta sẽ không đá động gì đến phần HTML cả, việc bây giờ chúng ta sẽ làm là thêm vào phần CSS có sẵn trên website, căn chỉnh lại những thuộc tính css căn chỉnh cho HTML mà nó sẽ thay đổi để phù hợp với từng kích cỡ màn hình.

Thông thường thì có ba loại kích cỡ màn hình thông dụng nhất là máy tính, tablet, và điện thoại


như hình trên thì bạn sẽ thấy sô đo ví dụ của từng kích thước màn hình đó.

Bây giờ đây sẽ là đoạn css để biến đổi phù hợp với từng loại màn hình, thông thường nhất thì mọi người đều tạo responsive ở 4 kích thước 1024, 990, 768, 480 tính theo pixel, và sau đây là css để thực hiện điều này
@media only screen and (max-width:1024px) {
Đoạn CSS ghi đề lại những thuộc tính thay đổi khi màn hình nhỏ hơn hoặc bằng 1024px.
}

@media only screen and (min-width:768px) and (max-width:989px) {
Đoạn CSS ghi đề lại những thuộc tính thay đổi khi màn hình lớn hơn hoặc bằng 768px và nhở hơn hoặc bằng 989px.
}

@media only screen and (min-width:480px) and (max-width:767px){
Đoạn CSS ghi đề lại những thuộc tính thay đổi khi màn hình  lớn hơn hoặc bằng 480px và nhỏ hơn hoặc bằng 767px.
}

@media only screen and (max-width:479px){
Đoạn CSS ghi đề lại những thuộc tính thay đổi khi màn hình nhỏ hơn hoặc bằng 479px.
}
vậy theo như đoạn css trên thì chúng ta đã quy định những thuộc tính nào thay đổi với từng kích thước màn hình định sẵn.

Ở đây tôi xin ví dụ đoạn css tạo responsive sau khi hoàn thành ghi đè hầu từng đoạn css cho từng kích thước màn hình nó có dạng như sau
@media only screen and (max-width:1024px) {
    #container,#navigation,#content-container {width: 800px;} 
    #content {width:460px;}
    #aside {width:200px;}
}

@media only screen and (min-width:768px) and (max-width:989px) {
    #container,#navigation,#content-container {width: 700px;} 
    #content {width:360px;}
    #aside {width:200px;}
}

@media only screen and (min-width:480px) and (max-width:767px){
    #container,#navigation,#content-container {width: 600px;} 
    #content {width:260px;}
    #aside {width:200px;}
    #navigation {display:none;}
}

@media only screen and (max-width:479px){
    #container,#navigation,#content-container {width: 100%;} 
    #content {width:100%;padding:0;}
    #aside {display:none;}
}
bây giờ tôi sẽ chèn nó vào phần css của tôi và đây là kết quả
http://jsfiddle.net/b1ndnp53/3/show/
các bạn nhớ là nếu muốn xem và chỉnh sửa code này thì bạn hãy xóa bỏ "/show" ở phần đuôi liên kết trên nhé.

Một số câu hỏi thường gặp

Đi tới đây rồi thì mình tin là một số bạn sẽ có thắc mắc chỗ thì sử dụng lúc thì có cả
(min-width) and (max-width)
lúc thì chỉ có
(max-width)
tại sao vậy?

Thì đây là câu trả lời của mình, nếu bạn sử dụng max-width không thì những quy định ở kích thước màn hình nhỏ hơn nữa sẽ vẫn giữ thuộc tính đó nếu không bị ghi đè lại, còn nếu có giới hạn min-max thì nó đoạn css đó chỉ hoạt động trong khoảng đó thôi chứ không liên quan đến những kích thước màn hình khác. Ví dụ ở ngay đoạn css tạo reponsive của mình bạn có thể thấy ở khoảng 480px-767px có #navigation {display:none;}, thì chỉ trong khoảng chiều rộng bằng nhiêu đó thì thanh menu của mình mới biến mất thôi.

Vậy ta xài toàn bộ max-width được không?
Được thì đơn giản những cái đó do bạn quy định cả mà, tùy theo trường hợp mà nhu cầu của từng giao diện thì bạn phải tự thân vận động thôi.

Thế thì ta có thể sử dụng toàn min-width được không?
Cũng được mà chã ai rảnh viết từ màn bé trở lên màn hình bự cả :D

Lời kết

Như vậy đã kết thúc phần hướng dẫn về vấn đề tạo responsive rồi. Thì bài viết tạo reponsive này tôi cũng đã có gắng để diễn giải một các đơn giản và dễ hiểu nhất cho mọi người rồi, nhưng nếu bạn nào vẫn cảm thấy khó hiểu hoặc góp ý cho bài viết được tốt hơn thì có thể đặt câu hỏi hoặc hỗ trợ mình bằng cách viết vào khung bình luận ở dưới nhé.

15 bình luận

  1. avatar says

    13:10 Ngày 31 tháng 08 năm 2014

    Blogger thi to k ranh lam. Chu thuong to dung Framework cho no nhanh. Thich nhat dung Foundation voi Sass.

  2. avatar says

    14:32 Ngày 31 tháng 08 năm 2014

    qua mình là dân không chuyên về code nên cũng hơi phức tạp nhỉ, nhưng tóm lại là mình chỉ cần thêm đoạn code trên vào trước ]]></b:skin> là được rồi hả cậu?

  3. avatar says

    19:35 Ngày 31 tháng 08 năm 2014

    Đúng rồi, chèn lên đấy đấy.

  4. avatar says

    19:35 Ngày 31 tháng 08 năm 2014

    Tớ thì cứ bootstrap framework, thiết kế vừa nhanh vừa lẹ.

  5. avatar says

    20:24 Ngày 31 tháng 08 năm 2014

    Tớ thích Foundation hơn vì khả năng tuỳ chỉnh của nó. Lúc trước có làm vài html template bên themeforest mà bị nó từ chối hoài nên giờ bỏ luôn. mất 2 năm học hành cày cuốc. Hic

  6. avatar says

    03:31 Ngày 02 tháng 09 năm 2014

    Còn đủ thứ lỉnh kỉnh khác nữa về đơn vị kích thước như: px, em, %, max, min...

    Nói chung là hại não

  7. avatar says

    21:02 Ngày 03 tháng 09 năm 2014

    Tạo responsive thì đơn giản chỉ có thể thôi, còn những cái mà bạn đề cập là kho tàng có trong CSS :D

  8. avatar says

    21:08 Ngày 04 tháng 09 năm 2014

    Đôi khi phải sửa lại để nó hiển thị cho phù hợp cách kích thước ấy nữa. Ngoài ra còn phải đặt đoạn này dưới <head>

    <meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

  9. avatar says

    21:10 Ngày 04 tháng 09 năm 2014

    À đúng rồi quên mất vụ đó cám ơn bạn nhiều nhe ^^

  10. avatar says

    10:06 Ngày 25 tháng 10 năm 2014

    Chào bạn, mình đọc bài viết của bạn rất hữu ích. Mình áp dụng nhưng chưa làm được. Bạn có thể cho mình xin contact facebook để nhờ bạn giúp đỡ. Facebook của mình là: www.facebook.com/giasugioi

  11. avatar says

    12:33 Ngày 10 tháng 12 năm 2014

    Với widget nói riêng thì sao Lâm

  12. avatar says

    17:11 Ngày 10 tháng 12 năm 2014

    bạn thử xem. :)
    @media only screen and (...px) {
    Tên Widget #HTML...{display:none;}
    }

  13. avatar says

    10:47 Ngày 09 tháng 04 năm 2015

    @@!cho mình hỏi tí về cái responsive __
    giống như http://seobymoz.com/ và http://www.terocket.com/ … cần những “code nào” vậy ak

    @@ ko phải dân IT” =))

    địa chỉ web mình 123tailieufree.com

  14. avatar says

    10:48 Ngày 09 tháng 04 năm 2015

    @@!cho mình hỏi tí về cái responsive __
    giống như http://seobymoz.com/ và http://www.terocket.com/ … cần những “code nào” vậy ak

    @@ ko phải dân IT” =))

    địa chỉ web mình 123tailieufree.com

  15. avatar says

    11:12 Ngày 07 tháng 09 năm 2016

    hay cám ơn bạn đã chia sẻ
    template blogspot bán hàng tại http://www.softwpro.info/

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.