レムレイアウト
目的：テキストとページレイアウトの比と画面サイズの変更、要素の高さと幅のスケーリングを変更します。
レム・ユニット
- REM（ルートEM）は、EMと同様の相対単位であり、EMは、親要素のフォントサイズ。違いは、REM参照があることであるのHTML要素に相対フォントサイズ。
- たとえば、ルート要素（HTML）に配置されたフォントサイズ= 12ピクセル;非ルート要素はセット幅：2rem; PXはその表現は24pxで置き換えられています。
- REMの利点：テキストの親要素のサイズは一貫性のないかもしれないが、ページ全体がうまくページ全体の要素の大きさを制御するために、HTMLのみです。テキストサイズでHTMLを修正することにより、テキストのページのすべての要素の全体的な制御のサイズにすることができます。
報道関係お問い合わせ先
メディアクエリ（メディアクエリ）は、新しいCSS3の構文です。
- @mediaクエリを使用して、あなたは異なるメディアタイプごとに異なるスタイルを定義することができます。
- @mediaは、異なる画面サイズごとに異なるスタイルを設定することができます。
- あなたは、プロセスのブラウザのサイズをリセットすると、ページがブラウザの幅と高さに応じてページを再レンダリングされます。
- 現在、アップルの携帯電話、Android携帯電話、タブレット、その他のデバイスの多くは、マルチメディアのために使用されています。
構文仕様
@media mediatype and|not|only (media feature){
CSS-Code;
}- クエリの種類をMEDIATYPE
すべて：すべてのデバイスがために
印刷：プリンタや印刷プレビュー用
などのコンピュータ画面、タブレットPC、スマートフォン、：画面 - キーワード：メディアタイプ以上のメディア特性はメディアクエリの条件として一緒に接続されています。
- そして：メディア特性の複数の、互いに「および」手段に相当を接続することができます。
- ない：メディアタイプ、「非」との同等除くと、省略することができます。
- のみ：特定のメディアタイプを指定するには、それは省略することができます。
- メディア特性：各メディアタイプのためには、特にそれらの異なる特性、メディア特性の異なるメディアタイプに応じて、プレゼンテーションの異なるスタイルです。
例：
@media screen and|not|only (max-width:800px){
CSS-Code;
}資源の導入
- スタイルの範囲を比較すると、我々は、異なるメディアごとに異なるスタイルシート（スタイルシート）を使用することができます。
- 原理：デバイスのサイズを決定する直接リンクであり、その後、別のCSSファイルを参照します。
- 構文仕様：
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">- 裁判官は小から大までメディアクエリをお勧めします
以下の基礎
CSSのメンテナンス欠点
- CSSは、非手続き型言語、ない変数、関数、SCOPE（スコープ）の概念です。
- 一見非論理的な多くのコードを書くためのCSSの必要性は、CSSの冗長性は比較的高いです。
- 便利なメンテナンスや拡張は、再利用に資するものです。
- CSSには良い計算能力ではありません。
- 非フロントエンドの開発エンジニアはよく組織と簡単に保守CSSコードプロジェクトを記述することは困難であることが多いので、経験の書き込みやCSSの不足のため、懸念しています。
以下はじめに
少ないが（スリムスタイルシートの略語）CSSは言語の拡張である、CSSプリプロセッサとなっています。
- CSSの拡張の形として、それはCSS機能を減らすが、手続き型言語のCSSプロパティを追加するための既存のCSSの構文ではありません。
- これは、上記のCSSの構文に基づき、変数の導入である、（混合）、だけでなく、動作機能およびその他の機能ミックスインは、大幅にその名プットそれ、少ないよう、CSS、CSSの準備と減少メンテナンスコストを簡素化それは私たちがより少ないコードでより多くを行うことができます。
以下の変数
変数は、固定された値は、変更することができるされていません
変数名@：値;
変数の命名規則
1 @付ける必要があります
。2.特殊文字が含まれていない
3は、数字で始めることはできません
4.大文字と小文字を区別し
例：
@color: pink;
@font14: 14px;
body{
background-color: @color;
}
div{
color: @color;
}
a{
font-size: @font14;
}以下のコンパイル
私たちは、私たちが使用できるように、CSSファイル、HTMLページをコンパイル少ないRAWファイルになる必要があります。
- 簡単LESSファイルでvscodeプラグ付きの少ないcssファイルとしてコンパイルするために使用。
- このプラグインは自動的に保存対応するCSSファイルを生成する以下のファイルを書き込みます。
以下のネスト
例（ヘッダ> A）。
.header{
width: 200px;
height: 100px;
background-color: blue;
a{
color: yellow;
}
}あなたが満たしている場合（交差点|擬似クラス|擬似要素セレクタ）
- いいえアンパサンドフロント内層セレクタは、解析された親セレクタ子孫です。
- そこアンパサンド場合は、解析された擬似クラスの親または要素自体の親要素です。
a{
&:hover{
color: yellowgreen;
}
&::before{
content: "";
}
}少ない操作
任意の数字、色や変数が操作に関与することができます。以下はプラス（+）が設けられ、減算（ - ）、乗算（*）、演算に加えて、（/）。
注意：
- 乗算記号（*）、除算（/）言葉遣い
- 中級オペレータは5 + 1ピクセル程度のスペースで区切らなければなりません
- 計算のために、単位値の異なるユニットの2つの値の間の計算結果は、の値をとります
- 2つの値の間の唯一の値の単位が存在する場合、操作の結果は、単位を取ります
@border: 5px + 5;
div{
width: 200px - 50;
height: 200px * 2;
border: 10rem / @border solid red;
background-color: #666 - #222;
}レム適応方式
適応対象
- いくつかの要素は、デバイスのサイズが変更された時、現在の機器の比例適応に、幾何学的な適応をすることはできません。
- セットHTMLプロポーショナルフォントサイズに使用メディアクエリは、適応の幾何学的なスケーリングを実現するように、デバイスに応じて、html要素のサイズ変更は、フォントサイズが変更されるときに、ページ要素が対策のレムユニットを行います。
レム実際の開発適応方式
- スケールデザインドラフト装置幅を動的に計算及びフォントサイズのルートHTMLタグのサイズを設定し、（メディアクエリ）
- CSS、値REMの等価単位の換算比率に応じてドラフト設計要素の幅、高さ、および相対位置値、;
レム適応主流の技術プログラム
- 少ない+メディアお問い合わせ+レム
- flexible.js +レム（推奨）
HTMLタグを動的には、フォントサイズの大きさに設定
①設計案が想定される750px
②我々はスクリーンが（異なる規格が10に等しいとすることができるかもしれ分割部20）を15等分に分割仮定
HTMLとして③各フォントサイズここでは50px
④その後、デバイス320PX、フォントサイズ15分の320は21.33pxとき
でしょう異なるフォントサイズで割ったページ要素のサイズと⑤自分のHTMLや同じ割合
⑥など、当社の750標準的な設計案として、
⑦750で100×100ピクセルの画面のページ要素は、比が1：1にレム2rem * 2 REMに変換さ100/50である
画面⑧320、HTMLフォントサイズ21.33 2rem = 42.66pxケース幅としかし高は1または1以上の42.66幅と高さの比である
⑨が、ページボックスのスケーリング効果に異なる画面要素の下で達成することができました
value要素サイズ法は、
①標準的な画面サイズ（750）のセットから選択された
フォントサイズ=画面サイズ②HTML /分割部
（PX）/ HTMLフォントページ要素値（750px下）③ページ要素値= REM -sizeフォントサイズ
REM値ページまたはページ要素=エレメント値（PX）/（画面幅/分割部）