WeChat 미니 프로그램의 CSS 스타일 미디어 태그 소개
- 不言원래의
- 2018-06-27 11:25:551918검색
이 글은 주로 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'/>
아래는 미디어 태그의 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!