Làm thế nào để Tạo Truy vấn Phương tiện trong Dreamweaver - núm vú

Media Query xác định phương tiện (in, màn hình, thiết bị cầm tay, v.v …) và hiển thị trang HTML với một trang tính CSS dựa trên phương tiện đó. Ví dụ: nếu trang được mở trên thiết bị di động Android, nó sẽ hiển thị với một hộp chứa hẹp hơn để vừa với điện thoại và bảng màu có độ tương phản cao hơn hoạt động tốt trong ánh sáng mặt trời.

Với các tệp CSS thay thế được tạo và lưu, xem trang HTML mà chúng sẽ được liên kết trong cửa sổ Xem trước Đa màn hình. Để tạo truy vấn phương tiện trong Dreamweaver, hãy làm theo các bước sau:

1Nhấp vào nút Media Queries.

hộp thoại Media Queries mở ra.

2 Trong vùng Write Media Queries To, chọn Tài liệu này (để xác định truy vấn media cho tài liệu đang mở).

Để tạo một tệp Truy vấn Truyền thông trên đường phố có thể được áp dụng cho các trang khác trong trang web Dreamweaver của bạn, hãy chọn Tùy chọn tệp Truy vấn Mạng Toàn bộ Trang web và sau đó nhấp vào nút Xác định để điều hướng đến và chọn một thư mục và tên tệp tin cho mục đích đó.

3Nhấp hộp thoại Force Devices để báo cáo thực tế Width.

Một thẻ đặc biệt được đưa vào tạo ra các giá trị chiều rộng chính xác hơn từ các phương tiện truy vấn.

4Nhấp vào ?? + ?? để tạo truy vấn phương tiện đầu tiên. Trong hộp Mô tả, nhập nhận xét nhắc bạn truy vấn này là gì (chẳng hạn như máy tính xách tay, máy tính bảng, thiết bị di động, v.v …).

Ví dụ: nếu bạn đang xác định kiểu được sử dụng trên máy tính để bàn và máy tính xách tay, bạn có thể mô tả nó dưới dạng Máy tính để bàn và Máy tính xách tay.

5 Để xác định chiều rộng tối thiểu cho truy vấn phương tiện truyền thông, hãy nhập một giá trị vào ô Tối thiểu Rộng.

Chiều rộng tối thiểu tốt cho bố cục toàn màn hình là 960 pixel.

6Nhấp vào nút Sử dụng tệp Hiện tại và điều hướng tới tệp CSS bạn muốn sử dụng trong môi trường trình duyệt có kích thước đầy đủ.

Con số này minh họa truy vấn phương tiện truyền thông được xác định đầu tiên này.

7Xác định ít nhất một truy vấn phương tiện bổ sung bằng cách lặp lại các bước 4-6.

Ví dụ: nếu bạn có tệp CSS cho máy tính bảng và điện thoại thông minh, hãy đặt tùy chọn thứ hai của bạn và xác định chiều rộng tối đa là 959 pixel.

8Click OK trong hộp thoại Media Queries.

Bạn quay trở lại cửa sổ Xem trước Đa màn hình nơi bạn có thể thấy trang của bạn sẽ trông như thế nào trong các thiết bị mà bạn đã xác định truy vấn phương tiện.