Hướng dẫn tạo trang HTML Reponsive với CSS Media Queries

Over 11 working discount & coupon codes is active for 61 users, enjoy!

Học Web | HTML Tutorial

Hướng dẫn tạo trang HTML Reponsive với CSS Media Queries

Xin chào các bạn!

Hôm nay Hocweb.com.vn sẽ hướng dẫn các bạn sử dụng CSS Media Queries đơn giản để tạo trang web phù hợp với các kích cỡ màn hình từ màn hình máy tính lớn đến tablet và di động.

  • Biết HTML/CSS căn bản
  • Thời gian thực hiện: 20p

TẠO TRANG HTML

Đầu tiên chúng ta sẽ tạo cấu trúc HTML. Trang web đơn giản của chúng ta gồm 2 cột, một cột dành cho Menu và một cột dành cho Nội dung chính được bao bởi một thẻ div gọi là wrapper. Với kích cỡ màn hình lớn như màn hình vi tính, laptop, chúng ta sẽ đặt chiều rộng tối đa cho wrapper là 960px, đối với tablet và một số loại điện thoại màn hình lớn khi để ngang (landscape) wrapper sẽ có chiều rộng là 100%, còn đối với thiết bị di động có màn hình nhỏ hơn thì cả menu và nội dung sẽ có kích thước là 100%. Các bạn tạo trang HTML như sau:

 Ở phần nội dung chúng ta sẽ có 1 tấm ảnh với kích thước là 800×600. Nhưng ở kích thước màn hình lớn, hình sẽ được giảm chiều rộng và cao ( bằng css ). Còn đối với thiết bị di động, hình sẽ có kích thước là 100%. Chúng ta cùng chuyển sang phần CSS. Trước khi đi vào code CSS chính, chúng ta sẽ tìm hiểu về CSS Media Query.

CSS MEDIA QUERY

Công dụng chính của CSS Media Query là giúp các thành phần của trang web hiển thị được trên nhiều loại media như màn hình ( screen), in ấn ( print). 

Cách sử dụng:

 Với <type> có thể là screen hoặc print. Ví dụ:

 Ở ví dụ này chúng ta đặt thuộc tính cho thẻ body tương ứng với loại media là screen và print. Khi hiển thị trên màn hình, trang web sẽ sử dụng font Arial, kích cỡ 14, kích thước của trang là 100%. So với khi in ấn, chúng ta sẽ sử dụng font Times New Roman kích cỡ 12px và trang rộng 75% khổ giấy. Các bạn có thể thử bằng cách chọn in trang.

Chúng ta có thể sử dụng các cú pháp như and ( và ) hoặc dấu phẩy (, hoặc)

 Ví dụ trên chúng ta đặt màu đỏ cho màu nền của body với loại màn hình và rộng từ 300px đến 700px hoặc chiều rộng từ 1000px trở lên.

CSS

Đầu tiên chúng ta sẽ đặt những thuộc tính CSS cho các thành phần như body, wrapper, menu, content

 Kết quả sau khi code CSS

HTML Reponsive

HTML Reponsive

Chúng ta tiếp tục thực hiện code CSS với media queries để áp dụng cho các kích cỡ màn hình. Đầu tiên, chúng ta sẽ áp dụng với màn hình kích thước lớn. Đặt chiều rộng tối đa cho wrapper là 960px;

 

Responsive HTML

Responsive HTML

Tiếp tục thực hiện với các loại màn hình khác như đã đề cập ở đầu bài viết.

CODE CSS HOÀN CHỈNH

 KIỂM TRA TRÊN CÁC KÍCH CỠ MÀN HÌNH

iPad

Reponsive HTML

Reponsive HTML

iPhone Portrait

Responsive HTML

Responsive HTML

iPhone 5 Landscape

Responsive HTML

Responsive HTML

TỔNG KẾT

CSS Media Query giúp các thành phần trên trang HTML của chúng ta hiển thị tùy vào kích cỡ màn hình của thiết bị. Điều này rất thuận lợi để tạo ra các trang web có khả năng tự thay đổi kích thước ở các kích thước khác nhau mà chúng ta không phải viết riêng một trang dành cho loại màn hình đó.

Các trình duyệt mới hiện nay (gồm phiên bản desktop và mobile) như Chrome, Firefox, Safari, Opera đều hỗ trợ CSS Media Query. IE 9 cũng hỗ trợ, tuy nhiên với các phiên bản thấp hơn thì không hỗ trợ. 

Cảm ơn các bạn đã theo dõi bài viết trên trang Hocweb.com.vn, chúc các bạn thành công!

It's only fair to share...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

3 Comments

Hoàng Hiếu

April 29, 2014 @ 19:50

Bạn ơi ! Cho mình hỏi tất cả trang web nếu muốn dùng Responsive hết thì code nào css tất cả các loại màn hình, mình nhúng đoạn nó vào khỏi phải viết lại không vậy hè cái ni mình đang lơ ngơ quá.

Hoa

August 17, 2014 @ 09:46

Bài viết của bạn rất hay, thanks

Vận chuyển hàng lẻ

April 21, 2015 @ 14:53

Bài viết hay quá bạn ơi đúng thứ mình đang cần

Leave Comment

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">


*

    Tìm Kiếm