CSSでレスポンシブデザインを構築してみた

/* 1230px以下の画面幅に適用 */
@media only screen and (max-width: 1230px) {
	body {
		background-size: auto; /* 画像を画面に収める */
		background-repeat: no-repeat; /* 画像を繰り返さない */
		background-position: top left; /* 画像を左上に配置 */
		background-color: black; /* 背景色を黒に設定 */
	}
	.welcome-bar {
		font-size: 18px;
	}
}

/* 800px以下の画面幅に適用 */
@media only screen and (max-width: 800px) {
	.post-template-default .entry-content {
		width: 90%;
	}
}

/* 450px以下の画面幅に適用 */
@media only screen and (max-width: 450px) {
	.welcome-bar {
		display: none;
	}
	
	.post-template-default .entry-content {
		width: 100%;
	}
}