応答性、メディア クエリとメディアの関係、ストリーミング メディア レイアウト フレックスと em rem ピクセルの使用について、ナンセンスな話をします。_html/css_WEB-ITnose

1. レスポンシブとは
モバイル端末の普及が進むにつれ、Web サイトの閲覧に携帯電話を使用する人もいれば、有料ブラウザを使用して Web サイトを閲覧する人もいます。 Web サイトを閲覧するときに、一連の CSS スタイルをどのように使用して 3 つの端末に適応させることができるかという疑問が生じます。World Wide Organization (W3c) は、互換性のあるページ レイアウト スタイルの構文をついに提案しました。フォントサイズは端末の影響を受けず、ページレイアウトも崩れません。これがメディアの応答性の原因であることがわかりました。
1) Youdao Dictionary または Baidu Translate をクリックし、メディアを入力します。翻訳欄に「メディア」という単語が明確に表示されます。したがって、メディアは、端末のクエリに使用されます。 ...

いわゆるメディアクエリはデバイス情報をクエリするため、画面幅の問題だけではないはずです。そのため、メディアがクエリできるデバイス情報とタスクを調べるためにカバーを外しました。原理は何ですか。

2) メディアの書き方 && 互換性 && デバイスのクエリをサポートできる情報

メディアがリンク タグまたは CSS スタイル シートに表示される場合、一度分析すれば端末デバイスを簡単に理解できます。このウェブサイトにどのような服装を掲載する予定ですか? それで、メディアは私の背後にあるキーワードが何かを判断する必要があります。画面ブラウザはすべてのデバイスで使用されることを意味します。メディアがサポートするデバイス情報属性の詳細については、URL http://www.runoob.com/cssref/css3-pr-mediaquery.html を参照してください。情報が確立されているかどうかを判断するためにリンク タグ内で使用することもできます。レスポンシブ CSS ファイルの読み込みに関しては、この機能は、Youdao 入力ビューポートを開くための古い方法です。 window なので、device-width はデバイスの幅を意味し、高さ = device -height を意味し、initial-scale はページサイズを初期化することを意味します。ユーザースケーラブルとは、ユーザーがズームできるかどうかを意味します。もちろん、専門家がより速く、より優れたレスポンシブな Web サイトを実現したいと考えている人にとって、これはまだ可能です。たとえば、width: 100% は、ビューポートのサイズが調整されている限り、幅は 100 に設定されます。その後、Wanwei Party H5 チームの共同研究者が幅を 100% にする新しい属性を考案し、この flex (フレキシブル ボックス) も誕生しました。

3. flex の使用ルール

Flex の中国語訳は、主にレスポンシブな Web サイトのレイアウトで使用されます

3.1) flex の使用ルール

親要素を display:flex に設定します。要素の配置方向を上から下か下から上か、左から右か右から左かに設定したい場合は、属性 flex-direction: row|column; を設定するだけで済みます。 flex-flow: flex-direction flex-wrap|initial|inherit; 私の説明があまり明確でない場合は、記事 http://www.runoob.com/cssref/css3-pr-flex-flow.html を読んでください

Uncle Ruanyifeng の http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html の記事

そして css88 の http://www.css88.com/book/css/properties/flexible -box/index。 htm

http://www.css88.com/book/css/properties/flex/index.htm

騙せるとは思えません。 。 。 。 。

最後に、モバイルピクセル単位emとremの違いについてお話しましょう

em: 値は固定ではなく、親要素のサイズを継承して変更されます

rem: 値は固定ではなく、変更されますhtmlとbody要素のサイズに応じて変更します

htmlやbody要素のCSSスタイルのフォントサイズを統一したい場合は、フォントサイズを62.5%に設定します

添付: em rem px オンライン フォント変換 Web サイト http://pxtoem.com/