NO IMAGE

レスポンシブの基本、メディアクエリの書き方 再確認

  • 2017年3月12日
  • css
  • 1view
css NO IMAGE

どうも挙動がいまいちなので、確認

 

記述の方法を再確認


media=の指定のあとに、
“screen
and (min-width:480px) minで○○px~から
and (max-width:1024px)” maxで○○px~まで

モバイルファーストと通常PCの記述順

モバイルファースト

@See https://allabout.co.jp/gm/gc/451911/2/

 

 

いくつで分けるのか?

モバイル ~599px
タブレットと狭いデスクトップ 600px~959px min-width:600px  max-width959px
デスクトップと横タブレット 960px~1280px min-width:960px  max-width1280px
デスクトップ専門 1281px~ minwidth:1281px

599pxまではモバイル専用
600px~959pxまではタブレット(とブラウザを狭くしたデスクトップ)
960px~1280pxまではデスクトップ(と横置きしたタブレット)
1281px~以上はデスクトップ専用)

@see http://scene-live.com/page.php?page=97

早速デモを作る。

 

別のスタイルシートに分けたいが、リアルタイムに反応するのか?

一つのCSSに@media all and (min-width: 600px) and (max-width:959px) {とかなら分かるが、
外部CSSでもリアルタイムにいけるかテスト

早速デモを作る。

おお?Baseの内容を見てくれない。    痛恨のアップロードミス

リアルタイムに反応でしてるな。
ならば、

 

NO IMAGE
最新情報をチェックしよう!
>最強のWordPressテーマ「THE THOR」

最強のWordPressテーマ「THE THOR」

システムの構築・保守運用「   」 社内システム担当が欲しいが、専属で雇うほどの仕事量はない。 必要な時に必要なだけ頼りたいというお悩みを持つ企業様へ専門知識を持って対応を行っております。 サーバから各種システムまで自社・他社で構築されたシステムに対してサポートを行っております。

CTR IMG