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ảnhvõ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:

Sr.No. Tên & Mô tả Kiểu Giá trị mặc định
1

$value

Nó xử lý các giá trị bằng cách sử dụng tên điểm ngắt, giá trị px, rem hoặc em.

từ khóa hoặc số không ai

Chức năng

BREAKPOINT

Nó sử dụng breakpoint () mixin để tạo các truy vấn phương tiện với giá trị đầu vào phù hợp.

Bảng sau chỉ định giá trị đầu vào có thể được sử dụng bởi điểm ngắt:

Sr.No. Tên & Mô tả Kiểu Giá trị mặc định
1

$val

Nó xử lý các giá trị bằng cách sử dụng tên điểm ngắt, giá trị px, rem hoặc em.

từ khóa hoặc số nhỏ

Tham chiếu JavaScript

Chức năng

Có hai loại chức năng -

  • .atLeast- Nó kiểm tra màn hình. Nó phải rộng ít nhất là một điểm ngắt.

  • .get - Nó được sử dụng để lấy truy vấn phương tiện của điểm ngắt.

Bảng sau chỉ định tham số được sử dụng bởi các hàm trên:

Sr.No. Tên & Mô tả Kiểu
1

size

Nó kiểm tra và lấy tên của điểm ngắt cho các chức năng được chỉ định tương ứng.

Chuỗi