Xin chào các bạn!
Hôm nay edu.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:
<!DOCTYPE html> <html> <head> <title>Responsive</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8"> <link rel="stylesheet" href="css.css" > </head> <body> <div id="wrapper"> <ul class="float-left menu"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">CONTACT</a></li> </ul> <div class="float-left content"> <img src="http://placehold.it/800x600" alt="" class="float-left reponsive-images" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 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. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. </div> </div> </body> </html>
Ở 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:
@media <type>{
/*
* CODE CSS CỦA BẠN
*/
}
Với <type> có thể là screen hoặc print. Ví dụ:
@media screen{
body{
font-family: Arial;
font-size: 14px;
width: 100%;
}
}
@media print{
body{
font-family: "Times New Roman";
font-size: 12px;
width: 75%;
}
}
Ở 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)
@media screen and (max-width: 700px) and (min-width: 300px), (min-width: 1000px){
body{
background: #f00;
}
}
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
body{
font-family: Arial, san-serif;
font-size: 14px;
line-height: 1.5;
margin: 0;
}
.float-left{
float: left;
}
.menu{
width: 30%;
margin: 0;
padding: 10px;
list-style: none;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.menu li{
margin-bottom: 5px;
}
.menu a:link{
height: 40px;
background: #BBB;
display: block;
line-height: 40px;
padding-left: 10px;
color: #fff;
text-decoration: none;
font-weight: bold;
font-size: 15px;
}
.content{
width: 70%;
padding: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.reponsive-images{
width: 150px;
height: auto;
margin-right: 10px;
}
Kết quả sau khi code CSS
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;
@media screen and (min-width: 960px){
#wrapper{
max-width: 960px;
margin: 0 auto;
}
}
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.
@media screen and (min-width: 300px) and (max-width: 500px){
#wrapper{
max-width: 100#;
}
.menu,
.content{
width: 100%;
padding-bottom: 0;
}
.menu a{
text-align: center;
}
.reponsive-images{
width: 100%;
margin-bottom: 10px;
}
}
@media screen and (min-width: 500px) and (max-width: 960px){
.wrapper{
width: 100%;
}
}
CODE CSS HOÀN CHỈNH
body{
font-family: Arial, san-serif;
font-size: 14px;
line-height: 1.5;
margin: 0;
}
.float-left{
float: left;
}
.menu{
width: 30%;
margin: 0;
padding: 10px;
list-style: none;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.menu li{
margin-bottom: 5px;
}
.menu a:link{
height: 40px;
background: #BBB;
display: block;
line-height: 40px;
padding-left: 10px;
color: #fff;
text-decoration: none;
font-weight: bold;
font-size: 15px;
}
.content{
width: 70%;
padding: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.reponsive-images{
width: 150px;
height: auto;
margin-right: 10px;
}
@media screen and (min-width: 300px) and (max-width: 500px){
#wrapper{
max-width: 100#;
}
.menu,
.content{
width: 100%;
padding-bottom: 0;
}
.menu a{
text-align: center;
}
.reponsive-images{
width: 100%;
margin-bottom: 10px;
}
}
@media screen and (min-width: 500px) and (max-width: 960px){
.wrapper{
width: 100%;
}
}
@media screen and (min-width: 960px){
#wrapper{
max-width: 960px;
margin: 0 auto;
}
}
KIỂM TRA TRÊN CÁC KÍCH CỠ MÀN HÌNH
iPad
Reponsive HTML
iPhone Portrait
Responsive HTML
iPhone 5 Landscape
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 edu.com.vn, chúc các bạn thành công!