WeChat 애플릿 기본 지식 CSS 스타일 미디어 태그

WeChat 미니 프로그램 CSS 스타일 미디어 태그에 대한 기본 지식

머리말:

WeChat 미니 프로그램에서 문제가 발생했습니다. 새로운 것이지만 프론트엔드 개발을 위한 새로운 지식은 아닙니다. HTML 페이지의 미디어 태그는 긴급 상황을 위해 여기에 기록됩니다.

CSS에서는 어떤 CSS를 호출하는지 구별하기 위해 미디어 태그를 사용합니다. 예를 들어 media="print"를 사용하면 문서를 인쇄할 때 print.css 스타일을 사용함을 나타냅니다. 이렇게 하면 페이지 너비를 넓히거나 인쇄할 필요가 없는 일부 내용을 차단하는 등 문서의 인쇄 가능성이 높아집니다.

<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 – 모든 장치 유형용
청각 – 음성 및 음악 합성기용
점자 – 촉각 피드백 장치용
양각 – 양각 문자(점자) 인쇄 장치용
휴대용 – 소형 또는 휴대용 장치
print – 프린터용
projection – 슬라이드와 같은 이미지 투사용
screen – 컴퓨터 모니터용
tty – 고정된 공백 문자용 A 장치와 함께 사용됩니다. 텔레타이프라이터 및 터미널
tv – 텔레비전 장비에 사용

위의 CSS 스타일을 인용할 때 두 번 인용했습니다. 목적을 달성하기 위해 CSS 스타일을 완전히 참조할 수 있으며, 이는 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;
 }
}

읽어주셔서 감사합니다. 모두에게 도움이 되기를 바랍니다. 이 사이트를 지원해 주셔서 감사합니다!

WeChat 애플릿 기본 지식 CSS 스타일 미디어 태그 관련 기사를 더 보려면 PHP 중국어 웹사이트를 주목하세요!