WeChat ミニプログラムにおける CSS スタイルのメディアタグの紹介-ミニプログラム開発-php.cn

WeChat ミニプログラムにおける CSS スタイルのメディアタグの紹介

不言

リリース： 2018-06-27 11:25:55

オリジナル

1936 人が閲覧しました

この記事は主に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. すべてのブラウザがメディアタグをサポートしていますが、次の書き方はIE678から外れていると思います

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;
 }
}

ログイン後にコピー

以上です。この記事の内容全体が皆さんの学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。