Responsive CSS là gì? 5 điều cần biết về Responsive CSS

16/05/2022 09:39 am | Lượt xem : 12007

Bạn truy cập bài viết này bằng điện thoại thông minh hay máy tính? Nếu giao diện website của chúng tôi chỉ cài đặt chế độ xem trên máy tính thì chắc chắn bạn sẽ không thể nhìn thấy hết nội dung trên trang chủ.
Vậy làm thế nào để website có thể tương thích trên cả máy tính lẫn điện thoại di động và thân thiện với người dùng? Responsive CSS là giải pháp cho yêu cầu này nhanh nhất và dễ nhất.
Tại bài viết hôm nay chúng tôi sẽ giới thiệu đến bạn đọc những khái niệm liên quan đến Responsive CSS cũng như cách sử dụng của chúng. Mời bạn đọc cùng theo dõi.

Contents

Giới thiệu tổng quan về Responsive CSS
Hướng dẫn cách sử dụng Responsive CSS
- Cấu trúc Responsive CSS sẽ được hiển thị như thế nào?
- Một ví dụ Grid Demo trong CSS
Các tạo các truy vấn media trong CSS
- Cấu trúc trên Laptop
- Cấu trúc trên Apple Watch
Kết luận về Responsive CSS
Các tìm kiếm liên quan đến chủ đề “Responsive CSS là gì”
- Bài viết liên quan

Giới thiệu tổng quan về Responsive CSS

Responsive CSS là gì?

Trong tiếng Anh thì Responsive là một tính từ dùng để chỉ một website có khả năng hiển thị độ tương thích trên mọi kích thước của trình duyệt.
Để giúp bạn dễ hình dung chúng tôi có minh họa sau đây: Ví dụ giao diện website của bạn ở độ rộng cố định là 800px thì chắc chắn khi bạn xem ở trình duyệt trên điện thoại có chiều ngang từ 320px – 420px thì sẽ không hiển thị hết các nội dung của website đó.

Tại sao cần dùng đến Responsive CSS?

Chắc hẳn khi đặt ra bài toán liên quan đến căn chỉnh kích thước bạn có thể nghĩ ra một giải pháp đó chính là gán giá trị % hiển thị của website.
Ví dụ bạn sẽ gán % hiển thị của website tương ứng với kích thước của màn hình thiết bị. Điều này có thể thực hiện được, tuy nhiên có nhiều hạn chế nếu website của bạn có giao diện từ 3 cột nội dung trở lên. Lúc này thì trên điện thoại di động người dùng rất khó để có thể nhìn thấy các nội dung trong từng cột đó.
Người dùng cần phải dùng tay phóng to kích thước của từng cột để có thể nhìn thấy nội dung trên website. Chính vì thế mà cách gán % hiển thị sẽ không khả dụng đối với những website phức tạp và có nhiều nội dung phân nhánh.
Để hiển thị giao diện website một cách chuyên nghiệp hơn, dễ nhìn hơn và giúp người dùng dễ dàng thao tác chúng ta cần đến một công cụ hữu hiệu hơn. Và trên thực tế, những lập trình viên thường sử dụng công cụ Responsive CSS để giải bài toán này một cách đơn giản. Cách thức hoạt động của Responsive CSS như thế nào? Mời bạn đọc cùng theo dõi tiếp nhé.

Cách thức hoạt động của Responsive CSS như thế nào?

Responsive CSS hoạt động bằng cách người lập viết CSS cho trình duyệt hiểu được và thực hiện trên các kích thước trình duyệt khác nhau.
Bạn có thể thiết lập một đoạn CSS chỉ áp dụng cho trình duyệt có kích thước bề rộng là 320px đối với điện thoại thông minh. Lúc này, Responsive là một kỹ thuật thiết kế sẽ xử lý và phân tích từ client-side và không gửi truy vấn đến máy chủ xử lý.
Điều này dẫn đến một hạn chế chính là nó sẽ làm cho trình duyệt của bạn mất thêm một chút thời gian để xử lý CSS.

Hướng dẫn cách sử dụng Responsive CSS

Cấu trúc Responsive CSS sẽ được hiển thị như thế nào?

Một website sẽ được hiển thị theo nhiều cách khác nhau tương ứng với mỗi thiết bị tương ứng. Để giúp bạn dễ hình dung, bạn có thể xem hình ảnh mô phỏng dưới đây về cấu trúc hiển thị trên các thiết bị khác nhau:

Một ví dụ Grid Demo trong CSS

Dưới dây là một ví dụ đơn giản để sử dụng Grid Demo trong CSS:

<html>
<head>
</head>
<style>
body {font: 600 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif}
h1 {
    color: #9799a7;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 6px;
}
.container:before,
.container:after {
    content: "";
    display: table;
}
.container:after {clear: both}
.container {
    background: #eaeaed;
    margin-bottom: 24px;
    *zoom: 1;
}
.container-75 {width: 75%}
.container-50 {
    margin-bottom: 0;
    width: 50%;
}
.container,
section,
aside {border-radius: 6px}
section,
aside {
    background: #2db34a;
    color: #fff;
    margin: 1.858736059%;
    padding: 20px 0;
    text-align: center;
}
section {
    float: left;
    width: 63.197026%;
}
aside {
    float: right;
    width: 29.3680297%;
}
</style>
<body>
<h1>100% do rong cua Container</h1>
<div class="container">
<section>Section</section>
<aside>Aside</aside>
</div>
<h1>75% do rong cua Container</h1>
<div class="container container-75">
<section>Section</section>
<aside>Aside</aside>
</div>
<h1>50% do rong cua Container</h1>
<div class="container container-50">
<section>Section</section>
<aside>Aside</aside>
</div>
</body>
</html>

Sau khi áp dụng cấu trúc trên kết quả hiển thị như sau:

Cấu trúc Responsive CSS sẽ được hiển thị như thế nào?

Các tạo các truy vấn media trong CSS

Để tạo các truy vấn media cho các Style Rule khác nhau với thiết bị và kích cỡ khác nhau sẽ cần phải cài đặt riêng. Ví dụ như điện thoại, màn hình máy tính, máy tính bảng,… sẽ được cài đặt khác nhau. Dưới đây là một ví dụ về một số thiết bị:

Cấu trúc trên Laptop

/* ----------- Non-Retina Screens ----------- */
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {}
/* ----------- Retina Screens ----------- */
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {}

Cấu trúc trên Apple Watch

/* ----------- Apple Watch ----------- */
@media
(max-device-width: 42mm)
and (min-device-width: 38mm) {}

Kết luận về Responsive CSS

Trên đây là bài viết giới thiệu về Responsive CSS, lý do cần sử dụng công cụ này cũng như cách sử dụng CSS trong một số trường hợp. Chúng tôi hy vọng rằng qua bài viết này, bạn đọc đã có thêm nhiều kiến thức hơn về Responsive CSS cũng như dần biết cách sử dụng chúng.
Hy vọng rằng với những chia sẻ trên bạn đọc nhận được nhiều kiến thức bổ ích và có thể áp dụng thành công. Nếu có bất kỳ thắc mắc nào đừng ngại liên lạc với chúng tôi để được trợ giúp. Cảm ơn bạn đã quan tâm theo dõi.

MiraWEB – Tạo website tự động bằng AI trong 30 giây

Bằng công nghệ AI, MiraWEB sẽ tạo ra một trang web chuyên nghiệp với ý tưởng của riêng bạn chỉ với vài cú click
Không cần phải có kiến thức về lập trình hay thiết kế, website của bạn sẽ được tối ưu nội dung và hình ảnh chỉ trong giây lát

TRẢI NGHIỆM NGAY MiraWEB

Vào nhóm Zalo để nhận thêm nhiều ưu đãi hơn nữa
Hotline: (024) 71 089 999
Email: info@tenten.vn

Các tìm kiếm liên quan đến chủ đề “Responsive CSS là gì”

Responsive la gì	Responsive trong CSS
Responsive CSS	Bản chất của Responsive là gì
Responsive Web là gì	CSS tự co giãn theo màn hình
Responsive nghĩa là gì	Responsive web design