ヒント: 記事を作成した後、目次を自動的に生成できます。生成方法は、右側のヘルプドキュメントを参照してください。
記事ディレクトリ
1. メディアクエリ
1. わかりやすい
一般的なメディア クエリは 1280、1440、1600、1720、1920 です。法則も非常に単純で、800 + 160*n です。最小値は 800px (最小値は主にプロジェクターで使用されます)、スクリーンに特別なデザインが考慮されていない場合、最大値は 2560px です。メディア クエリについて知るために、さまざまな解像度の背景色を変更する例を使用してみましょう。
2. 簡単な例
画面幅に基づいて背景色を変更するメディアクエリの例
<style>
html{
background-color: pink;
}
@media screen and (min-width: 800px) {
html {
background-color: skyblue;
}
}
@media screen and (min-width: 1441px) and (max-width: 1920px){
html {
background-color: yellow;
}
}
@media screen and (min-width: 1921px){
html {
background-color: blue;
}
}
</style>
3. 文法
@media mediatype and|not|only (media feature) {
CSS-Code;}
- @media 書き込みを修正しました
- メディアタイプ メディアタイプ
- キーワードだけではなく
- メディア機能 メディア機能は括弧で囲む必要があります
(1) メディアタイプ(mediatype)
(2) キーワード
and: 複数のメディア機能を接続できます。これは「and」の意味と同等です。
not: 特定のメディア タイプを除外します。これは「ない」を意味し、省略できます。
のみ: 特定のメディア タイプを指定します。これは省略できます。
(3)メディア特集（メディア特集）
メディアタイプごとに固有の特性があり、メディアタイプごとにメディア特性に応じて異なる表示スタイルが設定されます。今のところ3つがわかっています。向きを含めるには括弧を追加する必要があることに注意してください。 向き
min-width、max-width：最小、最大宽
orientation:landscape、orientation:portrait：横屏、竖屏
: 縦向き (垂直画面、つまり、デバイス内のページの表示領域の高さ >= 幅)
向き: 横向き (水平画面、つまり、デバイスのページの表示領域の高さ)デバイス内のページの表示領域 <= 幅)
下の図は方向の互換性を示しています。最小値と最大値は常に存在しており、方向の互換性も非常に優れていることを説明します。安心してご使用ください。注意すべき点は、縦画面はめったに使用されないことです。デフォルトは縦画面であるため、実際にはこれを記述する必要はありません。
<style>
@media (orientation: landscape) {
body {
background-color: pink;
}
}
@media (orientation: portrait) {
body {
background-color: skyblue;
}
}
</style>
2. sass を使用してモバイル端末の手順に適応する
Sass のインストールやプロジェクトについては多くは語りません。アイデアについてだけ話します。
0.サス+レムの考え方
①ルート要素を100px、1rem=100pxとし、歪みのない比率を計算します。つまり、1rem=画面幅/デザイン画幅100pxとなります。
つまり、画面が 750px で指定されたデザイン ドラフトの幅が 750px の場合、この場合 1rem は 100px を意味し、画面が 375px で指定されたデザイン ドラフトの幅が 750px の場合、この場合 1rem は 50px を意味します。 。
②レスポンシブにしたい場合は、@mediaと連携して該当画面下のhtml font-sizeの値を計算するだけです。同時に、モバイル端末のサイズが大きいため、各ループを使用してトラバースしてフォント サイズを設定することをお勧めします。
③font-sizeの値：CSSに記載されているサイズ＝デザイン案に記載されているサイズ/100px 1rem
ボックスが100px、内部の間隔が16pxの場合、width:1rem、padding:0.16remとなります。100pxを基準に計算しているので計算は比較的簡単です。
1. Sassの各メソッド(ループ)
Sass公式ウェブサイト: https://www.sass.hk/docs/
2. 以下の各メソッド (ループ)
もちろん、公式 Web サイトの例に示されているように、less にはトラバース メソッドもあります。
2. コード
サスコード
// 计算rem的基准字体
$base-font-size: 100px;
// 设计图的基准分辨率宽度
$base-width: 750px;
// 需要适配的屏幕宽度列表
$device-widths: 240px, 320px, 360px, 375px, 384px, 411px, 414px, 424px, 480px, 540px, 640px, 720px, 750px, 768px, 800px, 980px,1024px, 1080px, 1152px,1366px, 1440px, 2160px;
// 根据不同设备的屏幕宽度，定义不同的的基准font-size
@each $current-width in $device-widths {
@media (min-width: $current-width) {
html {
font-size: $current-width * $base-font-sizee/$base-width;
}
}
}
// SassをCSSに変換する方法
@media (min-width: 240px) {
html {
font-size: 32px;
}
}
@media (min-width: 320px) {
html {
font-size: 42.66667px;
}
}
@media (min-width: 360px) {
html {
font-size: 48px;
}
}
@media (min-width: 375px) {
html {
font-size: 50px;
}
}
// ......