Bạn có thể sử dụng vw (chiều rộng khung nhìn) cho kích thước phông chữ trong email HTML cho thiết bị di động

Question

Tôi đang tạo mẫu email HTML. Phiên bản máy tính để bàn được thực hiện với các bảng, vài css nội tuyến, tất cả các kích thước được xác định bằng giá trị% hoặc px.

Đối với phiên bản di động, tôi làm việc với div và css. Bây giờ tôi muốn thay đổi kích thước một số văn bản tùy thuộc vào chiều rộng khung nhìn. Bởi vì nếu tôi xác định kích thước phông chữ của một tiêu đề để nói 28px, thì một văn bản nhất định có thể trông OK trên một thiết bị rộng hơn, nhưng trên một thiết bị nhỏ hơn, văn bản trở nên lớn và ngắt dòng tiếp theo.

Bây giờ tôi đang xem xét thiết lập các cơ sở font-size như thế này: (chạy đoạn mã trong chế độ toàn bộ trang và sau đó thay đổi kích thước cửa sổ để nhìn thấy hiệu quả)

:root { 
 
    font-size: calc(8px + 4vw); 
 
}

<h1> 
 
    Header 1 
 
</h1> 
 
<h2> 
 
    Header 2 
 
</h2> 
 
<p> 
 
    Lorem ipsum dolor sit amet, quo eripuit menandri instructior ad, nostro iracundia nam at. Etiam quaerendum vis no. Percipit accommodare ne eum. Alia molestie democritum vix no, natum habemus ei eum, qui ut adhuc partem luptatum. 
 
</p>

Giống như này kích thước phông chữ tiếp theo được chia tỷ lệ tùy thuộc vào chiều rộng khung nhìn, tiêu đề trở nên nhỏ hơn trên các thiết bị nhỏ hơn, ngăn văn bản bị hỏng hoặc ít nhất làm cho văn bản ít có khả năng hơn. Bằng cách sử dụng calc() tôi cũng xác định một mức tối thiểu nhất định, vì vậy văn bản sẽ không trở nên quá nhỏ.

Bây giờ câu hỏi của tôi là liệu có thể sử dụng tính năng này cho e-mail (điện thoại di động) hay không được hỗ trợ bởi ứng dụng email di động? Hỗ trợ trình duyệt khá tốt, nhưng tôi không thể tìm thấy bất kỳ thông tin nào về hỗ trợ của ứng dụng e-mail di động.

Answer 1

Xin chào, bạn luôn có thể kiểm tra hỗ trợ cho thuộc tính css qua số http://caniuse.com. Tôi thấy điều này: http://caniuse.com/#search=vw hiển thị hỗ trợ iOS 8.4 và Android 4.4 trở lên. Không phải là tuyệt vời, và tôi tưởng tượng rất nhiều người vẫn còn trên iOS7 (ok, có thể chỉ cho tôi!).

Tóm lại, tôi đồng ý rằng bạn có lẽ không nên phụ thuộc vào công nghệ này đang hoạt động ở mọi nơi.

Answer 2

Px thực sự là tuyên bố đơn vị nhất quán duy nhất cho kích thước phông chữ trong phát triển email HTML trên các máy khách và thiết bị. (https://www.campaignmonitor.com/blog/email-marketing/2011/04/should-i-use-em-or-px-when-coding-for-html-email/).

Trong thiết kế di động, văn bản lớn hơn thường tốt hơn, nhưng có những lúc tiêu đề hoặc các mục khác phải được thu nhỏ để vừa với thiết kế. Lựa chọn tốt nhất của bạn ở đây là tạo email với thiết kế 'di động đầu tiên' và sau đó sử dụng truy vấn phương tiện và điều kiện MSO để làm cho nó mở rộng cho máy tính để bàn.

Với hơn 50% email được mở trên thiết bị di động (http://www.emailmonday.com/mobile-email-usage-statistics) và Gmail và nhiều ứng dụng email của bên thứ ba khác hoàn toàn loại bỏ thẻ kiểu, có ý nghĩa hơn khi có điện thoại di động mặc định.

Có các tùy chọn để giúp ứng dụng web của Gmail hoạt động tốt hơn. (http://freshinbox.com/blog/interactive-emails-in-gmail-using-css-attribute-selectors/) Mặc dù lớp và id không hoạt động, bằng cách sử dụng kiểu dáng trên thuộc tính lang (hoặc thuộc tính được kiểm tra gần đây hoặc thuộc tính aria-labelledby) kiểm soát bố cục của phiên bản thư trên web của Gmail ở một mức độ.