Media CSS là gì? Giới thiệu 02 cách sử dụng Media CSS cơ bản
16/05/2022 10:11 am | Lượt xem : 8606
Bạn đã tìm hiểu các thông tin về Media CSS chưa? Hiện nay các điều kiện cơ bản có thể được sử dụng dựa trên loại phương tiện hoặc cài đặt mặc định của thiết bị.
Việc kết hợp truy vấn truyền thông với bố cục linh hoạt cho phép bạn thiết kế website sinh động và đặc biệt hơn.
Tại bài viết này, chúng tôi sẽ giới thiệu các cách truy vấn Media CSS để thay đổi kiểu dáng trang web. Chúng tôi sẽ phân tích cụ thể cách truy vấn thông tin về thiết bị, cách tiếp cận để giải quyết vấn đề trong thiết kế trang web. Mời bạn đọc cùng theo dõi.
Media CSS là gì? Giới thiệu 02 cách sử dụng Media CSS cơ bản
Contents
Media CSS là gì?
Media CSS trên thực tế là một công nghệ được ra mắt trong CSS3. Media CSS sử dụng thông qua các số kích thước màn hình được thông báo qua Media. Với công nghệ này chúng ta có thể phân đoạn CSS thành nhiều phần khác nhau tương ứng với kích thước các loại thiết bị.
Thuộc tính này có một cú pháp đơn giản như sau:
@
media not | only mediatype and(media feature) {
CSS - Code;
}
Trong cú pháp trên, mediatype bao gồm các thuộc tính hay sử dụng dưới đây:
- All: Được dùng cho mọi thiết bị.
- Print: Được dùng cho thiết bị là máy in.
- Screen: Dùng cho máy tính và các thiết bị smart phone có màn hình cảm ứng.
Trên thực tế, vẫn còn nhiều những thuộc tính khác. Tuy nhiên ứng với lập trình web thì chúng ta thường dùng ba thuộc tính trên nhất. Ngoài ra để tìm hiểu dễ hơn về các thuộc tính thì bạn cần phân biệt hai khái niệm sau đây:
- Device: Là thiết bị sử dụng website như điện thoại, Laptop, Máy tính để bàn,…
- Viewpoin: Là kích thước hiển thị của màn hình thiết bị.
Dưới đây là ví dụ về một trong hai khái niệm trên.
<meta name="viewport" content="width=device-width, initial-scale=1">
Bạn cần mua một tên miền để bắt đầu website của mình
Một số thuộc tính cơ bản của Media featured
Để làm việc được thuận tiện hơn bạn cũng cần biết thêm về các thuộc tính cơ bản của Media featured.
Dưới đây là bảng liệt kê một số thuộc tính thông dụng:
| aspect-ratio | Tỉ lệ giữa chiều rộng và chiều cao của viewport |
| min-aspect-ratio | Tỉ lệ tối thiểu giữa chiều rộng và chiều cao của viewport |
| max-aspect-ratio | Tỉ lệ tôi đa giữa chiều rộng và chiều cao của viewport |
| color | Số bits cho mỗi màu sắc của device |
| color-index | Số lượng màu sắc mà device có thể hiển thị |
| device-aspect-ratio | Tỉ lệ giữa chiều rộng và chiều cao của device |
| max-device-aspect-ratio | Tỉ lệ tối đa giữa chiều rộng và chiều cao của device |
| device-height | Chiều cao của device |
| device-width | Chiều rộng của device |
| height | Chiều cao của viewport |
| width | Chiều rộng của viewport |
| max-width | Chiều rộng tối đa của viewport |
| max-height | Chiều cao tối đa của viewport |
| min-width | Chiều rộng tối thiểu của viewport |
| min-height | Chiều cao tối thiểu của viewport |
| min-device-width | Chiều rộng tối thiểu của device |
| max-device-width | Chiều rộng tối đa của device |
| min-device-height | Chiều cao tối thiểu của device |
| max-device-height | Chiều cao tối đa của device |
| orientation | Định hướng của khung nhìn (xoay hoặc không xoay màn hình thiết bị) |
| resolution | Độ phân giải của thiết bị đầu ra (sử dụng dpi hoặc dpcm) |
Để giúp các bạn hình dung chúng tôi xin đưa ra một ví dụ minh họa sau:
Nếu bạn lựa chọn chiều rộng của trình duyệt nhỏ hơn 480px thì cần ẩn class.large như sau:
@
media only screen and(max - width: 480 px) {
.large {
display: none;
}
}
Hướng dẫn sử dụng Media CSS để tạo Responsive Website
Hướng dẫn sử dụng Media CSS để tạo Responsive Website
Ngoài việc sử dụng max-width đôi khi chúng ta còn có một tham số được sử dụng như min-width. Khi sử dụng Media query, bạn có thể đưa ra các phân đoạn để viết CSS theo kích thước chiều rộng của màn hình thiết bị.
Bản chất của Responsive chính là một sự kết hợp của media query và tính ưu tiên của CSS trên một đối tượng.
Dưới đây là một hướng dẫn cơ bản về việc dùng Media CSS để tạo Responsive:
<!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>
Trong trường hợp bạn đã tạo theo cấu trúc trên nhưng muốn kích thước trình duyệt nhỏ đi. Tức là nhỏ hơn 769px để chỉ hiển thị website theo 1 hàng dọc. Lúc này bạn sẽ thiết lập CSS như mẫu sau đây:
@
media only screen and(max - width: 768 px) {
.left, .right {
float: none;
width: 100 % ;
}
}
Hướng dẫn Sử dụng Media CSS với các thiết bị di động và máy tính
Hướng dẫn Sử dụng Media CSS với các thiết bị di động và máy tính
Khi đọc phần danh sách các thuộc tính của Media CSS chắc hẳn bạn đã hình dung được cách dùng rồi phải không.
PC first trong Responsive (PC first là một khái niệm để chỉ tuần tự responsive giao diện từ màn hình máy tính, laptop to xuống màn hình nhỏ của điện thoại, máy tính bảng).
Dưới đây là các câu query cho thiết bị di động thông dụng:
/*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) {}
Nếu bạn cần responsive trên nhiều thiết bị hơn thì cần phải xác định kích thước của nó và rồi thêm vào danh sách theo thứ tự. Bạn nên thêm màn hình to vào trước sau đó thêm màn hình nhỏ vào sau.
Theo cách làm này thì một Selector trong CSS cần Style đi qua từ màn hình lớn đến nhỏ sẽ thay đổi theo thứ tự ưu tiên.
Lời kết
Trên đây là bài viết giới thiệu đến bạn đọc chức năng cũng như nhiệm vụ của Media CSS. Hiện nay, người dùng hay sử dụng điện thoại thông minh hơn là các thiết bị máy tính.
Chính vì thế việc sử dụng tốt Media CSS giúp ích rất nhiều cho website của bạn. Chúng tôi hy vọng rằng qua bài viết này, bạn sẽ có nhiều kiến thức hơn về cách sử dụng Media CSS để tạo nên một website. Cảm ơn bạn đã quan tâm theo dõi.
MiraWEB – Tạo website tự động bằng AI trong 30 giây
Các tìm kiếm liên quan đến chủ đề “Media CSS là gì”
| Media screen là gì | @media screen and (max-width 480px) |
| Media CSS | Responsive CSS |
| @media screen and (max-width 768px) | Responsive CSS la gì |
| Media query | Media query flutter |
Bài viết liên quan
Normalize CSS CDN là gì? 05 điểm khác biệt với Reset CSS
Cursor CSS là gì? 2 Cách sử dụng thuộc tính Cursor CSS
Table CSS là gì? Tìm hiểu 03 thuộc tính table trong CSS
Responsive CSS là gì? 5 điều cần biết về Responsive CSS
