ほぼすべてのページからclass
属性がなくなった。残っているのはコード用のlanguage-*
のみだ。なくすためにマークアップを見直していたりした。なくせるように無理やり変えたとも言う。language-*
は消すと戻せそうもないので残しておいた。img
要素のwidth
とheight
属性は、定期的に消したくなるので消した。画像のサイズならどうにでもなる。
テキスト・サイズをこまめに変えるように変更した。16px
から24px
まで2px
ごとに5段階に刻んだ。ビューポート幅が320px
から400px
増えるごとに大きくなる。
手元では以下のように完全に計算でどうにかするパターンを試している。
html {
font-size: calc((100vw - 320px) / 200 + 1rem);
}
ビューポート幅320px
を基準に、ビューポート幅が400px
増えるごとに2px
ずつフォント・サイズが増える。ユーザーのテキスト・サイズ設定が16px
で、ビューポート幅が1920px
だと、フォント・サイズは24px
になる。3840px
だと33.6px
だ!
良さそうだが、ユーザー設定をうまく反映していないような気もする。ユーザーが18px
に上げていた場合は、2.25px
ずつ増やしてやりたい。calc()
で単位を消して係数化できないので、実現は難しそうだ。ブラウザーにはテキスト・サイズとズームの設定が別々に存在することを考えると、テキスト・サイズの設定は固定数の増減であって倍率での拡大縮小ではないと考えられるので、この実装で良いのかもしれない。