レスポンシブデザインをコーディングするときは、一つcss内にmediaを記述し、サイズ別にコードを記述しています。
基本的には、下記のように異なる箇所だけ、上書きしていくスタイルで書いています。
css
1.hoge { 2 color:red; 3} 4 5@media(min-width : 768px) { 6.hoge { 7 color:blue; 8 margin-bottom: 10px; 9} 10} 11 12@media(min-width : 1024px) { 13.hoge { 14 color: yellow; 15 margin-bottom: 20px; 16} 17} 18
この方法だと、長くなると今選んでるのはどのサイズのコードなのかわからなくなるときがあります。
また、上書きするスタイルだと、同じスタイルを記述してしまうときがあります。
注意すれば問題ない話ではありますが、もう少し効率的な環境や記述の仕方はないかと模索しております。
現在は、下記のようにページ単位でmediaを記述していますが、ヘッダーやサイドなどもう少し細かい単位で書けばわかりやすくなるかなとも考えています。
css
1 2/* Aページ */ 3 4.hoge { 5 color:red; 6} 7 8@media(min-width : 768px) { 9.hoge { 10 color:blue; 11 margin-bottom: 10px; 12} 13} 14 15@media(min-width : 1024px) { 16.hoge { 17 color: yellow; 18 margin-bottom: 20px; 19} 20} 21 22/* Bページ */ 23 24.unko { 25 margin-bottom:5px; 26} 27 28@media(min-width : 768px) { 29.unko { 30 margin-bottom: 10px; 31} 32} 33 34@media(min-width : 1024px) { 35.unko { 36 margin-bottom: 20px; 37} 38} 39
皆さんはレスポンシブのときは、どのように効率的にコーディングしているのでしょうか?
アドバイス等いただけると嬉しいですm(__)m
ちなみにエディタはAtomを使っています。
記述の仕方以外にも、おすすめのパッケージなどあれば、教えてください。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/01/26 14:32