對標蘋果的靈動島 華為帶來實況窗功能
繼蘋果的靈動島之后，華為也在今天正式推出了“實況窗”功能。據今天鴻蒙OS 4.0的現場演示顯示，華為的實況窗可以更高效的展現出實時通知，比如鎖屏上就能看到外賣、打車、銀行
盡管一些網頁設計工具為按鈕等元素指定了 CSS 高度值，但設置高度或最大高度實際上可能會違反 WCAG 2.2 Success Criterion 1.4.4 Resize Text.
標準要求：
除了字幕和文本圖片外，文本可以在不使用輔助技術的情況下放大到 200% 而不會丟失內容或功能。
如果對影響元素計算高度和寬度的 CSS 屬性使用固定值，當文字大小增大時，元素內部的文字會被截斷。
你可能會想："但當我把瀏覽器放大到 200% 時，按鈕文本看起來很好！"這可能是這個標準的一個常見誤解。我以前不知道瀏覽器縮放只是問題的一部分！
深入了解 SC 1.4.4: Resize Text ，它指出我們（“作者”）必須處理用戶只增加文本大小的情況，因為他們的瀏覽器（或其他“用戶代理”）可能沒有縮放功能。
文檔說：
如果用戶代理不提供縮放功能，但允許用戶更改文字大小，那么作者有責任確保在調整文字大小時內容仍然可用。
這個標準也是為什么 CSS font-size 屬性使用 rem單位，而 line-height 屬性不使用單位的一個原因。在沒有瀏覽器縮放等機制的情況下，文字大小必須可以調整到 200%。
但怎么辦？處理起來比你想象的更容易！
注意：為了這些演示的目的，請假裝我們使用 rem 單位設置 font-size。我在這里使用 px 單位，以免繼承我的網站的基本字體樣式。
首先，我們看看在 font-size 、 height 、 line-height 和 width 使用固定值的情況下，當文字大小增大時會發生什么。在文字大小增大之前，按鈕看起來很棒！但文字大小增大后就不那么好看了。
<button style="font-size: 16px; height: 36px; line-height: 18px; width: 82px;"> delete all</button>現在，我們使用相同的代碼，并嘗試在 line-height 和 padding 中不使用單位，以影響按鈕的 height 和 width 。當文字大小加倍時，我們應該不會看到文字被截斷。
<button style="font-size: 16px; line-height: 1.125; padding: 8px;"> delete all</button>1111111111111
理解文檔中提到的一種技術是 C28：使用 em 單位指定文本容器的大小。根據我的經驗，隨著視口尺寸的縮小，我發現這種方法更難維護。
想象一下，一個具有大文本大小設置的移動設備。使用 em 單位設置的文本容器可能會比視口寬。如果文本被設備大小截斷，這意味著我們有違反不只一個而是兩個 WCAG 2.2 標準的風險：
在使用技術 C28 時，防止出現這種情況的一種方法是利用 CSS 屬性，如 max-width ，但我個人更傾向于使用盡可能少的 CSS 屬性（以降低長期維護成本）。與使用 width 和 max-width 相比，我們可能只需使用 padding ，然后讓瀏覽器執行其默認的魔法，使元素適合視口。
本文鏈接：http://www.tebozhan.com/showinfo-26-24293-0.html不要在按鈕、鏈接或任何其他文本容器上使用固定的 CSS 高度或寬度
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
下一篇： 數倍數據平滑擴容遷移方案
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號