ISARAのレスポンシブデザイン、スマホ画面の模写コーティングが半分くらい終わりました。
一部お見せします↓
なかなかいい感じにいってます。
最初は要領がつかめず苦労しましたが、だんだん早くなりました。
pc画面とスマホ画面とで文字の改行を変える方法。
pc画面とスマホ画面とで文字の改行を変えるのが難しかったです。
どうやるかというと、例えばスマホ画面だけ改行したい所にはHTMLに<br class=”sp”>として、
ベースのCSS(pc画面)には
.sp{display:none;}
レスポンシブCSS(スマホ画面)には
.sp{display:block;}
とします。
pc画面だけ改行したい所には<br class=”pc”>とし、CSSは先程と逆にします。
あとは適宜このクラス(spやpc)を付けていくだけです。
最初はこれがわからずやっていませんでしたが、途中からやり始めました。
同じセレクタを使った方がいい。
レスポンシブcssは時々なぜかスタイルの指定が効かない時があります。
なぜかというと、セレクタをベースのcssと違った書き方をしてるから。
セレクタってクラス名で書くこともあれば、要素名で書くこともありますよね。
同じ要素を指していてもセレクタの書き方が違うとベースのcssが優先されて、レスポンシブcssの指定が効かない時があります。
だからレスポンシブcssでスタイルを変えたい時は、ベースのcssと同じセレクタの書き方で書いた方がいいです。
以上です。
コメント