Giới Thiệu Về Media CSS Trong Responsive

Quy tắc @media cho phép tạo kiểu có điều kiện cho các phần tử.

Các điều kiện có thể dựa trên loại phương tiện hoặc các đặc tính đã biết của thiết bị đang được sử dụng.

Bạn đang xem: @media trong css

Liên kết các truy vấn phương tiện với bố cục linh hoạt và hình ảnh linh hoạt, cho phép triển khai thiết kế web phục vụ.

Trong bài viết này, chúng ta sẽ xem xét cách sử dụng các truy vấn @media để thay đổi kiểu trang web dựa trên truy vấn thông tin thiết bị và hai cách tiếp cận bố cục trang địa chỉ trong thiết kế phục vụ. .

1. Media CSS là gì?

Media CSS là một “công nghệ” được giới thiệu trong Css3. Nguyên tắc nhưng nó sử dụng là thông qua các thông số kích thước màn hình được khai báo thông qua @media Với phương tiện này chúng ta có thể phân đoạn CSS của mình thành nhiều phần không giống nhau tương ứng với kích thước của các loại thiết bị. . Tính chất này có cú pháp sau:

@media not | only mediatype và (media feature) {CSS-Code; }

Trong đó loại trung gian bao gồm các tính chất thường dùng sau:

• tất cả các: Đối với tất cả các thiết bị
• in: Để sử dụng máy in
• màn hình: Đối với máy tính và các thiết bị smartphone

Thực ra còn nhiều cái nữa nhưng với lập trình web thì chúng ta thường sử dụng 3 tính chất đó. Và trước lúc đi vào tìm hiểu tính chất, bạn phải phân biệt được hai khái niệm sau:

• Thiết bị: Là thiết bị sử dụng trang web như Máy tính bảng, Máy tính để bàn, Iphone, ..
• Viewport: Là kích thước hiển thị của giao diện.

Đọc thêm: Nhiều tài xế ko dám đi hết cây cầu dài nhất toàn cầu

Và phương tiện nổi trội bao gồm các tính chất sau:

• tỉ lệ khung hình: Tỉ lệ giữa chiều rộng và chiều cao của khung nhìn
• tỉ lệ co tối thiểu: Tỉ lệ tối thiểu giữa chiều rộng và chiều cao của khung nhìn
• tỉ lệ khung hình tối đa: Tỉ lệ giữa chiều rộng và chiều cao của khung nhìn
• màu sắc: Số bit cho mỗi màu của thiết bị
• chỉ số màu: Số màu thiết bị có thể hiển thị
• tỉ lệ khung hình thiết bị: Tỉ lệ giữa chiều rộng và chiều cao của thiết bị
• tỉ lệ khung hình tối đa của thiết bị: Tỉ lệ tối đa giữa chiều rộng và chiều cao của thiết bị
• tỉ lệ co-thiết bị tối thiểu: Tỉ lệ tối thiểu giữa chiều rộng và chiều cao của thiết bị
• chiều cao thiết bị: Chiều cao của thiết bị
• chiều rộng thiết bị: Chiều rộng của thiết bị
• Cao: Chiều cao của khung nhìn
• chiều rộng: Chiều rộng của khung nhìn
• chiều rộng tối đa: Chiều rộng tối đa của khung nhìn
• chiều rộng tối thiểu: Chiều rộng tối thiểu của khung nhìn
• chiều cao tối đa: Chiều cao tối đa của khung nhìn
• chiều cao tối thiểu: Chiều cao tối thiểu của khung nhìn
• chiều rộng thiết bị tối thiểu: Chiều rộng tối thiểu của thiết bị
• max-device-width: Chiều rộng tối đa của thiết bị
• chiều cao tối thiểu của thiết bị: Chiều cao tối thiểu của thiết bị
• max-device-height: Chiều cao tối đa của thiết bị
• sự định hướng: Hướng của khung nhìn (xoay hoặc ko xoay thiết bị)
• nghị quyết: Độ phân giải của thiết bị đầu ra (sử dụng dpi hoặc dpcm)

Ví dụ: Nếu chiều rộng trình duyệt nhỏ hơn hoặc bằng 480px thì hãy ẩn lớp .lớn.

@media only screen and (max-width: 480px) {.large {display: none; }}

2. Sử dụng @media để tạo Trang web phục vụ

Ở ngoài chiều rộng tối đa chúng tôi cũng có một thông số thường được sử dụng như chiều rộng tối thiểu. Vì vậy việc sử dụng Media query nhằm phân phối các phân đoạn để ghi Css theo độ rộng màn hình của các thiết bị. Vì vậy, thực chất của PHẢN ỨNG NHANH NHẸN là sự liên kết giữa truy vấn phương tiện và mức độ ưu tiên thực thi Css trên cùng một nhân vật.

Thử nghiệm:

• Nếu kích thước trình duyệt nhỏ hơn 769px, 1 hàng dọc sẽ được hiển thị
• Nếu ko, hãy hiển thị hai hàng dọc

Hiện giờ chúng ta sẽ thiết lập CSS như sau:

@media only screen and (max-width: 768px) {.left, .right {float: none; chiều rộng: 100%; }}

3. Sử dụng @media với thiết bị di động và máy tính

Với danh sách các tính chất của @media, chúng ta có thể dễ dàng phát xuất hiện thiết bị. Và sau đây là danh sách các truy vấn @media cho các thiết bị phổ thông.

PC trước hết trong Rseponsive

PC trước tiên là một khái niệm để chỉ giao diện phục vụ tuần tự từ màn hình lớn tới màn hình nhỏ

Nóng: Cách lên lịch tắt máy tính trong Windows 10

Để làm việc với mẫu hình này, chúng tôi sử dụng chiều rộng tối đa trong truy vấn phương tiện truyền thông

Dưới đây là các truy vấn phương tiện tiêu biểu nhưng chúng tôi cần thêm vào dự án.

/ * Màn hình ngang Ipad (1024 x 768) * / @ màn hình phương tiện và (chiều rộng tối đa: 1024px) {} / * Màn hình Ipad dọc (768 x 1024) * / @ màn hình phương tiện và (chiều rộng tối đa: 768px) {} / * Màn hình máy tính bảng nhỏ (480 x 640) * / @media và (max-width: 480px) {} / * Màn hình Iphone (480 x 640) * / @media và (max-width: 320px) {} / * Smartphone nhỏ * / màn hình @media và (max-width: 240px) {}

Ngoài ra, nếu chúng ta cần phục vụ trên nhiều thiết bị hơn, thì công việc của chúng ta là xác định kích thước của nó và thêm vào danh sách truy vấn phương tiện khác theo trật tự màn hình lớn trên màn hình nhỏ truy vấn bên dưới. Bằng cách này, lúc Bộ chọn CSS cần một kiểu để chuyển từ lớn tới nhỏ, nó sẽ được thay đổi theo trật tự ưu tiên Trái ngược với PC trước hết hãy đi qua Di động trước hết

Di động trước hết trong phục vụ

Thứ tự phục vụ của chúng tôi mở đầu tuần tự với màn hình nhỏ và tăng trưởng lên các thiết bị lớn hơn

Để làm việc với mẫu hình này, chúng tôi sử dụng thông số chiều rộng tối thiểu trong các truy vấn phương tiện truyền thông.

/ * Smartphone nhỏ * / màn hình @media và (chiều rộng tối thiểu: 240px) {} / * Màn hình Iphone (480 x 640) * / @media và (chiều rộng tối thiểu: 320px) {} / * Máy tính bảng nhỏ (480 x ) 640) * / @ màn hình phương tiện và (chiều rộng tối thiểu: 480px) {} / * Màn hình dọc Ipad (768 x 1024) * / @ màn hình phương tiện và (chiều rộng tối thiểu: 768px) {} / * Ngang Ipad (1024 x 768 ) * / màn hình @media và (chiều rộng tối thiểu: 1024px) {}

Với mẫu hình này, lúc CSS style cho cùng một nhân vật thì sẽ ưu tiên trật tự từ màn hình nhỏ tới màn hình lớn, càng về sau, các câu truy vấn Css trong màn hình lớn càng được ưu tiên.

4. Kết luận

Tương tự là mình đã giới thiệu xong các công dụng và nhiệm vụ của truy vấn @media. Trên toàn cầu, người ta thường dùng Mobile First, nhưng theo kinh nghiệm của tôi thì PC First luôn được ưa thích hơn cả vì nó thích hợp để xử lý trải nghiệm của người dùng lúc lướt web từ các thiết bị lớn tới nhỏ. Kỳ vọng qua bài viết này bạn sẽ có cái nhìn tổng quan về cách sử dụng @media trong CSS để tạo các trang web responsive.

Tham khảo:

Tham khảo: Cách tải và thiết đặt Youtube Vanced: Chặn quảng cáo Youtube hiệu quả nhất