Foundation - Truy vấn phương tiện

Truy vấn phương tiện là mô-đun CSS3 bao gồm các tính năng phương tiện như chiều rộng, chiều cao, màu sắc và hiển thị nội dung theo độ phân giải màn hình được chỉ định.

Foundation sử dụng các truy vấn phương tiện sau để tạo phạm vi phân tích:

Small - Dùng cho mọi màn hình.
Medium - Nó được sử dụng cho màn hình 640 pixel và rộng hơn.
Large - Nó được sử dụng cho màn hình 1024 pixel và rộng hơn.

Bạn có thể thay đổi kích thước màn hình bằng cách sử dụng các lớp điểm ngắt . Ví dụ: bạn có thể sử dụng lớp .small-6 cho màn hình nhỏ và lớp .medium-4 cho màn hình có kích thước trung bình như được hiển thị trong đoạn mã sau:

<div class = "row">
   <div class = "small-6 medium-4 columns"></div>
   <div class = "small-6 medium-8 columns"></div>
</div>

Thay đổi các điểm ngắt

Bạn có thể thay đổi các điểm ngắt, nếu ứng dụng của bạn sử dụng phiên bản SASS của Foundation. Bạn có thể đặt tên điểm ngắt dưới biến $ breakpoints trong tệp cài đặt như hình dưới đây -

$breakpoints: (
   small: 0px,
   medium: 640px,
   large: 1024px,
   xlarge: 1200px,
   xxlarge: 1440px,
);

Bạn có thể thay đổi các lớp điểm ngắt trong tệp cài đặt bằng cách sửa đổi biến $ breakpoint-class . Nếu bạn muốn sử dụng lớp .large trong CSS, hãy thêm nó vào cuối danh sách như hình dưới đây:

$breakpoints-classes: (small medium large);

Giả sử, bạn muốn sử dụng lớp .xlarge trong CSS, sau đó thêm lớp này vào cuối danh sách như hình dưới đây:

$breakpoints-classes: (small medium large xlarge);

SASS

Mixin Breakpoint

Bạn có thể viết các truy vấn phương tiện bằng cách sử dụng breakpoint () mixin cùng với @include .
Sử dụng các từ khóa giảm hoặc chỉ cùng với giá trị điểm ngắt để thay đổi hành vi của truy vấn phương tiện như được hiển thị trong định dạng mã sau:

.class_name {
   // code for medium screens and smaller
   @include breakpoint(medium down) { }
   
   // code for medium screens only
   @include breakpoint(medium only) { }
}

Bạn có thể sử dụng ba phương tiện truyền thông truy vấn chân dung , phong cảnh và võng mạc cho hướng thiết bị hoặc mật độ điểm ảnh và họ không được chiều rộng dựa truy vấn phương tiện truyền thông.

Chức năng điểm ngắt

Bạn có thể sử dụng chức năng của breakpoint () mixin bằng cách sử dụng hàm nội bộ.
Các breakpoint () chức năng có thể được sử dụng trực tiếp viết các truy vấn phương tiện truyền thông riêng -

@media screen and #{breakpoint(medium)} {
   // code for medium screens and up styles
}

JavaScript

Làm việc với Truy vấn Phương tiện

Foundation JavaScript cung cấp hàm MediaQuery.current để truy cập tên điểm ngắt hiện tại trên đối tượng Foundation.MediaQuery như được chỉ định bên dưới:

Foundation.MediaQuery.current

Hàm MediaQuery.current hiển thị tên điểm ngắt nhỏ , trung bình , lớn như hiện tại.
Bạn có thể nhận được truy vấn phương tiện của breakpoint bằng cách sử dụng hàm MediaQuery.get như hình dưới đây -

Foundation.MediaQuery.get('small')

Tham khảo Sass

Biến

Bảng sau liệt kê các biến SASS, có thể được sử dụng để tùy chỉnh các kiểu mặc định của thành phần:

Sr.No.	Tên & Mô tả	Kiểu	Giá trị mặc định
1	$breakpoints Nó là một tên điểm ngắt có thể được sử dụng để viết các truy vấn phương tiện bằng cách sử dụng breakpoint () mixin.	Bản đồ	nhỏ: 0px trung bình: 640px lớn: 1024px xlarge: 1200px xxlarge: 1440px
2	$breakpoint-classes Bạn có thể thay đổi đầu ra của lớp CSS bằng cách sửa đổi biến $ breakpoint-class .	Danh sách	nhỏ vừa lớn

Mixin

Mixins tạo một nhóm các kiểu để xây dựng cấu trúc lớp CSS của bạn cho các thành phần Foundation.

BREAKPOINT

Nó sử dụng breakpoint () mixin để tạo các truy vấn phương tiện và bao gồm các hoạt động sau:

Nếu chuỗi được chuyển, thì mixin tìm kiếm chuỗi trong bản đồ $ breakpoints và tạo truy vấn phương tiện.
Nếu bạn đang sử dụng giá trị pixel, thì hãy chuyển đổi nó thành giá trị em bằng cách sử dụng $ rem-base .
Nếu giá trị rem được chuyển, thì nó sẽ thay đổi đơn vị của nó thành em.
Nếu bạn đang sử dụng giá trị em, thì nó có thể được sử dụng như hiện tại.

Bảng sau chỉ định tham số được sử dụng bởi điểm ngắt: