CSS中規則@media的用法

時間 2019-12-18

標籤 css 規則 media 用法欄目 CSS 简体版

原文原文鏈接

CSS中@規則是由@符號開始的，例如@import，@page等。css

@media就是其中的一個規則。html

@media能夠讓你根據不一樣的屏幕大小而使用不一樣的樣式，這能夠使得不須要js代碼就能實現響應式佈局。css3

不過@media只能用於較新的瀏覽器，對於老式的IE，不支持。下面是@media支持的瀏覽器。瀏覽器

@media的語法比較簡單，一眼就能看懂。ide

@media mediatype and|not|only (media feature) {
CSS-Code;
}佈局

能夠參考http://www.w3cschool.cc/c***ef/css3-pr-mediaquery.html值的說明。3d

其中mediatype就是媒體類型，能夠包括好多種，最經常使用的就是screen，其餘多數已經做廢。xml

media feature就定義了這個media設備的一些特徵，簡單的說就是媒體知足什麼條件，經常使用的就是max-width，min-width。htm

經過指定屏幕的大小，而採用不一樣的樣式。blog

舉個例子演示如何用@media規則實現響應式佈局。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        .contain {
             925px;
            margin:0 auto;
        }

        .c1 {
            width: 300px;
            height: 100px;
            float: left;
            margin: 2px;
            background-color: yellowgreen;
        }


        @media only screen and (min-width: 620px) and (max-width: 930px) {
            .contain {
                width: 610px;
                margin-right: auto;
                margin-left: auto;
            }
        }

        @media only screen and (max-width: 620px) {
            .contain {
                width: 300px;
                margin: 0 auto;
            }
        }
    </style>
</head>
<body>
    <div class="contain">
        <div class="c1"></div>
        <div class="c1"></div>
        <div class="c1"></div>
        <div class="c1"></div>
        <div class="c1"></div>
        <div class="c1"></div>
    </div>

</body>
</html>

-----------------------------------------

@media only screen and (min- 620px) and (max-width: 930px)
@media only screen and (max- 620px)
上述2個規則，當屏幕寬度在620px如下，和620px-930px，使用的contain樣式是不一樣的。

截圖：

當瀏覽器寬度在1024px的狀況下，顯示效果以下：

當瀏覽器寬度在680px的狀況下，顯示以下：

當瀏覽器寬度在480px的狀況下，顯示以下：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。