いくつかの問題：
- 画面サイズが変わると、ページ レイアウトのテキストも変わる可能性がありますか?
- フローレイアウトとフレックスレイアウトは主に幅レイアウトのため、高さを設定する方法
- 画面が変化したときに要素の高さと幅を比例的に拡大縮小する方法
1レムベース
rem(root em) は と同様の単位です em。違い：
em親要素のフォント サイズ に相対的ですremベースは HTML 要素のフォント サイズに相対します。- たとえば、ルート要素 (html) が font-size=12px に設定されている場合、非ルート要素が width:2rem; に設定されている場合は、24px を示すために px に置き換えます。
rem の利点:親要素のテキスト サイズは一貫していない可能性がありますが、ページ全体には HTML が 1 つしかないため、ページ全体の要素サイズを適切に制御できます。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html {
font-size: 12px;
}
div {
font-size: 10px;
width: 15rem;
height: 15rem;
background-color: purple;
}
p {
/* 1. em相对于父元素 的字体大小来说的 */
width: 10em;
height: 10em;
/* 2. rem 相对于 html元素 字体大小来说的 */
/* width: 10rem;
height: 10rem; */
background-color: pink;
/* 3.rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制 */
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
2 メディアクエリ
2.1 定義
メディアクエリ（Media Query）はCSS3の新しい構文です
- クエリを使用すると
@media、メディア タイプごとに異なるスタイルを定義できます。 @media画面サイズごとに異なるスタイルを設定可能- ブラウザのサイズをリセットすると、ブラウザの幅と高さに応じてページも再レンダリングされます。
- 現在、メディア クエリは多くの Apple 携帯電話、Android 携帯電話、タブレット、その他のデバイスで使用されています。
2.2 文法仕様
@media mediatype and|not|only (media feature) {
CSS3-Code;
}- から
@media始まる - mediatypeはメディアタイプです
- キーワード
and、not、only media featureメディアのプロパティ。かっこが必要です
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 这句话的意思就是： 在我们屏幕上 并且 最大的宽度是 800像素 设置我们想要的样式 */
/* max-width 小于等于800 */
/* 媒体查询可以根据不同的屏幕尺寸在改变不同的样式 */
@media screen and (max-width: 800px) {
body {
background-color: pink;
}
}
@media screen and (max-width: 500px) {
body {
background-color: purple;
}
}
</style>
</head>
上記のコードは、画面上のページが 500px ～ 800px であり、ページの背景色がピンクで表示されていることを意味します。ページが 500px 未満で、背景色が紫で表示されます
2.3 メディアタイプクエリタイプ
さまざまな端末デバイスをメディア タイプと呼ばれるさまざまなタイプに分割する
| 価値 | 説明 |
|---|---|
all |
すべてのデバイス向け |
print |
プリンターおよび印刷ブラウザーの場合 |
screen |
パソコン画面、タブレット、スマートフォンなどに。 |
2.4 キーワード and not only
キーワードは、メディア クエリの条件としてメディア タイプ属性を連結します。
and: 複数のタイプまたは複数のメディア タイプを結合して、メディア クエリの条件にすることができます。not: 特定のメディア タイプを除外します。これは「non」に相当し、省略できます。only: 特定のメディア タイプを指定します (省略可能)
2.5 メディアの機能
メディアタイプごとに固有の特性があり、メディアタイプごとにメディア特性に応じて異なる表示スタイルが設定されます。当面は 3 つについて知っておいてください。括弧内に含める必要があることに注意してください。
| 価値 | 説明 |
|---|---|
width |
出力デバイスでのページの表示領域の幅を定義します |
min-width |
出力デバイスのページの最小表示領域幅を定義します。 |
max-width |
出力デバイスのページの最大表示領域幅を定義します。 |
メディア クエリの価値: メディア クエリは、さまざまな画面サイズに応じてさまざまなスタイルを変更できます。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 1. 媒体查询一般按照从大到小或者 从小到大的顺序来 */
/* 2. 小于540px 页面的背景颜色变为蓝色 */
@media screen and (max-width: 539px) {
body {
background-color: blue;
}
}
/* 3. 540 ~ 970 我们的页面颜色改为 绿色 */
/* @media screen and (min-width: 540px) and (max-width: 969px) {
body {
background-color: green;
}
} */
@media screen and (min-width: 540px) {
body {
background-color: green;
}
}
/* 4. 大于等于970 我们页面的颜色改为 红色 */
@media screen and (min-width: 970px) {
body {
background-color: red;
}
}
/* 5. screen 还有 and 必须带上不能省略的 */
/* 6. 我们的数字后面必须跟单位 970px 这个 px 不能省略的 */
</style>
</head>
2.6 要素の動的なサイズ変更を実現するメディアクエリ + rem
remユニットは行き来しhtml、remページ要素を使用してさまざまなサイズを設定できます- メディアクエリは、さまざまなデバイスの幅に応じてスタイルを変更できます
- Media query + rem は 、さまざまなデバイス幅を実現し、ページ要素のサイズの動的な変更を実現できます
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
/* html {
font-size: 100px;
} */
/* 从小到大的顺序 */
@media screen and (min-width: 320px) {
html {
font-size: 50px;
}
}
@media screen and (min-width: 640px) {
html {
font-size: 100px;
}
}
.top {
height: 1rem;
font-size: .5rem;
background-color: green;
color: #fff;
text-align: center;
line-height: 1rem;
}
</style>
</head>
<body>
<div class="top">购物车</div>
</body>
上記のコードは、画面サイズが 320px 未満、div サイズが 0.5*50 = 25px、画面サイズが 320px より大きく 640px 未満、div サイズが 0.5 * 100 = 50px を意味します。
2.7 リソースのインポート
- スタイルが多い場合、メディアごとに異なるスタイルシート（スタイルシート）を使用できます
- 原則として、リンク内のデバイスのサイズを直接判断し、さまざまな CSS ファイルを参照します。
/* 当屏幕大于 640px，一行显示两个 */
/* 小于 640px 的，一行显示一个 */
<link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">
リソースをインポートすると、画面サイズごとに異なる CSS ファイルが呼び出されます。
3 つ少ない基本
CSS は非手続き型言語であり、変数、関数、SCOPE (スコープ) などの概念がありません。
- CSS は一見非論理的に見えるコードを大量に記述する必要があり、CSS の冗長性は比較的高い
- メンテナンスや拡張が不便で、再利用には向かない
- CSS には十分な計算能力がありません
- フロントエンド開発エンジニア以外の場合、CSS 作成の経験が不足しているため、よく整理されて保守しやすい CSS コード プロジェクトを作成することが難しいことがよくあります。
3.1less の概要
- Less (Leaner Style Sheets の略語) は CSS 拡張言語であり、CSS プリプロセッサとも呼ばれます
- CSS の拡張形式として、CSS の機能を削減するのではなく、既存の CSS 構文に基づいて CSS に手続き型言語機能を追加します。
- CSSの構文をベースに、変数、Mixin（ミックスイン）、演算、関数などの機能を導入し、CSSの記述を大幅に簡素化し、CSSのメンテナンスコストを削減します。
中国語が少ない URL: http://lesscss.cn
一般的な CSS プリプロセッサ: Sass、Less、Stylus
Essence: Less は、CSS の動的機能を拡張する CSS 前処理言語です。
3.2 使用量を減らす
まず、接尾辞lessを持つ新しいファイルを作成し、このlessファイルにlessステートメントを書き込みます。この段階で学ぶこと:
- 変動が少ない
- コンパイルの軽減
- ネストが少なくなる
- 操作が少なくなる
変動が少ない
変数とは、固定値がなく、CSS内のいくつかの色や値がよく使用されることを意味します
@变量名:值;例
// 定义一个粉色变量
@color: pink;
@font14: 14px;
body {
background-color: @color;
}
div {
background-color: @color;
font-size: @font14;
}変数の命名規則:
@プレフィックスが必要です- 特殊文字を含めることはできません
- 数字で始めることはできません（プレフィックス
@部分を削除してください） - 大文字と小文字を区別
コンパイルを減らす
基本的に、Less にはカスタム文法とパーサーのセットが含まれています。ユーザーはこれらの文法に基づいて独自のスタイル ルールを定義します。これらのルールは最終的にパーサーによってコンパイルおよび生成され、対応する CSS ファイルが生成されます。
したがって、html ページを使用できるように、less ファイルを css ファイルにコンパイルする必要があります。
VS Code では、Easy Less プラグインを使用して CSS ファイルをリアルタイムでコンパイルおよび生成し、インポートします。
ネストが少なくなる
HTML 要素間のネストと同様に、セレクターも Less にネストできます。
#header {
.logo {
width: 100px;
}
}疑似クラス、交差セレクター、および疑似要素セレクターをlessで記述するには、内部セレクターの前に&を追加します。
- 先行する内部セレクターがない 場合
&、それは親セレクターの子孫として解析されます。 - 存在する場合
&、親要素自体、または親要素の擬似クラスに解決されます。
a:hover {
color: red;
}ネストの少ない書き込み:
a {
&:hover {
color: red;
}
}操作が少なくなる
任意の数値、色、変数を演算に参加させることができ、Less は加算 ( +)、減算 ( -)、乗算 ( *)、および除算 ( /) の算術演算を提供します。
@width: 10px + 5;
div {
border: @width solid red;
}
/* 生成的css */
div {
border: 15px solid red;
}
/* Less甚至还可以这样 */
width: (@width + 5) * 2;
- 除算演算の場合は括弧が必要です
- 演算子の左側と右側にはスペースが必要です
- オペランドの 1 つだけが単位を持つ場合、最終結果はこの単位になります。
- 複数のユニットがある場合は、最初のユニットが優先されます
4レム適応スキーム
- デバイスのサイズが変化したときに、比例的に適応できない一部の要素を現在のデバイスに比例的に適応させます。
- メディア クエリを使用して、さまざまなデバイスに応じて HTML のフォント サイズを比例的に設定し、ページ要素のサイズ単位として rem を使用します。HTML のフォント サイズが変更されると、要素のサイズも変更され、比例的な適応が実現されます。スケーリング
実際の開発適応スキーム
- デザイン案とデバイス幅の比率に応じて、HTMLルートタグのフォントサイズを動的に計算して設定します（メディアクエリ）
- CSSではデザイン案の要素の幅、高さ、相対位置などの値を同じ比率に従ってレム単位の値に変換します。
技術的解決策 1
一般的なデバイスのサイズ:
| 装置 | 一般的な幅 |
|---|---|
| iphone45 | 640ピクセル |
| iphone678 | 750ピクセル |
| アンドロイド | 一般的な320px、360px、375px、384px、400px、720px。ほとんどの 4.7 ～ 5 インチ Android デバイスでは 720px |
HTMLタグのフォントサイズを動的に設定する
- デザイン案が750pxだとします
- 画面全体を 15 等分に分割するとします (分割基準は 20 等分または 10 等分になります)。
- 各コピーは HTML フォント サイズとして使用されます。ここでは 50px です。
- 320 ピクセルのデバイスでは、フォント サイズは 320/15、つまり 21.33 ピクセルになります。
- ページ要素のサイズをさまざまな HTML フォント サイズで割ると、それらの比率が同じであることがわかります。
- たとえば、標準設計ドラフトとして 750 を使用します。
- 100*100 ピクセルのページ要素は 750 画面では 100 / 50、レムに変換すると 2rem * 2 rem、比率は 1 対 1
- 320 画面では、HTML フォント サイズは 21.33、2rem = 42.66px、この時点で幅と高さは両方とも 42.66 ですが、幅と高さの比率は 1:1 のままです。
- ただし、さまざまな画面でページ要素ボックスの比例スケーリングの効果を実現することができました。
要素サイズ値の方法
- まず、750 などの標準サイズのセットを選択します。
- htmlの文字サイズは画面サイズを分割数 で 割ったものになります 。この時点で、異なる画面で取得されるテキストのサイズが異なることがわかります。
- ページ要素の rem 値 = 750 ピクセルでのページ要素の px 値 / html のテキスト サイズ