WeChat 미니 프로그램의 CSS 스타일 미디어 태그 소개

이 글은 주로 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 – 모든 장치 유형용
청각 – 음성 및 음악 합성기용
braille – 촉각 피드백 장치용
embossed – 양각 문자(점자) 인쇄 장치용
handheld – 소형 또는 휴대용 장치용
인쇄 – 프린터용
투사 – 슬라이드와 같은 이미지 투사용
화면 – 컴퓨터 모니터용
tty – 고정 간격 문자 격자를 사용하는 장치용. 텔레타이프라이터 및 터미널과 같은
tv – 텔레비전 유형 장비용

위의 CSS 스타일을 인용할 때 두 번 인용했습니다. 목적을 달성하기 위해 CSS 스타일을 완전히 참조할 수 있으며, 이는 CSS 스타일 로딩 속도도 향상시킬 수 있습니다. 구현 코드는 다음과 같습니다.

CSS 코드

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

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

위의 미디어 태그는 의 표준 구문입니다. css.css.media 태그는 모든 브라우저가 지원하지만, 다음 작성 방법은 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 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

WeChat 애플릿에서 javascript로 데이터를 얻는 방법

비밀번호 암호화를 구현하기 위한 WeChat 애플릿의 nodejs 개발

위 내용은 WeChat 미니 프로그램의 CSS 스타일 미디어 태그 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!