Media CSS là một "công nghệ" được giới thiệu trong Css3. Nguyên tắc nó sử dụng trên thông qua các thông số kích thước màn hình được khai báo thông qua @media Với công cụ này chúng ta có thể phân đoạn Css chúng ta ra nhiều phần khác nhau tương ứng với kích thước của các loại thiết bị. Thuộc tính này có cú pháp như sau:
@media not|only mediatype and (media feature) {
CSS-Code;
}
Trong đó mediatype gồm các thuộc tính hay sử dụng sau:
Thực tế vẫn còn nhiều nữa nhưng với lập trình web thì chúng ta thường sử dụng ba thuộc tính đó thôi. Và trước khi đi vào tìm hiểu các thuộc tính thì ban phải phân biệt hai khái niệm sau:
Và media featured thì gồm các thuộc tính sau:
Ví dụ: Nếu chiều rộng của trình duyệt nhỏ hơn hoặc bằng 480px thì ẩn class .large.
@media only screen and (max-width: 480px){
.large{
display: none;
}
}
Ngoài max-width chúng ta còn có tham số hay được sử dụng như min-width. Vậy việc sử dụng Media query nhằm mục đích đưa ra các phân đoạn để viết Css theo độ rộng màn hình các thiết bị. Vậy bản chất của RESPONSIVE là sự kết hợp của media query và tính ưu tiên thực thi của Css trên cùng một đối tượng.
<!DOCTYPE html>
<html>
<head>
<title>Media responsive</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.left, .right{
height: 400px;
}
.left{
background: blue;
float: left;
width: 60%;
}
.right{
background: red;
float: right;
width: 40%;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
LEFT
</div>
<div class="right">
RIGHT
</div>
</div>
</body>
</html>
Demo:
Nếu kích thước trình duyệt nhỏ hơn 769px thì hiển thị 1 hàng dọc Ngược lại thì hiển thị hai hàng dọc
Lúc này ta sẽ thiết lập CSS như sau:
@media only screen and (max-width: 768px){
.left, .right{
float: none;
width: 100%;
}
}
Với danh sách các thuộc tính của @media thì ta dễ dàng phát hiện ra các thiết bị. Và sau đây là danh sách các câu query @media cho các thiết bị thông dụng.
PC first trong Rseponsive
PC first là khái niệm để chỉ tuần tự responsive giao diện từ màn hình to xuống màn hình nhỏ Để làm việc với mô hình này chúng ta sử dụng max-width trong media query
Dưới đây là các media query điển hình mà ta cần thêm vào dự án.
/*Ipad ngang(1024 x 768)*/
@media screen and (max-width: 1024px){
}
/*Ipad dọc(768 x 1024)*/
@media screen and (max-width: 768px){
}
/*Tablet nhỏ(480 x 640)*/
@media screen and (max-width: 480px){
}
/*Iphone(480 x 640)*/
@media screen and (max-width: 320px){
}
/*Smart phone nhỏ*/
@media screen and (max-width: 240px){
}
Ngoài ra, nếu mình cần responsive trên nhiều thiết bị hơn thì công việc của chúng ta là cần xác định kích thước của nó và thêm vào danh sách media query kia theo thứ tự màn hình to ở trên màn hình nhỏ query ở dưới. Theo cách này thì khi một Selector trong css cần style đi qua từ màn hình to đến nhỏ sẽ được thay đổi theo thứ tự ưu tiên Trái ngược với PC First chúng ta cùng đi qua Mobile First
Mobile First trong Responsive
Tuần tự tiến trình responsive của chúng ta xuất phát từ màn hình nhỏ và xây dựng dần lên thiết bị có kích thước to
Để làm việc với mô hình này chúng ta sử dụng tham số min-width trong media query.
/*Smart phone nhỏ*/
@media screen and (min-width: 240px){
}
/*Iphone(480 x 640)*/
@media screen and (min-width: 320px){
}
/*Tablet nhỏ(480 x 640)*/
@media screen and (min-width: 480px){
}
/*Ipad dọc(768 x 1024)*/
@media screen and (min-width: 768px){
}
/*Ipad ngang(1024 x 768)*/
@media screen and (min-width: 1024px){
}
Với mô hình này thì khi style Css cho cùng một đối tượng thì theo thứ tự được ưu tiên từ màn hình nhỏ đến to, càng về sau các các Css ở các query màn hình to hơn được ưu tiên hơn.
Như vậy mình đã giới thiệu xong chức năng và nhiệm vụ của query @media. Trên thế giới người ta hay sử dụng Mobile First hơn nhưng với kinh nghiệm của tôi thì PC First luôn được ưu tiên vì nó hợp với việc xử lý trải nghiệm của người dùng khi lướt web từ thiết bị to xuống nhỏ. Hy vọng qua bài này bạn sẽ có cái nhìn tổng quát về cách sử dụng @media trong CSS để tạo ra website responsive.
Unpublished comment
Viết câu trả lời