CSS Media Queries cho tất cả các thiết bị – Thiết kế web responsive

Ngày nay, trang web của bạn sẽ được truy cập bởi rất nhiều thiết bị: máy tính để bàn có màn hình lớn, máy tính xách tay cỡ trung, máy tính bảng, điện thoại thông minh, v.v.

Để đạt được trải nghiệm người dùng tối ưu trên tất cả các thiệt bị, trang web của bạn nên điều chỉnh bố cục để đáp ứng với các thiết bị khác nhau. Công việc này gọi là thiết kế web đáp ứng (RWD) (responsive web design).

Từ năm 2013 hơn 30% lưu lượng truy cập web đến từ các thiết bị di động, con số này có thể đạt tới 60% vào cuối năm nay. Trên toàn bộ web nói chung, 17,4% lưu lượng truy cập web đến từ điện thoại thông minh vào năm 2013. Thiết kế đáp ứng có liên quan đến tỷ lệ chuyển đổi, SEO, tỷ lệ thoát và rất nhiều lợi ích khác.

Cách thưc để thực hiện thiết kế Web đáp ứng

Thực hiện tập trung vào việc điều chỉnh trang web tương thích trên nhiều thiết bị khác nhau.

Phương pháp mà nhiều nhà thiết kế sử dụng là sử dụng truy vấn phương tiện CSS (CSS media queries) để tự động điều chỉnh theo độ phân giải màn hình nhất định.

Trong CSS3, nhà phát triển / nhà thiết kế web có thể xác định loại màn hình bằng cách đặt các điều kiện như chiều rộng, chiều cao hoặc hướng. CSS media queries kết hợp loại phương tiện và điều kiện cho biết nội dung web sẽ xuất hiện như thế nào trên một thiết bị cụ thể.

Media Queries Starter Template

Các truy vấn CSS Media là một cách tuyệt vời để bạn điều chỉnh website tương thích với các thiết bị và cung cấp trải nghiệm tốt nhất cho người dùng.

Và dưới đây là media queries có thể sẻ giúp ích cho bạn trong việc thiết kế web responsive

/* Media Queries */
/* Smartphones, small screens (portrait and landscape) ———– */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones, small screens (landscape) ———– */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ———– */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ———– */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ———– */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ———– */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ———– */
@media only screen and (min-width : 1224px) {
/* Styles */
}

/* Large screens ———– */
@media only screen and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ———– */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ———– */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6, 7, 8 ———– */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+, 7+, 8+ ———– */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone X ———– */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* iPhone XS Max, XR ———– */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S3 ———– */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ———– */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ———– */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

Responsive Images

Responsive Images là một khía cạnh trung tâm của thiết kế đáp ứng.

Ví dụ: Nếu hình ảnh được hiển thị trong vùng chứa có chiều rộng 600px, hình ảnh sẽ là 600px. Thay đổi kích thước vùng chứa thành 350px và hình ảnh sẽ được tự động thay đổi kích thước theo chiều rộng tối đa có sẵn, trong trường hợp này là 350 pixel. Điều này sẽ cho phép hình ảnh của bạn được tự động thu nhỏ để phù hợp với tất cả các kích thước màn hình.

img {
max-width: 100%;
height: auto;
}

Responsive HTML5 Videos

HTML5 cho phép bạn dễ dàng nhúng video vào các trang web của mình, Chỉ cần thêm các mục sau vào tệp CSS của bạn và bạn sẽ giúp video của bạn tương thích với các thiết bị màn hình khác nhau

video {
max-width: 100%;
height: auto;
}

Riêng đối với video youtube, bạn nên bọc video trong 1 khung chứa với class: video-container như ví dụ dưới đây

Sau đó style cho khung chứa .video-container

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Responsive Background Image

Hình nền được sử dụng rộng rãi trong thiết kế web, do đó cần có khả năng thích ứng với kích thước màn hình của khách truy cập

Kích thước nền CSS cho phép chúng ta làm như vậy. Mặc dù có thể chỉ định kích thước cụ thể, bạn cũng có thể sử dụng bìa sẽ báo cho trình duyệt chia tỷ lệ hình ảnh nền theo tỷ lệ sao cho chiều rộng và chiều cao của nó bằng hoặc lớn hơn chiều rộng / chiều cao của phần tử. Bằng cách đó, hình ảnh sẽ hiển thị trên cả màn hình nhỏ và màn hình lớn.

Ví dụ sau, thuộc tính kích thước nền được áp dụng cho thẻ body, vì vậy hình ảnh sẽ được thu nhỏ để phù hợp với cửa sổ trình duyệt.

body {
background-image: url(images/background-photo.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}

Về mẫu template thiết kế responsive bạn có thể xem demo tại đây

Công cụ kiểm tra Responsive Web Design

Dưới đây là một số công cụ mà bạn có thể nhập website bạn muốn kiểm tra vào để check xem chúng có responsive hay không

http://ami.responsivedesign.is/
https://responsivedesignchecker.com/
http://www.responsinator.com/
http://responsive.pixeltuner.de/
https://screenfly.org/
https://designmodo.com/responsive-test/

Hoặc bạn cũng dễ dàng test ngay trên trình duyệt của mình bằng cách mở trình duyệt web chrome lên, truy cập vào website bạn muốn test và nhấn f12 sau đó click vào mũi tên như hình dưới để test

Nguồn tham khảo: dev.to và css-tricks.com

Tiến Dũng Đào

Tiến Dũng Đào chuyên quản lý, vận hành các dịch vụ website. Anh có nhiều năm kinh nghiệm về VPS, Hosting, technical SEO, CMS. Đặc biệt yêu thích WordPress với hơn 5 năm phát triển theme và plugin. Sở thích của anh là đọc, viết blog, đi du lịch, tập võ và chia sẻ các kiến thức cho mọi người.

Bài viết liên quan

Chặn WordPress cắt ảnh thành nhiều kích cỡ

Sửa lỗi Zalo tài khoản này không tồn tại hoặc không cho phép tìm kiếm

Code canonical tránh trùng lặp nội dung Yoast SEO, Rank math, SEOPress plugin

Cách xóa toàn bộ comment spam / pending WordPress

Tự động xóa cache ở plugin Swift Performance

Code chuyển tag thành hashtags trong WordPress