MediaQueries怎么在CSS3中使用

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)Media Queries怎么在CSS3中使用，文章內(nèi)容豐富且以專(zhuān)業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)專(zhuān)注于企業(yè)成都全網(wǎng)營(yíng)銷(xiāo)、網(wǎng)站重做改版、高臺(tái)網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5網(wǎng)站設(shè)計(jì)、電子商務(wù)商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性?xún)r(jià)比高，為高臺(tái)等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

最大寬度max-width

“max-width”是媒體特性中最常用的一個(gè)特性，其意思是指媒體類(lèi)型小于或等于指定的寬度時(shí)，樣式生效。如：

CSS Code復(fù)制內(nèi)容到剪貼板

  1. @media screen and (max-width:480px){   

  2.  .ads {   

  3.    display:none;   

  4.   }   

  5. }  

上面表示的是：當(dāng)屏幕小于或等于480px時(shí),頁(yè)面中的廣告區(qū)塊（.ads）都將被隱藏。

    最小寬度min-width

“min-width”與“max-width”相反，指的是媒體類(lèi)型大于或等于指定寬度時(shí)，樣式生效。

CSS Code復(fù)制內(nèi)容到剪貼板

  1. @media screen and (min-width:900px){   

  2. .wrapper{width: 980px;}   

  3. }  

上面表示的是：當(dāng)屏幕大于或等于900px時(shí)，容器“.wrapper”的寬度為980px。

    多個(gè)媒體特性使用

當(dāng)屏幕在600px~900px之間時(shí)，body的背景色渲染為“#f5f5f5”，如下所示。

CSS Code復(fù)制內(nèi)容到剪貼板

  1. @media screen and (min-width:600px) and (max-width:900px){   

  2.   body {background-color:#f5f5f5;}   

  3. }  

    設(shè)備屏幕的輸出寬度Device Width

在智能設(shè)備上，例如iPhone、iPad等，還可以根據(jù)屏幕設(shè)備的尺寸來(lái)設(shè)置相應(yīng)的樣式（或者調(diào)用相應(yīng)的樣式文件）。同樣的，對(duì)于屏幕設(shè)備同樣可以使用“min/max”對(duì)應(yīng)參數(shù)，如“min-device-width”或者“max-device-width”。

CSS Code復(fù)制內(nèi)容到剪貼板

  1. <link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />  

上面的代碼指的是“iphone.css”樣式適用于最大設(shè)備寬度為480px，比如說(shuō)iPhone上的顯示，這里的“max-device-width”所指的是設(shè)備的實(shí)際分辨率，也就是指可視面積分辨率。

    not關(guān)鍵詞

CSS Code復(fù)制內(nèi)容到剪貼板

  1. @media not print and (max-width: 1200px){樣式代碼}  

上面代碼表示的是：樣式代碼將被使用在除打印設(shè)備和設(shè)備寬度小于1200px下所有設(shè)備中。

    only關(guān)鍵詞

CSS Code復(fù)制內(nèi)容到剪貼板

  1. <link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />  

上述就是小編為大家分享的Media Queries怎么在CSS3中使用了，如果剛好有類(lèi)似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享名稱(chēng)：MediaQueries怎么在CSS3中使用
文章URL：http://muchs.cn/article28/jejpcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、建站公司、品牌網(wǎng)站建設(shè)、微信公眾號(hào)、網(wǎng)站制作、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

搜索引擎優(yōu)化