Thư mục bài viết
Làm cách nào để CSS đáp ứng trên thiết bị di động hiển thị các bố cục đáp ứng màn hình @media khác nhau theo các độ phân giải khác nhau?
Bài viết dưới đây sẽ giới thiệu cách sử dụng CSS để xác định các độ phân giải khác nhau và hiển thị các bố cục chiều rộng khác nhau để đạt được chiều rộng thích ứng.
Các bạn có nhu cầu có thể tham khảo thêm, hi vọng sẽ hữu ích với mọi người.
Sự khác biệt giữa trang web in màn hình @media và @media
- Nếu css cần được sử dụng trong thiết bị in, hãy sử dụng @media, nếu không, hãy sử dụng @media screen.
- Tuy nhiên, điều này chưa chắc đã đúng, trên thực tế, nếu bạn thay thế "screen" bằng "print" và viết nó là @media print, thì CSS có thể được sử dụng trên thiết bị in;
- Nhưng lưu ý rằng css được khai báo bởi @media print chỉ hợp lệ trên các thiết bị in.
1. Mô tả trường hợp nhỏ DIVCSS
Đầu tiên, chúng tôi đặt CSS hộp DIV có tên là ".abc", đặt chiều cao của nó thành 300px và đặt đường viền CSS thành màu đen;
- và cài đặt
margin:0 autoBố cục được căn giữa và hai kiểu này được thiết lập sẵn để dễ dàng xem.
Chúng tôi kéo trình duyệt theo cách thủ công để hiển thị chiều rộng, sau đó quan sát chiều rộng của hộp thay đổi như thế nào:
- Khi chiều rộng của trình duyệt được điều chỉnh với chiều rộng không quá 500px, 100px được hiển thị tương ứng với chiều rộng của hộp;
- Khi chiều rộng của trình duyệt được điều chỉnh nhỏ hơn 901px, ".abc" được hiển thị tương ứng với chiều rộng của hộp, hiển thị 200px;
- Khi chiều rộng trình duyệt được điều chỉnh lớn hơn 1201px, chiều rộng của đối tượng hộp hiển thị 1200px;
- Khi nó nhỏ hơn 1200px, chiều rộng hiển thị là 900px.
2, Mã thích ứng thiết bị đầu cuối điện thoại di động CSS
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* css注释：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and (max-width: 901px) {
.abc {width: 200px;}
}
/* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */- Cần lưu ý rằng thứ tự mã CSS sắp chữ CSS từ lớn đến nhỏ (phán đoán rằng chiều rộng trình duyệt càng lớn thì mặt trước càng cao).
- Điều này là do mối quan hệ logic, phán đoán của @ media về gỡ lỗi CSS sẽ khiến phán đoán không thành công.
3. Mã HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and (max-width: 900px) {
.abc {width: 200px;}
}
/* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */
</style>
</head>
<body>
<div class="abc">DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度</div>
</body>
</html>Lưu ý: thiết bị-tỷ lệ khung hình
- Tỷ lệ khung hình thiết bị có thể được sử dụng để vừa với các thiết bị có tỷ lệ khung hình màn hình cụ thể, đây cũng là một thuộc tính hữu ích.
- Ví dụ: trang của chúng tôi muốn xác định kiểu cho màn hình bình thường với tỷ lệ khung hình là 4: 3.
- Sau đó, đối với màn hình rộng 16: 9 và 16:10, hãy xác định một kiểu khác, chẳng hạn như chiều rộng thích ứng và chiều rộng cố định:
- @ màn hình chỉ phương tiện và (tỷ lệ khung hình thiết bị: 4/3)
4. Tương thích với các trình duyệt chính HTML + CSS + mã nguồn JS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
@media screen and (max-width: 900px) {
.abc {width: 200px;}
}
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
</style>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<div class="abc">DIV宽度会随浏览器宽度变化哦，改变浏览器宽度</div>
</body>
</html>Trên đây là CSS thích ứng với thiết bị đầu cuối di động, hiển thị nội dung chi tiết đáp ứng màn hình @media khác nhau theo các màn hình khác nhau.
Hy vọng Chen Weiliang Blog ( https://www.chenweiliang.com/ ) Đã chia sẻ "Các màn hình khác nhau CSS thích ứng trên thiết bị di động Hiển thị Khả năng phản hồi màn hình @media khác nhau", rất hữu ích cho bạn.
Chào mừng bạn đến chia sẻ liên kết của bài viết này:https://www.chenweiliang.com/cwl-2074.html
Chào mừng bạn đến với kênh Telegram trên blog của Chen Weiliang để cập nhật những thông tin mới nhất!
📚 Hướng dẫn này chứa đựng giá trị to lớn, 🌟Đây là cơ hội hiếm có, đừng bỏ lỡ! ⏰⌛💨
Chia sẻ và thích nếu bạn thích!
Chia sẻ và thích của bạn là động lực không ngừng của chúng tôi!