未分類

【css入門】レスポンシブ対応、下手な原因

公開日 2024/11/19 最終更新日 2024/11/19

結論：大きいデザインカンプはメディアクエリ刻む

コーディングカンプが1900pxのものはxl,xxlも刻む。

①「SP」コーディングする

②メディアクエリPCに丸ごとコピーする

③漏れが無いように上から順にそれぞれのサイズを変更していく。

①コーディングのプロパティリストスニペット用意（※下記）

②zeplinか①を使っていい感じの値に調整

③flex系は昔作ったレイアウトから持ってくる

昔作ったもののデメリット

・font-weightが違う

・font-sizeが違う

・画像が無い

メリット

フォントサイズがレスポンシブ調整されている

→font size検索してそろえる

display:block;

flex-direction:row;

flex-wrap:wrap;

justify-content:center;

align-items:center;

position:relative;

z-index:auto;

width:100%;

min-width:auto;

max-width:auto;

height:auto;

min-height:auto;

max-height:auto;

margin:0 0 0 0;

padding:0 0 0 0;

overflow:hidden;

border:1px solid #000;

border-radius:0 0 0 0;

background: top 0% center/ cover no-repeat url(“img/star.png”);

color : f.$font;

font: 500 16px “Noto Sans JP”, sans-serif;

line-height: normal;

letter-spacing: normal;

text-align:center;

white-space: normal;

word-break: break-all;

タグ