WeChat 애플릿 CSS 스타일 미디어 태그-미니 프로그램 개발-php.cn

WeChat 애플릿 CSS 스타일 미디어 태그

高洛峰

풀어 주다： 2017-02-25 09:38:20

원래의

1980명이 탐색했습니다.

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 – 모든 장치 유형용
청각 – 음성 및 음악 합성기용
점자 – 촉각 피드백 장치용
양각 – 양각 문자(점자) 인쇄 장치용
휴대용 – 소형 또는 휴대용 장치
인쇄 – 프린터용
프로젝션 – 슬라이드와 같은 이미지 투사용
스크린 – 컴퓨터 모니터용
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 중국어 웹사이트를 주목하세요!