電報クローンコード②

はんのうがた

以前に作成したインデックス.htmlページを反応型にしたいです.
スマートフォンで操作しているように見えるようにします.
一番上のパッケージを作り、最大の幅を与えました.

<div class='wrap'>
   ...
</div>

.wrap {
  max-width: 500px;
  margin: auto;
}

home-barはコンテンツサイズと一致しません.

home-barはposition : fixedであるため,elment間の親子関係は中断状態にある.だからwidth : 100%親の幅ではなく、体の幅を計算します.

固定されていますが、親ボックスの幅で計算したい(反応型まで).

.wrap {
  ...
  position: relative;
}

.home-bar {
   ...
   width: 500px;
   max-width: 100%;
}

わかりませんが、以下のように設定できます.

親ボックスに対する

親ボックスの幅を最大幅に設定

固定枠の大きさを親枠の最大幅

に設定

そしてmax-width : 100%設定

画面が広くなっても狭くなってもぴったりです.

widthとheightを等しくするには?

サイズを固定すると簡単width : ★px; height : ★px;

でも反応型を作ると気まずい思いをしますwidth : 40%; height : 40%;を試してみると、設定が異なります.幅と高さの標準長さが違うからです.

解決策は次のとおりです.width : 40%; height : 0%; padding-bottom : 40%;でいいです.

しかし、そうなると、このエリア内の要素はダウンジャケットでレイアウトが歪んでしまいます.positionで再レイアウトするか、他の方法で解決します.

既存のページを反作用ページに変換します。

長さpxサイズを%に変更
置換式:(現在のpxサイズ/親要素幅pxサイズ)x 100%

min/max接頭辞

フォントサイズをremに変更
置換式:(現在のpxサイズ/16 px)rem

固定項目の位置を特定項目を基準にすると?

fixed物品は、位置基準をビューポートとする初期輪郭ブロックで配置される.しかし、もしそうなら、私は

を望んでいます.

その赤い円の位置に置くことはできません(右、下を基準に、固定20 pxごとに).単純なピクセルを計算することで行えますが、画面サイズが変化した瞬間にエラーが発生します.

解決策を考えていると、mdnドキュメントを見て、次のような文が見つかりました.
ただし、要素の祖先がtransform、perspective、filterプロパティのいずれかでない場合、その祖先はビューポートではなくコンテンツブロックとして機能します.

親コンテナに変換プロパティがある場合は、このボックスに基づいて変更できると言われています.

したがって、edit要素(円要素を編集)をhome-bar要素に入れ、home-bar無効transform : scale(1)を設定できます.
解決しました.