WeChatアプレット基礎知識 CSSスタイルメディアタグ

WeChat ミニ プログラムの CSS スタイル メディア タグの基礎知識

前書き:

WeChat ミニ プログラムで新しい知識に遭遇しましたが、フロントエンド開発にとっては新しい知識ではありません、HTML ページのメディア タグ緊急時のためにここに記録してください

CSS では、どの CSS スタイルが呼び出されるかを区別するためにメディア タグを使用します。たとえば、ドキュメントを印刷するときに print.css スタイルを使用することを示すには、media="print" を使用します。これにより、ページ幅を広げたり、印刷する必要のない一部のコンテンツをブロックしたりするなど、ドキュメントがより印刷しやすくなります。

<link href="styles/main.css" rel="external nofollow" rel="stylesheet" type="text/css" media="screen" />
<link href="styles/print.css" rel="external nofollow" rel="stylesheet" type="text/css" media="print" /> 
<link href="main.css" rel="external nofollow" rel="stylesheet" type="text/css" media="all&#39;/>

以下はメディアタグの10個の値です。一般的に使用されるものはそれほど多くないことがわかります。メディアタグがない場合、デフォルトはmedia="all"です。

all – すべてのデバイスタイプ用
aural – スピーチおよび音楽シンセサイザー用
点字 – 触覚フィードバックデバイス用
エンボス – 凸字 (点字) 印刷デバイス用
ハンドヘルド – 小型またはハンドヘルドデバイス用
プリント – プリンター用
投影– スライドなどの画像の投影用
screen – コンピューターモニター用
tty – 固定間隔の文字グリッドを使用するデバイス用。テレタイプライターや端末など
tv – テレビタイプの機器用

上記の CSS スタイルを引用する場合、2 回引用しました。目的を達成するために CSS スタイルを完全に参照することができ、CSS スタイルの読み込み速度も向上します。実装コードは次のとおりです。

@media all { 
        body{ font:12px; width:100%;} 
   } 

@media print 
{ 
  body{ font:14px; width:595px;}  /* 用于打印时将宽度设置为595px(A4) */ 
}

上記のメディア タグは、 の標準構文です。 css. すべてのブラウザがメディアタグをサポートしていますが、次の記述方法はすべてのブラウザがサポートしていると思います

@media all and (min-width: 1001px) { 
 #sidebar ul li a:after { 
  content: " (" attr(data-email) ")"; 
  font-size: 11px; 
  font-style: italic; 
  color: #666; 
 } 
} 

@media all and (max-width: 1000px) and (min-width: 700px) { 
 #sidebar ul li a:before { 
  content: "Email: "; 
  font-style: italic; 
  color: #666; 
 } 
} 

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) { 
 #sidebar ul li a { 
  padding-left: 21px; 
  background: url(../images/email.png) left center no-repeat; 
 } 
}

これを行う人もいます

@media screen and (-webkit-min-device-pixel-ratio: 1.0), screen and (min--moz-device-pixel-ratio: 1.0), screen and (min-device-pixel-ratio: 1.0), screen and (min-resolution: 1.0dppx) {
  .icon-del {
background-image: url(../../resources/images/ui_3@2x.png);
background-size: 274px 228px;
display: block;
 }
}

。皆さん、このサイトを応援していただきありがとうございます!

WeChat アプレットの基礎知識、CSS スタイルのメディア タグ関連記事の詳細については、PHP 中国語 Web サイトに注目してください。