Hi xin chào mọi người nha, mình là kimidev đây, trong bài viết hôm nay mình
xin chia sẽ cho anh em chúng ta một ít kiến thức về Responsive design.
 |
| Responsive CSS Dimensions for Various Types of Devices |
Responsive design (thiết kế đáp ứng) không chỉ là xu hướng mà còn là một yếu
tố quan trọng trong SEO.
Nó giúp website hiển thị tốt trên các thiết bị khác nhau, từ
máy tính để bàn đến smartphone và tablet. Trong bài viết
này, chúng ta sẽ đi sâu vào việc tổng hợp các kích thước responsive cần thiết.
1. Tại Sao Cần Thiết Kế Responsive?
Thiết kế responsive là cách để website của bạn tự điều chỉnh để phù hợp
với kích thước màn hình của người dùng. Điều này giúp
nâng cao trải nghiệm người dùng, giảm tỷ lệ tỷ lệ thoát trang của người
dùng, và cải thiện xếp hạng trên công cụ tìm kiếm.
Responsive Design
2. Các Kích Thước Responsive Phổ Biến
a. Máy Tính Để Bàn
Màn hình rộng: 1920x1080 pixels
Màn hình trung bình: 1366x768 pixels
b. Tablet
Màn hình ngang: 1024x768 pixels
Màn hình dọc: 768x1024 pixels
c. Smartphone
Màn hình lớn: 414x896 pixels (ví dụ: iPhone XS Max)
Màn hình trung bình: 375x667 pixels (ví dụ: iPhone 8)
 |
| kích thước thực trên các dao diện |
3. Cách Thiết Kế Responsive
Bạn có thể sử dụng CSS để thiết kế responsive, thông qua việc sử dụng các
media queries, Bootstrap, Taiwind CSS, .... Ví dụ:
a. Máy Tính Để Bàn
@media screen and (min-width: 1366px) {
body {
font-size: 18px;
}
.container {
width: 80%;
margin: auto;
}
}
giải thích một chút nhé:
- Khi chiều rộng màn hình ≥ 1366 pixels: Các thuộc tính trong block này sẽ được áp dụng. Ví dụ, kích cỡ chữ trong thẻ <body> sẽ là 18px, và các phần tử với class .container sẽ chiếm 80% chiều rộng của người cha chứa nó.
- Khi chiều rộng màn hình < 1366 pixels: Các thuộc tính trong block này sẽ không được áp dụng. Trang web sẽ rơi vào quy tắc CSS mặc định hoặc các media query khác mà bạn có thể đã xác định cho màn hình nhỏ hơn.
b. Tablet
@media screen and (min-width: 768px) and (max-width: 1024px) {
body {
font-size: 16px;
}
.navigation {
display: flex;
}
.menu-item {
padding: 10px;
}
}
Giải thích: Khi chiều rộng màn hình < 1366 pixels nhưng ≥ 768 pixels: Các thuộc tính trong media query dành cho máy tính để bàn không được áp dụng, nhưng thuộc tính dành cho tablet có thể được áp dụng nếu chiều rộng màn hình nằm trong khoảng từ 768 đến 1024 pixels.
c. Smartphone
@media screen and (max-width: 414px) {
body {
font-size: 14px;
}
.header {
padding: 15px;
}
.navigation {
display: block;
}
}
Giải thích: Khi chiều rộng màn hình < 768 pixels: Cả ba media query trên đều không được áp dụng, và các thuộc tính dành cho smartphone sẽ được áp dụng nếu chiều rộng màn hình ≤ 414 pixels.
Kết Luận
Thiết kế responsive không chỉ làm tăng trải nghiệm người dùng mà còn giúp
cải thiện SEO. Bằng cách hiểu rõ và áp dụng các kích thước responsive cho
các loại thiết bị, bạn sẽ đảm bảo rằng website của bạn luôn trông tốt và
hoạt động hiệu quả. Okii và đây là toàn bộ kiến thức mà mình muốn chia sẽ tới các bạn, nếu các bạn thấy hay hoặt có thắt mắc gì thì hãy comment bên dưới bài mình sẽ giải đáp cho mọi người nha.
Design by @KiMiDev
