文字サイズが大きくなってしまーう時
スマホのchromeで見ると文字サイズが所々適用されてない問題は
恥ずかしながらもう解決してるのだと思っていたら、そうでなく、しかし対策をしても相変わらず。。
何故自分のケースでは変わらないのか見てたら、viewportを設定してないとNGとたどり着きました。
適当に入れたり入れなかったりしてたよーな。。
例)
<meta name="viewport" content="width=760"> <meta name="viewport" content="width=device-width,initial-scale=1">
これくらい当たり前レベルなのかもしれないけど、
いいんです。 今、勉強すれば…!
必要に応じてさらにこれで。。
@media screen and (max-width: 320px){ .●ここにセレクタ●{ /*ここにcss*/ } }
PCベースで作ったちょこっと古いサイトだからなのか、綺麗にしてるつもりがcssが増えちゃって…
もっと綺麗なコードを書ける気がしてモヤモヤするものがあるけど、取りあえずいっか。
IEでopacityが効かない
作業をしていて困った事。
a要素のhoverにopacityを指定しても、他のブラウザではちゃんと表示されるのにIE11では反応しない。。
IEだけ動作しないのは伝統文化ですけどね。。(闇)
検索して出てくるどのサイトにも書かれたメジャーな対策では改善せず探した結果、
私のケースではこれが当てはまった。
ただ、この方法だとデザインが崩れてしまうので悩んだり検証した結果、その下の階層のdivにhoverを入れて動かすことに成功しました。
私の元々のコードも、ちょっと古いやり方なのかな・・と思ったけど、少しずつマスターしていこうと思います。