Navigation menu

0755-82192581
  • Contact us
  • 0755-82192581
  • 深圳市羅湖(hú)區(qū)嘉賓路深華商(shāng)業大廈9樓(地鐵1号線(xiàn)國(guó)貿站B出口既是)

    3375726676@qq.com


    © 2007-2021 All Rights Reserved.
  • 策略型高端網站設計公(gōng)司

    Strategic advanced website design company

    View More
  • 網頁(yè)設計需要流暢的排版

    時間:2023-01-05  作(zuò)者:GARY  來源:/
    當我們在看感興趣的網頁(yè)設計時通常是希望文(wén)本更大,當我們将文(wén)本錨定到視口大小(xiǎo)時,即使使用(yòng)(分(fēn)數)乘數,我們也可(kě)以剝奪他(tā)們這樣做的能(néng)力。它可(kě)以像禁用(yòng)變焦一樣成為(wèi)障礙。如果用(yòng)戶無法将文(wén)本調整到原始大小(xiǎo)的200%,您可(kě)能(néng)還會看到WCAG 1.4.4調整文(wén)本大小(xiǎo)(AA)問題—檢查成功标準1.4.4的失敗,因為(wèi)不正确地使用(yòng)視區(qū)單位來調整文(wén)本大小(xiǎo)。


    高端網頁(yè)設計


    将視窗寬度設為(wèi)800像素,并查看縮放至220%時文(wén)本如何變小(xiǎo)。如果您繼續縮放,文(wén)本将再次開始增加,但永遠(yuǎn)不會達到其2倍的大小(xiǎo)增加(浏覽器目前有(yǒu)500%的縮放限制),如果你無論如何都要使用(yòng)響應式排版技(jì )術,你必須通過縮放來測試它。跨設備、跨浏覽器、跨視窗大小(xiǎo)(不是每個人都全屏浏覽)和跨視窗方向縮放。

    因此如果你想确保用(yòng)戶能(néng)夠将文(wén)本放大到原始大小(xiǎo)的至少200%,你應該做大量的測試。在這篇文(wén)章中(zhōng),我提出了解決方案如何預測前面提到的WCAG在發展階段的失敗。我不确定我的發現是否能(néng)保證100%沒有(yǒu)問題,但是我确信它将有(yǒu)助于避免開發人員在真實用(yòng)例中(zhōng)犯錯誤。


    當我們試圖将頁(yè)面縮放到其原始大小(xiǎo)的200%時,像素的高度和寬度都變得兩倍大,如果不進行縮放,我們将會看到這一段的文(wén)本"可(kě)視尺寸"。由于不同設備的像素的不同物(wù)理(lǐ)尺寸,這"可(kě)視尺寸"會從一個設備改變到另一個設備。真的,如果你的42英寸電(diàn)視的分(fēn)辨率為(wèi)1920×1080像素,那麽它包含2073600像素,例如,你的6.1英寸iPhone 13的分(fēn)辨率為(wèi)2532×1170像素,包含2962440像素。

    我們能(néng)夠預測縮放時文(wén)本大小(xiǎo)的變化行為(wèi),以避免1.4.4調整文(wén)本大小(xiǎo)(AA)下的WCAG失敗。等式(5)和“最低200%縮放要求”(6)給我們一個簡單的方法,在發展階段預測一個問題并分(fēn)析它。由于開發人員可(kě)以實現文(wén)本字體(tǐ)大小(xiǎo)對視口寬度的各種可(kě)能(néng)的依賴性,所以沒有(yǒu)問題的通用(yòng)解決方案。但是您可(kě)以稍微更改輸入參數并查看預測。在大多(duō)數情況下,這樣的修正會給出期望的結果。我們應該選擇完全消除文(wén)本縮放可(kě)能(néng)帶來的問題。

    相關案例

    OTHER CASE