@media screen

619 ワード
はんのうがた html @media CSS テキストリンク
メディアクエリーには、スクリーン、タブレット、アプリケーションが含まれます.
少なくとも1つ以上の式から構成されます.
コンテンツを変更しない場合は、スクリーンサイズに応じてスタイルシートを変更して、適切な外観を表示できます.
スクリーンを描画する前に優先
デスクトップを優先するかどうか
アプリケーションを基準として、
個人的にはアプリを基準にまず画面を描くことをお勧めします.
max-width

// 데스크탑에서 사용될 스타일을 적용 

@media screen and (max-width : 500px ) {
	// 모바일 환경에서 사용될 스타일 적용
	.test {
		border : 1px solid red;
	}
}
ウェブサイトを作成する際には、通常screen、allが使用されます.
min-width
// 모바일 환경에서 적용될 스타일 적용 
@media screen and (min-width : 500px ) {
	// 데스크탑 환경에서 사용될 스타일 적용
	.test {
		border : 1px solid red;
	}
}
Macアンドロイドスタジオを完全にクリア
第7章二編、【MHA】フェイルオーバー