|
導讀微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一... 微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一項門檻非常高的創新,經過將近兩年的發展,已經構造了新的小程序開發環境和開發者生態。 這篇文章主要介紹了微信小程序 基礎知識css樣式media標簽的相關資料,需要的朋友可以參考下微信小程序 基礎知識css樣式media標簽 前言: 微信小程序中我遇到了一個對我來說是新的東西,但是對于前端開發來說不算是新知識,html頁面中的media標簽,在此記錄下來以備不時之需 在css中我們使用media標簽來區分調用哪個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'/> 下邊是media標簽的10個值,可見常用的并不多。當沒有media標簽時,默認為media=”all”。 all– 用于所有設備類型 在上邊引用css樣式時,我們引用了兩次。我們完全可以引用一個css樣式來達到我們的目的,這樣也可以提高css樣式加載速度, 實現代碼如下: CSS代碼 @media all {
body{ font:12px; width:100%;}
}
@media print
{
body{ font:14px; width:595px;} /* 用于打印時將寬度設置為595px(A4) */
}以上media標簽是css中的標準語法,所有瀏覽器都支持media標簽,但下面的寫法出IE6\7\8 以為的瀏覽器都支持 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中文網! 相關推薦: 以上就是微信小程序中css樣式media標簽的介紹的詳細內容,更多請關注php中文網其它相關文章! 小程序是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或者搜一下即可打開應用。 |
溫馨提示:喜歡本站的話,請收藏一下本站!