Previous Lesson Next Lesson

CSS Responsive là gì ?

Responsive CSS là gì ?

Responsive là một tính từ để chỉ một website có thể hiển thị tương thích trên mọi kích thước hiển thị của trình duyệt. Ví dụ: nếu giao diện website đặt một chiều rộng cố định là 800px thì chắc chắn nếu xem ở trình duyệt điện thoại với chiều ngang chỉ từ 320px – 420px sẽ không hiển thị hết được.

Có thể bạn cho rằng chúng ta có thể gán giá trị chiều rộng từ tuyệt đối (800px) sang kiểu giá trị tương đối là phần trăm (%) thì có thể sẽ hiển thị tương ứng được. Điều này cũng đúng, nhưng giả sử website bạn có 3 cột trên một hàng thì liệu rằng trên trình duyệt di động, mắt thường của con người có thể thấy chi tiết mà không cần phóng to màn hình hay không? Do vậy, chúng ta sẽ muốn giao diện sẽ được hiển thị khác đi một xíu trên trình duyệt nhỏ hơn các trình duyệt thông thường, và Responsive là giải pháp làm việc này nhanh nhất và dễ nhất.

Responsive hoạt động bằng cách chúng ta sẽ viết CSS để cho trình duyệt hiểu và thực thi nó trên các kích thước trình duyệt nhất định. Chẳng hạn bạn có thể thiết lập một đoạn CSS nào đó chỉ áp dụng cho các trình duyệt có kích thước chiều rộng tối đa là 320px (điện thoại). Điều này có nghĩa là Responsive là một kỹ thuật thiết kế được xử lý từ client-side chứ không hề gửi truy vấn nào đến máy chủ để xử lý (server-side) nên nó có một nhược điểm là làm trình duyệt của bạn phải mất nhiều thời gian hơn để xử lý CSS.

Phần dưới đây miêu tả cách thiết kế Responsive trong CSS.

Cấu trúc Responsive

Hình ảnh dưới đây minh họa cấu trúc Responsive của các Webpage:

Ví dụ Grid Demo trong CSS


<html>
   <head>
   </head>

      <style>
         body {
            font: 600 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
         }
         h1 {
            color: #9799a7;
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 6px;
         }
         .container:before, .container:after {
            content: "";
            display: table;
         }
         .container:after {
            clear: both;
         }
         .container {
            background: #eaeaed;
            margin-bottom: 24px;
            *zoom: 1;
         }
         .container-75 {
            width: 75%;
         }
         .container-50 {
            margin-bottom: 0;
            width: 50%;
         }
         .container, section, aside {
            border-radius: 6px;
         }
         section, aside {
            background: #2db34a;
            color: #fff;
            margin: 1.858736059%;
            padding: 20px 0;
            text-align: center;
         }
         section {
            float: left;
            width: 63.197026%;
         }
         aside {
            float: right;
            width: 29.3680297%;
         }
      </style>
   <body>

      <h1>100% do rong cua Container</h1>

      <div class="container">
         <section>Section</section>
         <aside>Aside</aside>
      </div>

      <h1>75% do rong cua Container</h1>

      <div class="container container-75">
         <section>Section</section>
         <aside>Aside</aside>
      </div>

      <h1>50% do rong cua Container</h1>

      <div class="container container-50">
         <section>Section</section>
         <aside>Aside</aside>
      </div>

   </body>
</html>

```Kết quả là:

<iframe class="result" height="400px" onload="resizeFrame(this)" src="../css/src/css_responsive_la_gi.htm" width="600px"></iframe>Tạo các truy vấn media trong CSS
--------------------------------

Việc tạo các truy vấn media là cho các Style Rule khác nhau cho các thiết bị có kích cỡ khác nhau, ví dụ điện thoại, màn hình máy tính, …

Neu man hinh nho hon 420px, thi no se hien thi Lightblue color, neu khong no se hien thi Lightpink color

```Kết quả là:

Khai báo thẻ meta viewport hay Bootstrap Responsive --------------------------------------------------- Bootstrap là Web Design Framwork phổ biến nhất dựa trên HTML, CSS, và JavaScript. Nó giúp bạn thiết kế các Webpage theo cách Responsive cho tất cả các thiết bị. ```

VietNam vo dich

Tra loi bao chi hoi dau thang, Pho chu tich thuong truc VFF Tran Quoc Tuan va HLV Nguyen Huu Thang tung de cap toi kha nang mo cua cho cau thu nhap tich len tuyen. Theo ong Tran Quoc Tuan, nhung cau thu nay neu dap ung duoc yeu cau ve chuyen mon do HLV Nguyen Huu Thang dat rat hi deu co kha nang len tuyen.

VietNam van vo dich

Neu VietNam tham du World Cup

Neu VietNam la cuong quoc so 1 The Gioi

```Kết quả là: Loạt bài hướng dẫn **Học CSS cơ bản và nâng cao** của chúng tôi dựa trên nguồn tài liệu của: [Tutorialspoint](http://www.tutorialspoint.com/index.htm) và [W3Schools](http://www.w3schools.com/css/)