CSS3_html/css_WEB-ITnose のメディア クエリ

ここ数日、MOOC.com で CSS3 を読んでいました。これは非常に詳細です。アドレスはこちらです: http://www.imooc.com/code/1405

注意事項:

1. CSS3 のメディア クエリ

1. CSS3 の 10 個のメディア クエリ タイプ

値 デバイス タイプ

all すべてのデバイス (よく知っている必要があります)

画面 (よく知っている必要があります)

print 印刷用紙用 または印刷プレビュー表示 (慣れが必要)
点字
視覚障害者用の触覚フィードバック装置
エンボス加工
ハンドヘルド点字プリンター
携帯型装置
投影 さまざまな投影装置
音声合成装置
テレビ テレビ型デバイス
tty 固定使用密度 テレタイプライターや端末などの文字グリッド メディア

2. 一般的な 3 つ折りメディア タイプの参照メソッド

① link メソッド

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

② @import メソッド

@importurl(reset.css) screen;   

③ @media メソッド

<style type="text/css">    @media screen{    选择器{/*你的样式代码写在这里…*/}}</style>

3。メディアクエリの使用方法特定のデバイスで

/*用and连接*/@media screen and (min-width:600px) and (max-width:900px){  body {background-color:#f5f5f5;}}

二、レスポンシブデザインのレイアウトスキル


まず、無関係な div をできるだけ少なくします。
第 2 に、インライン要素 (インライン) を使用しないでください。
第三に、JS または Flash を最小限に使用します。可能な限り;
第 4 に、無駄な絶対配置とフローティング スタイルを破棄します。
第 5 に、冗長な構造を放棄し、100% 設定を使用しないでください。

六番目、H5 の意味のあるタグを使用してみます

シンプルできれいなレイアウトや HTML 構造はどのようなものですか

?ここで簡単なテスト方法を教えます。
まず、ページ内のすべてのスタイル (およびスタイル

関連情報) を無効にし、コンテンツ

が整然と配置されており、読みやすい場合は、構造
は悪くありません。