NO IMAGE

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

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

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

 

記述の方法を再確認


<link rel="stylesheet" href="small.css" media="screen and (max-width:480px)">
/*画面サイズが480pxまでこのファイルのスタイルが適用される。*/
<link rel="stylesheet" href="medium.css" media="screen and (min-width:480px) and (max-width:1024px)">
/* 画面サイズ480pxから1024pxまではこのファイルのスタイルが適用される。 */
<link rel="stylesheet" href="wide.css" media="screen and (min-width:1024px)">
/* 画面サイズ1024px以上はこのファイルはスタイルが適用される

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

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

モバイルファースト

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

/* --------------------------------------------- */
/* ▼モバイルファースト (全環境に共通のデザイン) */
/* --------------------------------------------- */

/* -------------------------------------------- */
/* ▼タブレット用デザインとして付け足すデザイン */
/* -------------------------------------------- */
@media all and (min-width: 768px) {
}
/* ------------------------------------ */
/* ▼PC用デザインとして付け足すデザイン */
/* ------------------------------------ */
@media all and (min-width: 920px) {

}

 

 

いくつで分けるのか?

モバイル ~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でもリアルタイムにいけるかテスト

早速デモを作る。

<link href="base.css"           rel="stylesheet" type="text/css" media="all" >
<link href="style_600_959.css"  rel="stylesheet" type="text/css" media="screen and (min-width:600px) and (max-width:959px)">
<link href="style_960_1280.css" rel="stylesheet" type="text/css" media="screen and (min-width:960px) and (max-width:1280px)">
<link href="style_1281.css"     rel="stylesheet" type="text/css" media="screen and (min-width:1281px)">

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

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

 

NO IMAGE
最新情報をチェックしよう!

    Warning: Trying to access array offset on value of type bool in /home/xsvx1010357/kato.space/public_html/wp/wp-content/themes/the-thor/template-parts/single-prevnext.php on line 37

    Warning: Trying to access array offset on value of type bool in /home/xsvx1010357/kato.space/public_html/wp/wp-content/themes/the-thor/template-parts/single-prevnext.php on line 38

    Warning: Trying to access array offset on value of type bool in /home/xsvx1010357/kato.space/public_html/wp/wp-content/themes/the-thor/template-parts/single-prevnext.php on line 39

  • Warning: Trying to access array offset on value of type bool in /home/xsvx1010357/kato.space/public_html/wp/wp-content/themes/the-thor/template-parts/single-prevnext.php on line 83

    Warning: Trying to access array offset on value of type bool in /home/xsvx1010357/kato.space/public_html/wp/wp-content/themes/the-thor/template-parts/single-prevnext.php on line 84

    Warning: Trying to access array offset on value of type bool in /home/xsvx1010357/kato.space/public_html/wp/wp-content/themes/the-thor/template-parts/single-prevnext.php on line 85
>最強のWordPressテーマ「THE THOR」

最強のWordPressテーマ「THE THOR」

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

CTR IMG