モバイルインターフェースとレスポンシブインターフェース
- px、em、rem
- w3c ボックス モデルと ie ボックス モデル
- モバイルスタイル クリア
- ビューポート設定
- メディアクエリ
- モバイルでの一般的なレイアウト
-
- レスポンシブレイアウト
- フロー レイアウト
- フレックスレイアウト
- グリッドレイアウト
- レム レイアウト
px、em、rem
- 1 ÷ 親要素のフォントサイズ × 変換するピクセル値 = em
- Chrome ブラウザのデフォルトのフォント サイズは 16px です
ピクセル
1pxはピクセルです
エム
Em は、親ノードのフォント サイズの単位に相対的です。
<html>
<head>
<style>
.container{
font-size:10px;
}
span{
font-size:1.5em;
}
</style>
</head>
<body>
<div class="container">
<span>helloworld</span>
<!-- 15px -->
</div>
</body>
</html>
レム
rem はルートノード <html> のフォントサイズに対する相対単位です
w3c ボックス モデルと ie ボックス モデル
box-sizing: コンテンツボックス | ボーダーボックス;
w3cボックスモデル
高さと幅は、コンテンツの実際の高さと幅です。パディングとボーダーは除外されます
つまり、幅=コンテンツ
IEボックスモデル
高さと幅にはパディングとボーダーが含まれます
即幅=コンテンツ+パディング+ボーダー
モバイルスタイル クリア
モバイル端末で背景をクリックするスタイルを削除
a{
-webkit-tap-highlight-color:transparent;
}
iOS スタイルを削除する
input,button{
-webkit-appearance:none;
}
長押しポップアップメニューを無効にする
img,a{
-webkit-callout:none;
}
ビューポート設定
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
| 分野 | 説明 |
|---|---|
| width=デバイス幅 | ビューポートの幅をデバイスの幅と同じに設定 |
| 初期スケール | 初期ズーム係数 |
| 最大スケール | 最大ズーム倍率 |
| ユーザーがスケーリング可能 | ユーザーにズームを許可するかどうか |
メディアクエリ
機器の種類
- 全て
- 画面
- 印刷する
- スクリーン リーダーの読み上げ
文法
@media文法監視装置
@media not|only mediatype and (expressions){
//css代码...
}
@import 構文監視デバイス
@import url("./screen.css") screen;
スタイルラベル監視装置
<style media="mediatype and not|only (expressions)">
</style>
リンクタグ監視装置
<link rel="stylesheet" href="file.css" media="mediatype and not|only (expressions)">
モバイルでの一般的なレイアウト
レスポンシブレイアウト
Bootstrap のグリッド クラスを実装します。
グリッド構成
| <768px | ≥768px | ≥992px | ≥1200px | |
|---|---|---|---|---|
| 最大コンテナ幅 | 自動 | 750px | 970px | 1170px |
| 最大列幅 | 自動 | 60px | 78ピクセル | 95px |
| ギャップ幅 | 30px | 30px | 30px | 30px |
サンプルコード
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.container{
margin: 0 auto;
height: auto;
}
.fuild-container{
width: 100%;
height: auto;
}
.fuild-container .row{
padding: 0;
}
.row{
width: 100%;
height: auto;
padding: 0 15px;
box-sizing: border-box;
}
.row::after{
clear: both;
display: block;
content: "";
}
</style>
<style>
@media screen and (min-width:1200px){
.container{
width: 1170px;
}
.col-lg-12,.col-lg-11,.col-lg-10,.col-lg-9,.col-lg-8,.col-lg-7,.col-lg-6,.col-lg-5,.col-lg-4,.col-lg-3,.col-lg-2,.col-lg-1{
float: left;
height: auto;
}
.col-lg-12{
width: calc(100% / 12 * 12);}
.col-lg-11{
width: calc(100% / 12 * 11);}
.col-lg-10{
width: calc(100% / 12 * 10);}
.col-lg-9{
width: calc(100% / 12 * 9);}
.col-lg-8{
width: calc(100% / 12 * 8);}
.col-lg-7{
width: calc(100% / 12 * 7);}
.col-lg-6{
width: calc(100% / 12 * 6);}
.col-lg-5{
width: calc(100% / 12 * 5);}
.col-lg-4{
width: calc(100% / 12 * 4);}
.col-lg-3{
width: calc(100% / 12 * 3);}
.col-lg-2{
width: calc(100% / 12 * 2);}
.col-lg-1{
width: calc(100% / 12 * 1);}
.lg-hide{
display: none;}
}
@media screen and (min-width:992px) and (max-width:1200px){
.container{
width: 970px;
}
.col-md-12,.col-md-11,.col-md-10,.col-md-9,.col-md-8,.col-md-7,.col-md-6,.col-md-5,.col-md-4,.col-md-3,.col-md-2,.col-md-1{
float: left;
height: auto;
}
.col-md-12{
width: calc(100% / 12 * 12);}
.col-md-11{
width: calc(100% / 12 * 11);}
.col-md-10{
width: calc(100% / 12 * 10);}
.col-md-9{
width: calc(100% / 12 * 9);}
.col-md-8{
width: calc(100% / 12 * 8);}
.col-md-7{
width: calc(100% / 12 * 7);}
.col-md-6{
width: calc(100% / 12 * 6);}
.col-md-5{
width: calc(100% / 12 * 5);}
.col-md-4{
width: calc(100% / 12 * 4);}
.col-md-3{
width: calc(100% / 12 * 3);}
.col-md-2{
width: calc(100% / 12 * 2);}
.col-md-1{
width: calc(100% / 12 * 1);}
.md-hide{
display: none;}
}
@media screen and (min-width:768px) and (max-width:992px){
.container{
width: 750px;
}
.col-sm-12,.col-sm-11,.col-sm-10,.col-sm-9,.col-sm-8,.col-sm-7,.col-sm-6,.col-sm-5,.col-sm-4,.col-sm-3,.col-sm-2,.col-sm-1{
float: left;
height: auto;
}
.col-sm-12{
width: calc(100% / 12 * 12);}
.col-sm-11{
width: calc(100% / 12 * 11);}
.col-sm-10{
width: calc(100% / 12 * 10);}
.col-sm-9{
width: calc(100% / 12 * 9);}
.col-sm-8{
width: calc(100% / 12 * 8);}
.col-sm-7{
width: calc(100% / 12 * 7);}
.col-sm-6{
width: calc(100% / 12 * 6);}
.col-sm-5{
width: calc(100% / 12 * 5);}
.col-sm-4{
width: calc(100% / 12 * 4);}
.col-sm-3{
width: calc(100% / 12 * 3);}
.col-sm-2{
width: calc(100% / 12 * 2);}
.col-sm-1{
width: calc(100% / 12 * 1);}
.sm-hide{
display: none;}
}
@media screen and (max-width:768px){
.container{
width: auto;
}
.col-xs-12,.col-xs-11,.col-xs-10,.col-xs-9,.col-xs-8,.col-xs-7,.col-xs-6,.col-xs-5,.col-xs-4,.col-xs-3,.col-xs-2,.col-xs-1{
float: left;
height: auto;
}
.col-xs-12{
width: calc(100% / 12 * 12);}
.col-xs-11{
width: calc(100% / 12 * 11);}
.col-xs-10{
width: calc(100% / 12 * 10);}
.col-xs-9{
width: calc(100% / 12 * 9);}
.col-xs-8{
width: calc(100% / 12 * 8);}
.col-xs-7{
width: calc(100% / 12 * 7);}
.col-xs-6{
width: calc(100% / 12 * 6);}
.col-xs-5{
width: calc(100% / 12 * 5);}
.col-xs-4{
width: calc(100% / 12 * 4);}
.col-xs-3{
width: calc(100% / 12 * 3);}
.col-xs-2{
width: calc(100% / 12 * 2);}
.col-xs-1{
width: calc(100% / 12 * 1);}
.xs-hide{
display: none;}
.row{
padding: 0;}
}
</style>
</head>
<body>
<div class="fuild-container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3" style="background-color: red;">1</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3" style="background-color: blue;">2</div>
</div>
</div>
</body>
</html>
フロー レイアウト
親コンテナーの幅を 100% に設定して、max-width と min-width を使用してスケーリングします。
フレックスレイアウト
軸のコンセプトとフレックス方向
主軸交差軸
デフォルト: 横軸は主軸、縦軸は横軸です。
フレックス方向: 行 | コラム | 行逆 | 列反転
行：横軸が主軸、縦軸が横軸
列：縦軸が主軸、横軸が横軸
row-reverse | column-reverse: 通常のルールと同様ですが、内側のボックスが逆に配置されます
デフォルトでは、フレックス レイアウトは子要素のサイズを変更します
交差軸方向の単位が定義されていない場合、交差軸方向の要素の長さは 100% に引き伸ばされます。
親要素のサイズが子要素のサイズの合計よりも小さい場合、子要素は横軸方向にオーバーフローします。
フレックスラップとフレックスフロー
flex-wrap: ラップ | ノーラップ
この属性は、主軸がいっぱいになったときに要素を折り返すかどうかを設定するために使用されます
フレックス フロー: 行ラップ
このプロパティは、flex-directrion flex-wrap プロパティの省略形です。
正当化コンテンツ
このプロパティは、主軸上の子要素の配置を設定するために使用されます
| 属性名 | アラインメント |
|---|---|
| フレックススタート | 主軸の開始位置から並べる |
| フレックスエンド | 主軸の終了位置から並べる |
| 中心 | すべての要素は、主軸の中心に順番に配置されます |
| スペースアラウンド | すべての要素は離れていますが、境界線から最初と最後の要素までの距離は、中央の要素間の距離の 1/2 です。 |
| スペース均等 | すべての要素が間隔をあけて配置され、主軸方向のすべてのギャップが等しい |
| スペース間の | 左端と右端の要素は左右の境界線に収まり、中央の要素は等間隔に配置されます |
align-items & align-content
align-items および align-content プロパティは、交差軸上の要素の配置を制御するために使用されます
| align-items 属性名 | アラインメント |
|---|---|
| フレックススタート | 十字軸の開始位置から並べる |
| フレックスエンド | 交差軸の終了位置から並べる |
| ベースライン | 子要素のベースラインに合わせる |
| 中心 | コンテナの中央に |
| ストレッチ | 要素はコンテナに合わせて引き伸ばされます |
| align-content 属性名 | アラインメント |
|---|---|
| フレックススタート | 十字軸の開始位置から並べる |
| フレックスエンド | 交差軸の終了位置から並べる |
| 中心 | コンテナの中央に |
| ストレッチ | 要素はコンテナに合わせて引き伸ばされます |
| スペースアラウンド | すべての要素は離れていますが、境界線から最初と最後の要素までの距離は、中央の要素間の距離の 1/2 です。 |
| スペース均等 | すべての要素が間隔をあけて配置され、主軸方向のすべてのギャップが等しい |
| スペース間の | 左端と右端の要素は左右の境界線に収まり、中央の要素は等間隔に配置されます |
align-items はすべてのフレックス コンテナーに適用されます
align-content は 1 行にのみ適用されます。複数の要素がある場合、align-content を設定すると、justify-content と同様に、すべての要素が全体として整列されます
自己整列
align-items や align-content とは異なり、align-self は操作オブジェクトのみを整列しますが、前者の 2 つは行または列全体を整列します。
flex-grow & flex-shrink & flex-basis & flex & order
flex-grow プロパティを使用して、要素の残りのスペースを主軸に割り当てます。デフォルト値は 0 です。
flex-grow の値を、flex-grow が設定されている要素の flex-grow 値の合計 m である n に設定します。次に、flex-grow 属性が設定された要素 (flex-grow≠0) が、残りのスペースの幅の n/m 倍に追加されます。
すべてのフレックスアイテムの flex-grow 属性値の合計が 1 未満の場合、m は 1
flex-shrink 属性は、子要素の幅の合計が親要素の主軸の幅よりも大きく、デフォルト値が 1 の場合に縮小率を設定するために使用されます。
flex-shrink は要素の収縮係数を設定するために使用され、各要素の収縮重量は flex-shrink*幅/総重量 です。
実際の収縮幅=(フレックス収縮*幅/総重量)*幅
すべての flex アイテムの flex-shrink 属性値の合計が 1 未満の場合、オーバーフロー スペースの一部のみが縮小されます。つまり、実際の縮小幅 = オーバーフロー スペース幅 * flex-shrink の合計 * 重量
flex-basis プロパティは、要素が主軸上で占めるスペースの量を設定します
flex-basis は特定の css サイズ値に設定するか、親要素のパーセンテージを占めるように設定できます。デフォルト値は auto です
flex-basis 値は min-width と max-width の影響を受けます
flex プロパティは、flex-grow、flex-shrink、および flex-basis プロパティの省略形です。
フレックス:1 => フレックス:1 1 0%
order 属性は弾性要素の配置順序を決定し、数値が小さいほど前面が高くなります
グリッドレイアウト
グリッド コンテナを作成する
表示: グリッド | インライングリッド
コンテナーをブロックレベル/インライン グリッド レイアウト要素として指定する属性
grid-template-rows & grid-template-columns
この要素は、グリッド レイアウトの行と列を定義するために使用されます
display:flex;
width:300px;
height:300px;
grid-template-rows:100px 100px 100px;
grid-template-columns:100px 100px 100px;
//将会创建一个九宫格布局
絶対単位に加えて、パーセンテージも使用できます
自動
この属性は auto キーワードを受け取ることができ、ブラウザによって長さが決定されることを示します (自動適応)
width:500px;height:300px;display:grid;grid-template-columns:100px auto 100px;//此操作将会创建一个三列的，两侧为100px中间为200px的栅格布局
繰り返す（）
repeat() 関数は、繰り返しを単純化する値を定義できます
grid-template-columns:100px 100px 100px 100px;//简化后grid-template-columns:repeat(4,100px);
自動入力
セルのサイズが固定されていて、コンテナーのサイズが固定されていない場合があります。各行/列にできるだけ多くの要素を保持する場合は、入力に auto-fill キーワードを使用できます。コンテナーがそれ以上の列を保持できなくなるまで自動入力します
grid-template-columns:repeat(auto-fill,100px);
フランス
fr キーワードは、セルの比例関係を示すために使用されます。2 つの列の幅が 1fr と 2fr の場合、後者は前者の 2 倍の幅になります。
grid-template-columns:1fr 2fr 3fr;//将创建一个列宽度比例为1:2:3的栅格布局
最小最大()
minmax() 関数は長さの範囲を生成し、長さがこの範囲内にあることを示します。
grid-template-columns:minmax(100px,200px) minmax(100px,200px);
枠線名
grid-template-columns および grid-template-rows 属性では、角括弧を使用して、後で参照できるように各グリッド ラインの名前を指定できます。
grid-template-columns:[c1] 100px [c2] 100px [c3] auto [c4];
各グリッドラインには複数の名前を付けることができます
grid-template-columns:[c1-start] 100px [c1-end c2-start] 100px [c2-end];
repeat() 関数は、グリッド線に名前を付けることもできます
grid-template-columns:repeat(3,[c-start] 1fr [c-end]);grid-column:c-start 1 / c-end 3;
グリッド テンプレート
grid-template 属性は、 grid-template-rows および grid-template-columns 属性の簡略属性です。
grid-template:repeat(3,100px) / repeat(2,10px);
//等价于
grid-template-rows:repeat(3,100px);
grid-template-columns:repeat(2,100px);
行ギャップ & 列ギャップ & ギャップ
row-gap および column-gap プロパティは、行と列の間の間隔を設定するために使用されます
単位が fr のグリッドを使用する場合、子要素が親要素からはみ出さないように、間隔を設定した後にグリッドのサイズが自動的に調整されます。
px などの絶対単位を使用する場合、間隔を設定した後に子要素の幅の合計が親コンテナーの幅を超えると、子要素の一部が親コンテナーからはみ出します。
ギャップ属性は、row-gap および column-gap 属性の省略形の属性です。
gap: <row-gap> <column-gap>;
ギャップ属性が 2 番目の値を省略した場合、2 番目の値はデフォルトで最初の値と等しくなります。
grid-column-start & grid-column-end & grid-row-start & grid-row-end
この属性は、子要素の 4 つの境界線を定義するために使用され、それぞれにグリッド線が配置されます。
grid-column-start属性: 左の境界線が配置されている垂直グリッド線grid-column-end属性: 右の境界線が配置されている垂直グリッド線grid-row-start属性: 上部境界線が位置する水平グリッド線grid-row-end属性: 下の境界線が配置されている水平グリッド線
省略形の属性 grid-column & grid-row
grid-column および grid-row 属性は、上記の属性の簡略属性です。
grid-column-start:2;grid-column-end:3;//等价于grid-column:2 / 3;
省略形プロパティの span キーワード
簡略属性 grid-column および grid-row 属性では、span キーワードを使用して、またがるグリッドの数を指定できます。
grid-column-start:1;grid-column-end:4;//等价于grid-column:1 / 4;//等价于grid-column:span 4;//等价于grid-column-end:span 4;
上記の例では、属性の最初のパラメーターは無視され、2 番目のパラメーターはスパン 4 として直接定義されています。これは、デフォルトで最初の行からスパンされることを意味します。
grid-*-end 属性のみを指定し、span キーワードをスパニングに使用する場合、状況は grid-* キーワードと同じです。
grid-column-start:2;grid-column-end:4;//等价于grid-column:2 / 4;//等价于grid-column:2 / span ;
この例では、最初の行のシリアル番号が明確に指定されており、ルールに従って交差が実行されます。
現在の行の残りのグリッドがスパンするのに十分でない場合、ブラウザは自動的にグリッドを次の行に移動します
グリッドエリア
この属性はアイテムが配置される領域を指定し、 grid-template-areas 属性で定義された名前を使用できます。
.container{
display:grid; grid-template-areas:'a b c' 'd e f';}.item{
grid-area:e;}
項目の位置を直接指定して、 grid-column-start grid-column-end grid-row-start grid-row-end 属性の省略形を組み合わせて使用できます
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
グリッド テンプレート エリア
grid-template-areas プロパティは、領域を定義するために使用されます
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a b c'
'd e f'
'g h i';
上記のコードは、最初に 9 つのセルを分割し、9 つのセルに対応する 9 つの領域として名前を付けaますi。
複数のセルを 1 つの領域にマージする方法は次のとおりです。
grid-template-areas: 'a a a'
'b b b'
'c c c';
上記のコードは、9 つのセルをa, b,cの 3 つの領域に分割します。
一部の領域を活用する必要がない場合は、.「ドット」 ( ) で表されます。
grid-template-areas: 'a . c'
'd . f'
'g . i';
上記のコードでは、中央の列はドットであり、セルが使用されていないか、セルがどの領域にも属していないことを示しています。
領域の名前はグリッド線に影響することに注意してください。各領域の開始グリッド ラインは自動的に という名前になり
区域名-start、終了グリッド ラインは自動的に という名前になります区域名-end。たとえば、領域の名前が の場合
header、開始位置の水平および垂直グリッド線は と呼ばれheader-start、終了位置の水平および垂直グリッド線は と呼ばれますheader-end。
justify-content & align-content & place-content
justify-content 属性は、コンテナー内のコンテンツ全体の水平位置を設定するために使用され、align-content 属性は、コンテナー内のコンテンツ全体の垂直位置を設定するために使用されます。
justify-content: start | end | center | stretch | space-around | space-evenly | space-between;align-content: start | end | center | stretch | space-around | space-evenly | space-between;
place-content プロパティは、justify-content および align-content プロパティの省略形です。
place-content:<align-content> <justify-content>;
2 番目の値を省略すると、ブラウザーは 2 番目の値が最初の値と等しいと見なします。
justify-items & align-items & place-items
justify-items 属性はセル コンテンツの水平位置を設定するために使用され、align-items 属性はセル コンテンツの垂直位置を設定するために使用されます。
justify-items: start | end | center | stretch;align-items: start | end | center | stretch;
place-items プロパティは、justify-items および align-items プロパティの省略形です。
place-items:<align-items> <justify-items>;
2 番目の値を省略すると、ブラウザーは 2 番目の値が最初の値と等しいと見なします。
グリッド自動フロー
grid-auto-flow プロパティは、自動レイアウト アルゴリズムの動作を制御し、グリッド内で自動レイアウトされる要素がどのように配置されるかを正確に指定します。デフォルトの順序は「最初の行、次に列」です。つまり、最初の行が最初に入力され、次に 2 番目の行が開始されます。デフォルト値は行です
grid-auto-flow: row | column | row dense | column dense;
- 行のデフォルト
- 列の垂直配置
- 高密度充填
一部の要素がラップしてギャップを作成する場合、dense を使用してサイズを満たす要素でギャップを埋め、最大密度に従って配置します
レム レイアウト
最大幅 & 最大デバイス幅
max-width はブラウザの表示領域の幅、max-device-width はデバイスの表示幅です
通常、モバイル ブラウザの幅はデバイスの幅と同じであるため、max-device-width をモバイルの適応に使用できます。
レスポンシブ ページを開発する場合は、max-device-width を使用することをお勧めします
サイズの異なるデバイスでは、メディア レスポンスを使用してページのルート ノードのフォント サイズを制御し、レム レイアウトを実現します。
rem は実際に適応スキームを開発します
- デバイス幅に対するデザインの比率に応じて、html とタグのフォント サイズを動的に計算して設定します (メディア クエリ)。
- CSSでは、デザイン案の要素の幅、高さ、相対位置などの値を、同じ比率に従ってrem単位の値に変換します。
画面サイズが異なると、通常は異なるフォントサイズが設定されます
- iPhone 4 5 640px
- iPhone 6 7 8 750px
- Android 共通320px 360px 375px 384px 400px 414px 424px 480px 500px 540px 720px 750px
html タグのフォントサイズとページ要素の値を動的に設定する
-
デザイン案が750pxだとします
-
画面全体を15等分したとします（分割基準は必ずしも20等分や10等分とは限りません）
-
各コピーは html フォント サイズ、つまり 750/15=50px として使用されます。320px デバイスでは、フォント サイズは 320/15=21.33px です。
ページ要素の値
- ページ要素の rem 値 = 750 ピクセルでのページ要素の px 値 / html のテキスト サイズ
サンプルコード
このサンプル コードでは、ページを 15 等分しています。
@media all and (max-width:320px){
html{
font-size: 21.33px;
}
}
@media all and (min-width:321px) and (max-width:360px){
html{
font-size: 24px;
}
}
@media all and (min-width:361px) and (max-width:375px){
html{
font-size: 25px;
}
}
@media all and (min-width:376px) and (max-width:384px){
html{
font-size: 25.6px;
}
}
@media all and (min-width:385px) and (max-width:400px){
html{
font-size: 26.66px;
}
}
@media all and (min-width:401px) and (max-width:414px){
html{
font-size: 27.6px;
}
}
@media all and (min-width:415px) and (max-width:424px){
html{
font-size: 28.27px;
}
}
@media all and (min-width:425px) and (max-width:480px){
html{
font-size: 32px;
}
}
@media all and (min-width:481px) and (max-width:500px){
html{
font-size: 33.33px;
}
}
@media all and (min-width:501px) and (max-width:540px){
html{
font-size: 36px;
}
}
@media all and (min-width:541px) and (max-width:640px){
html{
font-size: 42.67px;
}
}
@media all and (min-width:641px) and (max-width:720px){
html{
font-size: 48px;
}
}
@media all and (min-width:721px){
html{
font-size: 50px;
}
}
レム適応スキーム技術の使用
オプション 1
- 以下
- メディアクエリ
- レム
オプション 2 (推奨、より簡単)
- 柔軟な.js
- レム
柔軟な.js
flexible.js は自動的に画面を 10 等分します。