Hướng dẫn media print screen css - màn hình in phương tiện css
Quy tắc @media cho phép tạo kiểu có điều kiện của các phần tử. Show 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. Kết hợp truy vấn truyền thông với bố cục chất lỏng và hình ảnh linh hoạt, cho phép triển khai thiết kế web đáp ứng. Trong bài này, sẽ xem xét cách các truy vấn @media có thể được sử dụng để thay đổi kiểu dáng trang web dựa trên truy vấn thông tin về thiết bị và hai cách tiếp cận để giải quyết bố cục trang trong thiết kế đáp ứng. 1. Media CSS là gì?Media CSS là một "công nghệ" được giới thiệu trong Css3. Nguyên tắc nó sử dụng trên 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 công cụ này chúng ta có thể phân đoạn Css chúng ta ra nhiều phần khác nhau tương ứng với kích thước của các loại thiết bị. Thuộc tính này có cú pháp như sau:
Trong đó mediatype gồm các thuộc tính hay sử dụng sau:
Thực tế vẫn còn nhiều nữa nhưng với lập trình web thì chúng ta thường sử dụng ba thuộc tính đó thôi. Và trước khi đi vào tìm hiểu các thuộc tính thì ban phải phân biệt hai khái niệm sau:
Và media featured thì gồm các thuộc tính sau:
Ví dụ: Nếu chiều rộng của trình duyệt nhỏ hơn hoặc bằng 480px thì ẩn class .large. Nếu chiều rộng của trình duyệt nhỏ hơn hoặc bằng 480px thì ẩn class .large.
2. Sử dụng @media để tạo Responsive WebsiteNgoài max-width chúng ta còn có tham số hay được sử dụng như min-width. Vậy việc sử dụng Media query nhằm mục đích đưa ra các phân đoạn để viết Css theo độ rộng màn hình các thiết bị. Vậy bản chất của RESPONSIVE là sự kết hợp của media query và tính ưu tiên thực thi của Css trên cùng một đối tượng.max-width chúng ta còn có tham số hay được sử dụng như min-width. Vậy việc sử dụng Media query nhằm mục đích đưa ra các phân đoạn để viết Css theo độ rộng màn hình các thiết bị. Vậy bản chất của RESPONSIVE là sự kết hợp của media query và tính ưu tiên thực thi của Css trên cùng một đối tượng.
Demo:
Lúc này ta sẽ thiết lập CSS như sau:
3. Sử dụng @media với các thiết bị di động và máy tínhVới danh sách các thuộc tính của @media thì ta dễ dàng phát hiện ra các thiết bị. Và sau đây là danh sách các câu query @media cho các thiết bị thông dụng. PC first trong Rseponsive PC first là khái niệm để chỉ tuần tự responsive giao diện từ màn hình to xuống màn hình nhỏ Để làm việc với mô hình này chúng ta sử dụng max-width trong media querymax-width trong media query Dưới đây là các media query điển hình mà ta cần thêm vào dự án.
Ngoài ra, nếu mình cần responsive trên nhiều thiết bị hơn thì công việc của chúng ta là cần xác định kích thước của nó và thêm vào danh sách media query kia theo thứ tự màn hình to ở trên màn hình nhỏ query ở dưới. Theo cách này thì khi một Selector trong css cần style đi qua từ màn hình to đến nhỏ sẽ được thay đổi theo thứ tự ưu tiên Trái ngược với PC First chúng ta cùng đi qua Mobile FirstPC First chúng ta cùng đi qua Mobile First Mobile First trong Responsive Tuần tự tiến trình responsive của chúng ta xuất phát từ màn hình nhỏ và xây dựng dần lên thiết bị có kích thước to Để làm việc với mô hình này chúng ta sử dụng tham số min-width trong media query.min-width trong media query.
Với mô hình này thì khi style Css cho cùng một đối tượng thì theo thứ tự được ưu tiên từ màn hình nhỏ đến to, càng về sau các các Css ở các query màn hình to hơn được ưu tiên hơn. 4. Lời kếtNhư vậy mình đã giới thiệu xong chức năng và nhiệm vụ của query @media. Trên thế giới người ta hay sử dụng Mobile First hơn nhưng với kinh nghiệm của tôi thì PC First luôn được ưu tiên vì nó hợp với việc xử lý trải nghiệm của người dùng khi lướt web từ thiết bị to xuống nhỏ. Hy vọng qua bài này bạn sẽ có cái nhìn tổng quát về cách sử dụng @media trong CSS để tạo ra website responsive. Tham khảo: https://freetuts.net/ https://www.sitepoint.com/atoz-css-screencast-media-queries/ |