空の回廊

独りよがりなWebLog(たまにTemporary)

文字サイズが大きくなってしまーう時

スマホ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だけ動作しないのは伝統文化ですけどね。。(闇)

検索して出てくるどのサイトにも書かれたメジャーな対策では改善せず探した結果、
私のケースではこれが当てはまった。

cly7796.net

ただ、この方法だとデザインが崩れてしまうので悩んだり検証した結果、その下の階層のdivにhoverを入れて動かすことに成功しました。

私の元々のコードも、ちょっと古いやり方なのかな・・と思ったけど、少しずつマスターしていこうと思います。