ホームページ > 記事 > ウェブフロントエンド > css3media レスポンシブ レイアウトのサンプル分析
css3media レスポンシブ レイアウトのサンプル分析
- 高洛峰オリジナル
- 2017-03-07 15:27:561856ブラウズ
レスポンシブ レイアウトは、さまざまな端末のユーザーに、より快適なインターフェイスと優れたユーザー エクスペリエンスを提供することができ、大画面モバイル デバイスの人気が高まっている現在、これは「一般的なトレンド」と言っても過言ではありません。このテクノロジーを採用するデザイナーが増えるにつれ、多くの革新が見られるだけでなく、確立されたパターンもいくつか見られます。テクノロジーの発展に伴い、CSS3 の新しいタグの多くは非常に使いやすく、CSS3 のレスポンシブ レイアウトと同様に非常に高度なものになりました。元々は PC でのみ表示されていましたが、@media を追加することで Web ページをレスポンシブにすることができます。これは PC またはモバイルデバイスで使用でき、非常にスケーラブルになります。たとえば、このコードの効果は
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
/* 小于200px*/
@media only screen and (max-width:200px ) {
#p{
background: red;
}
}
/* 大于300px*/
@media only screen and (min-width:300px ) {
#p{
background: yellow;
}
}
</style>
<body>
<p id="p">小于200px背景变红色大于300px背景为黄色</p>
</body>
</html>
です。単一条件または二重条件に使用できます。例: 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
/* 小于200px*/
@media (min-width:200px ) and (max-width:500px ) {
#p{
background: red;
}
}
</style>
<body>
<p id="p">200px以上并且500px以下背景变成红色</p>
</body>
</html>
このコードは、200px 未満または 500px を超える場合は効果を表示しません
単純な @media はレスポンシブ ページを実装できません。とても簡単です?
私が作ったランダムなページです。これは 450px を超えるページ効果です
これは 450px 未満のページ効果です 一般的な方法は、各 p の幅が 450px 未満になるように応答的に縮小することです。 100%
垂直画面は @media (orientation:landscape) であるため、水平画面と垂直画面の両方に適応できます。 . 例えば、私たちが自分で履歴書を作成するとき レスポンシブレイアウトを使用できれば、人事があなたの履歴書を携帯電話で見る可能性もはるかに高くなります
上記は、 css3media レスポンシブ レイアウトの例 これは編集者があなたに共有したすべてのコンテンツです。参考にしていただければ幸いです。また、PHP 中国語 Web サイトをサポートしていただければ幸いです。
css3media レスポンシブ レイアウトのサンプル分析に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。