css- @media @font-face 的理解
阿新 • • 發佈:2017-12-22
也會 cnblogs 沒有 大小 log code zha 遇到 awesome
@media 可以針對不同的屏幕尺寸設置不同的樣式,特別是如果你需要設置設計響應式的頁面,@media 是非常有用的。
當你重置瀏覽器大小的過程中,頁面也會根據瀏覽器的寬度和高度重新渲染頁面。
以上的代碼意思是
在我的博客園定制的css中有2個之前沒有遇到的csss屬性@font-face
@media
@media
在css文件中的使用如下
`
@media screen and (max-width: 1260px) {
body {
margin: 0 30px;
}
}
@media screen and (max-width: 600px) {
body {
font-size: 13px;
}
}
`
@media查詢
@media 屬性在CSS3裏面已經演變成一種 media queries(媒體查詢/匹配)了,在CSS3裏面,可以用查詢語句來匹配各種類型的屏幕。
使用 @media 查詢,你可以針對不同的媒體類型定義不同的樣式。
當你重置瀏覽器大小的過程中,頁面也會根據瀏覽器的寬度和高度重新渲染頁面。
以上的代碼意思是
當是屏幕而且寬度小於1260px的時候 把body的margin改成xxx 當是屏幕而且寬度小於600px的時候 把body的字體改成xxx
@font-face規則
網頁設計師再也不必使用的"web-safe"的字體之一。
字體的名稱,font - face規則:
font-family: myFirstFont;
字體文件包含在您的服務器上的某個地方,參考CSS:
src: url('Sansation_Light.ttf')
如果字體文件是在不同的位置,請使用完整的URL:
src: url('http://www.w3cschool.css/css3/Sansation_Light.ttf')
@font-face { font-family: 'FontAwesome'; font-style: normal; font-weight: normal; src: url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.eot?#iefix") format('embedded-opentype'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.woff") format('woff'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.ttf") format('truetype'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.svg#FontAwesomeRegular") format('svg'); }
css- @media @font-face 的理解