小編給大家分享一下css如何使用@media響應(yīng)式適配各種屏幕,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
成都創(chuàng)新互聯(lián)10多年企業(yè)網(wǎng)站設(shè)計服務(wù);為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計及高端網(wǎng)站定制服務(wù),企業(yè)網(wǎng)站設(shè)計及推廣,對成都木屋等多個方面擁有豐富的網(wǎng)站營銷經(jīng)驗的網(wǎng)站建設(shè)公司。
定義和使用
使用 @media 查詢,你可以針對不同的媒體類型定義不同的樣式。
@media 可以針對不同的屏幕尺寸設(shè)置不同的樣式,特別是如果你需要設(shè)置設(shè)計響應(yīng)式的頁面,@media 是非常有用的。
當(dāng)你重置瀏覽器大小的過程中,頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面。
PC端設(shè)備屏幕的寬度
頁面寬度大于1000px(>=1000)且小于1200px(<=1200)的時候執(zhí)行下面的CSS(實際剛好“>=1000”或“<=1200”的都執(zhí)行)
@media screen and (min-width:1000px) and (max-width: 1200px){ .cont_li{ width: 50px; margin-left: 7px; padding-left: 9px; } }
注意以下順序,如果把@media (min-width: 768px)寫在了最下方,那么很悲劇,
@media (min-width: 1200){ //>=1200的設(shè)備 } @media (min-width: 992px){ //>=992的設(shè)備 } @media (min-width: 768px){ //>=768的設(shè)備 }
這是因為如果屏幕寬度是1440,由于1440>768那么1200就會失效。
所以在使用min-width時,小的在前面,大的在后面;同理,如果使用max-width時,就是大的在前面,小的在后面:
@media (min-width: 768px){ //>=768的設(shè)備 } @media (min-width: 992px){ //>=992的設(shè)備 } @media (min-width: 1200){ //>=1200的設(shè)備 } @media (max-width: 1199){ //<=1199的設(shè)備 } @media (max-width: 991px){ //<=991的設(shè)備 } @media (max-width: 767px){ //<=768的設(shè)備 }
PC屏幕自適應(yīng)CSS3代碼:
/*當(dāng)頁面寬度大于1000px且小于1200px的時候執(zhí)行,1000-1200*/ @media screen and (min-width:1000px) and (max-width: 1200px){ body{ font-size:16px } } /*當(dāng)頁面寬度大于1280px且小于1366px的時候執(zhí)行,1280-1366*/ @media screen and (min-width:1280px) and (max-width: 1366px){ body{ font-size:18px } } /*當(dāng)頁面寬度大于1440px且小于1600px的時候執(zhí)行,1440-1600*/ @media screen and (min-width:1440px) and (max-width:1600px){ body{ font-size:20px } } /*當(dāng)頁面寬度大于1680px且小于1920px的時候執(zhí)行,1680-1920*/ @media screen and (min-width:1680px) and (max-width:1920px){ body{ font-size:22px } }
電腦屏幕尺寸的例表得到了幾個寬度:1024、1200、1280、1366、1440、1600、1680、1920。
移動端設(shè)備屏幕的寬度
rem(font size of the root element)是指相對于根元素的字體大小的單位。簡單的說它就是一個相對單位??吹絩em大家一定會想起em單位,em(font size of the element)是指相對于父元素的字體大小的單位。它們之間其實很相似,只不過一個計算的規(guī)則是依賴根元素一個是依賴父元素計算。
所以這里總結(jié)一句,所謂依賴根元素來計算的方式,就是先給予html元素一個font-size,然后我們所有的rem就根據(jù)這個font-size來計算,例如:
html{ font-size:16px;}
那么我們這里的1rem就應(yīng)該這么來計算:1x16=16px=1rem;
移動端字體:
@media screen and (min-width: 320px) {html{font-size:50px;}} @media screen and (min-width: 360px) {html{font-size:56.25px;}} @media screen and (min-width: 375px) {html{font-size:58.59375px;}} @media screen and (min-width: 400px) {html{font-size:62.5px;}} @media screen and (min-width: 414px) {html{font-size:64.6875px;}} @media screen and (min-width: 440px) {html{font-size:68.75px;}} @media screen and (min-width: 480px) {html{font-size:75px;}} @media screen and (min-width: 520px) {html{font-size:81.25px;}} @media screen and (min-width: 560px) {html{font-size:87.5px;}} @media screen and (min-width: 600px) {html{font-size:93.75px;}} @media screen and (min-width: 640px) {html{font-size:100px;}} @media screen and (min-width: 680px) {html{font-size:106.25px;}} @media screen and (min-width: 720px) {html{font-size:112.5px;}} @media screen and (min-width: 760px) {html{font-size:118.75px;}} @media screen and (min-width: 800px) {html{font-size:125px;}} @media screen and (min-width: 960px) {html{font-size:150px;}}
移動端屏幕自適應(yīng)CSS3代碼:
@media screen and (min-width:320px) and (max-width:360px){ body{ font-size: 12px; } } @media screen and (min-width:360px) and (max-width:390px){ body{ font-size: 13px; } } @media screen and (min-width:390px) and (max-width:460px){ body{ font-size: 14px; } } @media screen and (min-width:320px) and (max-width:460px){ body{ font-size: 12.5px; } }
看完了這篇文章,相信你對“css如何使用@media響應(yīng)式適配各種屏幕”有了一定的了解,如果想了解更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!
名稱欄目:css如何使用@media響應(yīng)式適配各種屏幕
鏈接分享:http://chinadenli.net/article32/ihpdsc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供建站公司、網(wǎng)站收錄、網(wǎng)站建設(shè)、外貿(mào)建站、App設(shè)計、小程序開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)