Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Tạo website reponsive đơn giản trong 3 bước với media query css3

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi vnfit.com, 23/4/15.

Lượt xem: 5,011

  1. vnfit.com Banned

    Responsive web design bây giờ không còn là một cái gì lạ lẫm nữa. Với người mới nghe đến từ khoá reponsive web hay website reponsive nghe nó có vẻ lạ lẫm và phức tạp, nhưng nó lại thực sự đơn giản hơn bạn nghĩ nhiều. Để có thể giúp bạn nhanh chóng nắm bắt được với responsive design, Tôi cố gắng thực hiện bài viết này giúp bạn có thể phần nào ít bỡ ngỡ hơn với việc thiết kế website reponsive nó thực sự đơn giản chỉ cần bạn có kiến thức cơ bản về css đặc biệt là có kiến thức về css3. Nếu bạn còn bỡ ngỡ về khái niệm reponsive web bạn có thể tham khảo bài viết trước của tôi để hiểu nó: khác nhau giữa website reponsive và mobile web.

    Bạn có thể xem qua demo sau khi chúng ta hoàn thành xong sản phẩm tại đây: demo sản phẩm. Với demo này để có thể xem rõ nhất về nó nếu bạn đang dùng firefox bạn có thể xem bài viết này của firefox hướng dẫn: Tool check reponsive firefox.

    Bước 1. Thêm Meta Tag

    Thẻ meta viewport nghĩa là một thẻ thiết lập cho trình duyệt hiển thị tương ứng với kích thước màn hình. Chẳng hạn như ví dụ trên, có nghĩa là bạn sẽ thiết lập trình duyệt hiển thị cố định và tương ứng trên tất cả các thiết bị dựa vào chiều rộng của thiết bị (device-width) và không cho phép người dùng phóng to (thiết lập initial-scale với giá trị cố định là 1). Đây là thẻ mình khuyến khích bạn sử dụng cho toàn bộ các dự án Responsive.

    Code:
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    Internet Explorer 8 hoặc cũ hơn không hỗ trợ cho media query. Bạn có thể sử dụng media-queries.js hoặc respond.js để giúp cho IE hiểu và hỗ trợ nó.

    Code:
    <!--[if lt IE 9]>
    <script src="css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
    Bước 2. HTML Structure

    Trong ví dụ này tôi có một trang đơn giản gồm header, content, sidebar, và footer. Header có độ cao được cố định là 180px, content là 600px độ rộng và sidebar là 300px độ rộng.

    DwclzXT.png
    page structure reponsive web

    Bước 3. Media Queries

    CSS3 media query là mẹo hay còn gọi là thủ thuật trong reponsive design. Nó giống như viết điều kiện if trong lập trình nói cho trình duyệt hiển thị trong độ rộng riêng biệt.

    Đoạn code dưới đây cho phép hiển thị riêng dưới độ rộng 980px hoặc nhỏ hơn.

    Code:
    /* for 980px or less */
    @media screen and (max-width: 980px) {
    #pagewrap {
    width: 94%;
    }
    #content {
    width: 65%;
    }
    #sidebar {
    width: 30%;
    }
    
    }
    Tiếp tục ngay bên dưới cho kích thước 700px hoặc nhỏ hơn. Thay đổi #content và #sidebar để độ rộng là auto và bỏ đi float vì vậy chúng ta sẽ nhìn thấy nó là full width ở độ rộng màn hình 700px hoặc dưới nó.

    Code:
    /* for 700px or less */
    @media screen and (max-width: 700px) {
    
    #content {
    width: auto;
    float: none;
    }
    #sidebar {
    width: auto;
    float: none;
    }
    
    }
    Cho độ rộng 480px hoặc nhỏ hơn (mobile screen), reset độ cao #header là auto, thay đổi h1 để kích thước font là 24px và ẩn #sidebar.

    Code:
    /* for 480px or less */
    @media screen and (max-width: 480px) {
    
    #header {
    height: auto;
    }
    h1 {
    font-size: 24px;
    }
    #sidebar {
    display: none;
    }
    
    }
    Bạn có thể viết nhiều luật css hơn cho nhiều các loại màn hình khác nhau miễn sao đạt được mục đích của bạn chứ không hạn 3 luật media query css như tôi làm. Vì chỉ có 3 luật cho đơn giản và dễ hiểu về nó.

    Chúc các bạn thành công!

    Nguồn: vnfit.com/tao-website-responsive-don-gian-trong-3-buoc-voi-media-query-css3

    ...
    coloa2006-2010, Phạm Hữu Dưdabeomoon thích bài viết này.
  2. Phạm Hữu Dư

    Phạm Hữu Dư phamhuudu.com Ban quản trị

    Lần sau đoạn nào là code thì nên cho vào thẻ CODE để dễ phân biệt nhé!
  3. coloa2006-2010

    coloa2006-2010 Thành viên cấp 1

    ngàn lần cám ơn bác chủ top, bài viết của bác cực cực cực hữu ích đối với em. Em phải ghé vào trang của bác hằng ngày thôi.

Ủng hộ diễn đàn