Chương 15 web khai phát kỹ thuật 2
Hưởng ứng thức thiết kế:
CSS truyền thông thẩm tr.a (media queries) là một loại kỹ thuật, có thể căn cứ vào thiết bị màn hình kích thước, nhận thức, phương hướng các đặc tính, ứng dụng khác biệt CSS kiểu dáng, thực hiện website tại khác biệt trên thiết bị tự thích ứng sắp đặt.
Phương pháp sử dụng:
1. Sử dụng "@media" Quy tắc bắt đầu truyền thông thẩm tra.
2. Chỉ định một cái hoặc nhiều cái truyền thông đặc thù ( Như "min-width", "max-width", "orientation" Chờ ).
3. Tại dấu móc nhọn bên trong biên soạn nhằm vào đặc biệt thiết bị CSS kiểu dáng.
Phía dưới là một cái đơn giản thí dụ mẫu, biểu diễn như thế nào sử dụng truyền thông thẩm tr.a thực hiện tại khác biệt trên thiết bị biểu hiện không đồng dạng thức hướng dẫn cột:
"""html
Media Queries thí dụ mẫu
--------------------
.nav {
background-color: #333;
overflow: hidden;
}
.nav a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover.dropdown-content {
display: block;
}
@media screen and (max-width: 600px) {
.nav a {
display: block;
text-align: left;
}
.nav {
overflow: hidden;
}
.dropdown {
float: none;
}
.dropdown-content {
position: relative;
}
.dropdown-content a {
text-align: left;
}
}
"""
Tại cái này thí dụ mẫu bên trong, chúng ta vì cái nút tăng thêm một cái hoạt hình hiệu quả, khiến cho tại con chuột lơ lửng lúc trên dưới nhảy lên. Sử dụng tới độ hiệu quả trơn nhẵn mà thay đổi cái nút màu nền cùng vị trí, đồng thời ứng dụng biến hóa hiệu quả làm cho cái nút tại lơ lửng lúc hơi hướng về phía trước di động.