TIL no.27-CSSインタラクティブWeb
CSS動的Web
応答型Webページが必要
一般的なパソコンのほか、スマートフォンやタブレットなど多様なメディア機器の使用により、どの機器でも同じページを破壊しない機能を提供する必要がある.
開発者の観点から,各機器にコードの開発/管理が不要であるため,初期開発コストとメンテナンスコストを容易に低減できる.
media query
反応型ネットワークのために最も使いやすい技術はメディアクエリーです.
ほとんどの最新のブラウザで正常に動作しています.
でも!IE 9からエクスポート可能@media screen and (min-width: 300px) and (max-width: 512px) {
...
}
CSSに該当するコードを入力し、最小幅300 pxから最大幅512 pxまでの範囲で、以下に示すCSSを適用します.
混同される可能性のある部分(私だけ...)
最小幅は300 px(最小幅:300 px)、すなわち画面幅が300 pxより大きい場合に適用されるCSS
(最大幅:512 px)の最大幅は512 px、すなわち画面幅が512 px未満の場合に適用されるCSS
CSS Unit
@media screen and (min-width: 300px) and (max-width: 512px) {
...
}1. px
pxは典型的な絶対CSSユニットである.
width,height値指定などは一般的に用いられるが,反応型には対応できない.
2. Percentage(%)
主にwidth値を指定します.
親の都合で相対的な大きさを決める.
3. Relative unit
font-size (em / rem)
em
Em単位は、親要素の数倍のサイズでサイズを決定します.
font-size: 2em;rem
rem単位はhtml要素のサイズの数倍でサイズを決定します.
viewpoint(vw, vh, vmin, vmax)
vw, vh
viewport width、heightの大きさに対して
ブラジャーの幅、高さの大きさを調整し、サイズを調整できます.
vmin, vmax
ビューポートの最小値、最大値
反応式Web実施
HTML
<body>
<section id="responsiveWeb">
<div class="box">
<div class="info__left">
<h2>반응형 1</h2>
</div>
<div class="info__center">
<h2>반응형 2</h2>
</div>
<div class="info__right">
<h2>반응형 3</h2>
</div>
</div>
</section>
</body>
CSS
.box {
display: flex;
margin-top: 50px;
}
[class ^= info] {
margin: 10px auto;
width: 500px;
height: 150px;
border-radius: 25px;
text-align: center;
line-height: 100px;
}
.info__left {
background-color: brown;
}
.info__center {
background-color: yellow;
}
.info__right {
background-color: green;
}
@media screen and (max-width: 1024px) {
.box {
flex-direction: column;
}
[class ^= info] {
width: 800px;
}
}
Reference
この問題について(TIL no.27-CSSインタラクティブWeb), 我々は、より多くの情報をここで見つけました https://velog.io/@playck/TIL-no.27-CSS-반응형-웹テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol