bởi: John Thies Bây giờ Gmail đang hỗ trợ các truy vấn phương tiện cho một số khách hàng, chúng tôi đã thấy sự quan tâm trở lại về cách sử dụng chúng. Đọc tiếp để tìm hiểu về các truy vấn phương tiện trong email HTML. Truy vấn phương tiện là gì? Truy vấn phương tiện bao gồm loại phương tiện tùy chọn (tất cả, thiết bị cầm tay, bản in, TV, v.v.) và bất kỳ

Bạn đang xem: truy vấn phương tiện cho chiều rộng tối thiểu

Giờ đây, Gmail đang hỗ trợ các truy vấn phương tiện cho một số khách hàng, chúng tôi đã thấy sự quan tâm trở lại về cách sử dụng chúng. Đọc tiếp để tìm hiểu về các truy vấn phương tiện trong email HTML.

Truy vấn phương tiện là gì?

Truy vấn phương tiện bao gồm loại phương tiện tùy chọn (tất cả, thiết bị cầm tay, in, TV, v.v.) và bất kỳ số lượng biểu thức tùy chọn nào giới hạn thời điểm truy vấn sẽ kích hoạt, chẳng hạn như chiều rộng, mật độ pixel hoặc hướng. Truy vấn phương tiện là một phần của CSS3 và cho phép các nhà phát triển tùy chỉnh nội dung của họ cho các bản trình bày nội dung khác nhau của họ.

Ở cấp độ cơ bản, truy vấn phương tiện cho phép nhà phát triển email tạo email đáp ứng bằng cách phát hiện chiều rộng của màn hình. Với mục đích này, truy vấn thường được sử dụng nhất là chiều rộng tối đa. Ở bất kỳ chiều rộng nào nhỏ hơn chiều rộng tối đa được chỉ định, tất cả CSS trong truy vấn sẽ có hiệu lực.

Các truy vấn phương tiện cũng có thể được sử dụng để nhắm mục tiêu các giải pháp nhất định hoặc thậm chí là các ứng dụng email cụ thể. Các truy vấn phương tiện có thể được sử dụng thay thế hoặc bổ sung cho thiết kế kết hợp linh hoạt.

Cách hoạt động của các truy vấn độ rộng tối thiểu và tối đa

Cách hoạt động của truy vấn phương tiện có thể hơi khó hiểu. Hãy cùng xem các truy vấn thường được sử dụng trong email.

Chiều rộng tối đa

Đây là một ví dụ về truy vấn chiều rộng tối đa.

  @ media only screen and (

max-width

:

600px

) {.. .}

Ý nghĩa thực sự của truy vấn này là “Nếu [chiều rộng thiết bị] nhỏ hơn hoặc bằng 600px, thì hãy thực hiện {…}”

Vì vậy, nếu email được mở trên iPhone 5S, với chiều rộng màn hình là 320px, truy vấn phương tiện sẽ kích hoạt và tất cả các kiểu có trong {…} sẽ có hiệu lực.

Chiều rộng tối thiểu

Đây là một ví dụ về truy vấn chiều rộng tối thiểu.

  @ media only screen and (

min-width

:

600px

) {.. .}

Ý nghĩa của truy vấn này thực sự là “Nếu [chiều rộng thiết bị] lớn hơn hoặc bằng 600px, thì hãy thực hiện {…}”

Vì vậy, nếu email được mở trên iPhone 5S, với chiều rộng màn hình là 320px, trình kích hoạt truy vấn phương tiện và các kiểu có trong {…} sẽ có hiệu lực.

Kết hợp Chiều rộng Tối thiểu và Chiều rộng Tối đa

Những truy vấn này có thể được sử dụng cùng nhau để nhắm mục tiêu một loạt các kích thước màn hình cụ thể.

  @ media only screen and (max-width: 600px) and (min-width: 400px) {...}  

Truy vấn ở trên sẽ chỉ kích hoạt cho các màn hình có chiều rộng 600-400px. Điều này có thể được sử dụng để nhắm mục tiêu các thiết bị cụ thể có chiều rộng đã biết.

Xem Thêm  Nền trong suốt - Độ mờ của hình ảnh trong CSS và HTML - hình nền css trong suốt

Điểm ngắt

Hầu hết các truy vấn phương tiện được đặt để kích hoạt ở độ rộng màn hình hoặc điểm ngắt nhất định. Chính xác những gì chúng nên được đặt thành một vấn đề tranh luận giữa các nhà phát triển email.

iPhone và iPad cung cấp cho chúng tôi một số điểm dừng dễ dàng để bắt đầu. Kiểu mã hóa cho những khách hàng cụ thể này sẽ đảm bảo email của chúng tôi trông tuyệt vời trên những màn hình này. Mặt khác, Android rất khác nhau về kích thước màn hình vì có rất nhiều nhà sản xuất và thiết bị khác nhau. Tôi khuyên bạn nên tạo từ hai đến bốn điểm ngắt, dựa trên các thiết bị Apple phổ biến, sẽ bao gồm hầu hết các thiết bị.

  • Điểm ngắt 1 (iPhone 5S): 320px
  • Điểm ngắt 2 (iPhone 6+): 414px
  • Điểm ngắt 3 (iPad Mini): 703px
  • Điểm ngắt 4 (iPad Air): 768px

Các điểm ngắt 3 và 4 là tùy chọn, vì hầu hết các email sẽ trông đẹp khi hiển thị phiên bản dành cho máy tính để bàn trên iPad hoặc máy tính bảng lớn. Bạn thậm chí có thể thoát khỏi chỉ bằng cách sử dụng điểm ngắt 2, nếu bạn mã hóa các bảng vùng chứa của mình để mở rộng đến 100% chiều rộng (chứ không phải chiều rộng đã đặt, điều này có thể khớp hoặc không khớp với thiết bị).

Tận dụng ưu tiên

Hãy nhớ rằng, các quy tắc CSS xuất hiện sau trong các kiểu nhúng sẽ ghi đè các quy tắc trước đó nếu cả hai đều có cùng tính cụ thể. Điều này có nghĩa là bạn có thể đặt quy tắc cho máy tính bảng bằng cách đặt truy vấn phương tiện Breakpoint 4 trước, sau đó đặt kiểu cho thiết bị di động bằng truy vấn phương tiện Breakpoint 2. Vì kiểu Breakpoint 2 xuất hiện sau kiểu Breakpoint 4 nên kiểu dành cho thiết bị di động của bạn sẽ ghi đè kiểu máy tính bảng của bạn khi truy vấn breakpoint 2 được kích hoạt. Điều này có nghĩa là bạn không phải đặt chiều rộng tối thiểu cho bất kỳ truy vấn phương tiện nào của mình, miễn là chúng được sắp xếp theo đúng thứ tự.

Đây là một đơn đặt hàng mẫu.

  • Kiểu máy tính để bàn (không có trong truy vấn phương tiện)
  • Kiểu máy tính bảng (chiều rộng tối đa: 768px)
  • Kiểu Di động (chiều rộng tối đa: 414px)

Mã hóa cho các truy vấn phương tiện

Khi mã hóa một email để trở nên phản hồi bằng truy vấn phương tiện, kỹ thuật phổ biến là tạo các bảng có align = “left” và một lớp đặc biệt để nhắm mục tiêu bên trong các truy vấn phương tiện. Ví dụ: phần hai cột có thể trông như thế này.

  & lt; table border = "0" cellpadding = "0" cellspacing = "0" align = "center" class = "deviceWidth" & gt;
& lt; tr & gt;
& lt; td style = "padding: 10px 0" & gt;
            & lt; table align = "left" width = "49%" border = "0" class = "deviceWidth" & gt;
                & lt; tr & gt;
                    & lt; td & gt;

                    & lt; / td & gt;
                & lt; / tr & gt;
            & lt; / table & gt;
            & lt; table align = "left" width = "49%" border = "0" class = "deviceWidth" & gt;
                & lt; tr & gt;
                    & lt; td & gt;

                    & lt; / td & gt;
                & lt; / tr & gt;
            & lt; / table & gt;
        & lt; / td & gt;
    & lt; / tr & gt;
& lt; / table & gt;  

Mỗi bảng có chiều rộng 49% có thể nằm cạnh nhau khi ở chế độ xem “máy tính để bàn”. 49% được sử dụng thay vì 50% vì Outlook có thể rất kén chọn những gì phù hợp song song và những gì không. Bạn có thể làm cho vừa vặn 50% chiều rộng nếu bạn đặt tất cả các kiểu của mình vừa phải (không có đường viền, phần đệm, v.v.). Bạn có thể tạo phần 3 Cột bằng mã tương tự nhưng thay vào đó hãy sử dụng ba bảng được đặt thành chiều rộng 32%.

Xem Thêm  JavaScript TypeOf - Cách kiểm tra loại biến hoặc đối tượng trong JS - loại var javascript

Khi mã đáp ứng bắt đầu hoạt động, chúng tôi muốn làm cho những nội dung này chặn 100% chiều rộng cho điện thoại để chúng lấp đầy toàn bộ màn hình. Điều này có thể được thực hiện cho hầu hết các điện thoại với một truy vấn phương tiện duy nhất.

  @ media only screen and (max-width: 414px) {
  .deviceWidth {width: 280px! important; padding: 0;}
  .center {text-align: center! important;}
    }  

Bạn có thể tiếp tục thêm các truy vấn phương tiện với các kiểu đặc biệt để bao phủ nhiều kích thước màn hình khác nhau tùy thích. Bạn cũng nên thêm mã vào các truy vấn phương tiện của mình để tối ưu hóa kích thước phông chữ và chiều cao dòng cho từng kích thước màn hình, cải thiện khả năng đọc cho người nhận của bạn.

Nếu bạn muốn bắt đầu làm việc với một mẫu như thế này, hãy lấy mẫu “Emailology” của chúng tôi từ Phần tài nguyên . Bạn có thể có một tài khoản miễn phí để có quyền truy cập vào tất cả các tài nguyên của chúng tôi (như mẫu, sách trắng, hội thảo trên web cũng như các mẹo và thủ thuật dành cho khách hàng).

Các truy vấn phương tiện khác

Bạn có thể thực hiện một số điều thú vị khác với các truy vấn phương tiện. Các cách sử dụng dưới đây phù hợp nhất với email, nhưng hãy xem trang của MDN để biết thêm các kỹ thuật truy vấn phương tiện khác.

Định hướng

Bạn có thể sử dụng truy vấn phương tiện sau để nhắm mục tiêu hướng thiết bị. Rất tiếc, truy vấn này không hoạt động tốt trong iOS Mail. Trong hầu hết các phiên bản, truy vấn phương tiện ngang sẽ luôn kích hoạt bất kể hướng nào.

  @ media screen và (hướng: ngang) {...}  

Nhắm mục tiêu Yahoo! Thư

Bạn có thể sử dụng truy vấn đơn giản này để viết các kiểu sẽ chỉ kích hoạt trong Yahoo! Thư. Điều này có thể được sử dụng để giải quyết các vấn đề về bố cục hoặc kết xuất mà bạn chỉ thấy trong Yahoo! Thư, hoặc để bao gồm các thư chỉ dành cho Yahoo! người dùng.

  @ media (yahoo) {...}  

Mật độ điểm ảnh

Truy vấn phương tiện này chỉ có thể được sử dụng để nhắm mục tiêu các thiết bị có mật độ pixel nhất định. Kết hợp với webkit, điều này có thể cho phép nhà phát triển email chỉ nhắm mục tiêu các thiết bị iOS một cách hiệu quả. Điều này có thể hữu ích khi thêm mã tương tác chỉ hoạt động trong iOS Mail.

  @ media screen và (-webkit-min-device-pixel-ratio: 2) {...}  

Truy vấn phương tiện để in

Bằng cách đặt các kiểu in cụ thể, bạn có thể đảm bảo rằng email của mình sẽ dễ in và trông đẹp mắt. Điều này đặc biệt quan trọng đối với phiếu giảm giá hoặc vé. Bạn có thể ẩn các phần tử vô dụng, chẳng hạn như liên kết và nút, đồng thời chỉ hiển thị phần email quan trọng cần in.

  @ media print {...}  
Xem Thêm  Lặp lại từ điển (khóa và giá trị) với vòng lặp for trong Python - khóa và giá trị của python dict


Xem thêm những thông tin liên quan đến chủ đề truy vấn phương tiện cho chiều rộng tối thiểu

Dreamweaver Tutorial: CSS Media Queries for responsive layouts

  • Tác giả: Mohit Manuja Carbstrong
  • Ngày đăng: 2013-04-13
  • Đánh giá: 4 ⭐ ( 6354 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: http://qualitylessons.net

    CSS Media Queries
    By using media queries, webpages can be tailored to a specific range of output devices without changing the content itself.

    we can do this by using a different css file for different media types like braille embossed handheld print projection screen speech tty tv or all or applying them to features like color, color index , device aspect ratio , device height , device width , grid, width , height , monochrome , resolution or scan . usually as criteria we us e both media type and features . They can also be based on the orientation of the device or the browser .

    some examples

    @media (min-width: 480) { … }
    @media (min-width: 700px) and (orientation: landscape) { … }
    @media tv and (max-width: 700px) and (orientation: landscape) { … }
    @media (min-width: 700px), handheld and (orientation: portrait) { … }
    @media not screen and (color), print and (color) { … }
    @media screen and (device-aspect-ratio: 16/9) { … }

    Mohit Manuja

Tiêu chuẩn chiều cao và kích thước tối thiểu cho các phòng trong tòa nhà

  • Tác giả: dicjsc.com
  • Đánh giá: 4 ⭐ ( 5938 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chiều cao tối thiểu và tiêu chuẩn kích thước cho các phòng đảm bảo rằng có thông gió tốt, ánh sáng và sống thoải mái trong phòng. Tiêu chuẩn về chiều cao và kích thước cho các phòng thay đổi từ quốc gia này sang quốc gia khác và chủ yếu dựa trên sở thích của […]

Cách sử dụng Điểm ngắt truy vấn phương tiện

  • Tác giả: pluginthanhtoan.com
  • Đánh giá: 4 ⭐ ( 6678 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn có thể truy cập toàn bộ khóa học tại đây: Thiết kế web đáp ứng theo kích thước Bite-Sized Trong bài học này, bạn sẽ học cách tạo các điểm ngắt truy

Bề rộng tối thiểu đường ngõ được quy định như thế nào?

  • Tác giả: luatduonggia.vn
  • Đánh giá: 3 ⭐ ( 2097 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bề rộng tối thiểu đường ngõ được quy định như thế nào? Diện tích đất ngõ mua lại từ các chủ bất động sản liền kề.

Những Quy Định Chiều Rộng Vỉa Hè, Hành Lang An Toàn Đường Bộ

  • Tác giả: xaynhahcm.net
  • Đánh giá: 5 ⭐ ( 4115 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Những quy định chiều rộng vỉa hè, hành lang an toàn đường bộ được quy định trong pháp luật…Được nhà nước ban hành, cập nhật mới nhất hiện nay…

Truy vấn phương tiện CSS: chiều rộng tối đa HOẶC chiều cao tối đa

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 8012 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Sử dụng dấu phẩy để chỉ định hai (hoặc nhiều) quy tắc khác nhau: @media screen…

Chiều rộng tối thiểu và chiều rộng tối đa trong truy vấn phương tiện là gì?

  • Tác giả: presbyteryofstockton.org
  • Đánh giá: 3 ⭐ ( 3504 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chiều rộng tối thiểu: Ví dụ trên nói rằng phần tử HTML có tên id là “ButtonWrapper” sẽ có chiều rộng là 100% (từ phần tử mẹ của nó) khi chiều rộng thiết bị lớn hơn hoặc bằng 1024px. Max-width: max-width có nghĩa là nhỏ hơn hoặc bằng chiều rộng được chỉ định trong truy vấn phương tiện đó.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php