メディアクエリでディスプレイサイズ毎にcssを指定する。

メディアクエリの設定の仕方です。

スマホや等の表示域によってレイアウトが変わってしまう、または変えたい時に
ディスプレイサイズ毎にcssの指定を変える事ができます。

指定の仕方は下記です。

.test{
	width:100%;	
}
@media screen and (max-width: 768px){
	
	.test{
		width:50%;
	}
}

通常.testに対してwidth:100%に設定しているのに対し
@media screen and (max-width: 768px)と記述した括弧内に
ディスプレイのサイズが768px以下になった場合だけwidth:50%になります。

主に使用する設定として

・Max Width
ディスプレイの最大幅。
このサイズより小さい場合に適用されます。

・Min Width
ディスプレイの最小幅で指定します。
このサイズより大きい場合に適用されます。

よく使われる数値については
1024px、768px、480px、320px
があるようです。