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

WBOY
リリース: 2016-06-24 11:47:41
オリジナル
1083 人が閲覧しました

ここ数日、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 構造はどのようなものですか

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

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

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



























関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート