CSS || @media媒體查詢

時間 2019-11-21

標籤 css media 媒體查詢欄目 CSS 简体版

原文原文鏈接

`media`實現響應式網頁

響應式網頁設計Responsive Web Design指能夠自動識別屏幕寬度，對並對樣式作出相應調整css

經過媒體查詢實如今不一樣屏幕寬度下加載不一樣的CSS樣式html

1 移動端容許網頁自動調整

<meta name="viewport" content="width=device-width, initial-scale=1">

viewport表示視口：瀏覽器可視區域寬度和高度css3
width=device-width：默認網頁寬度等於屏幕寬度數組
initial-scale=1：原始縮放比例爲1，即網頁佔屏幕面積的100%瀏覽器

對於IE六、七、8須要使用Polyfill庫：css3mediaqueries.jssvn

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

2 不使用絕對寬度

網頁會根據屏幕寬度調整佈局，因此不能使用絕對寬度進行佈局。而且不能使用絕對單位的其餘元素。佈局

寬度只能使用相對單位百分數100%、vw和vh視口寬度和視口高度字體

3 相對大小字體

不能使用絕對單位的元素：字體使用em、rem等相對單位進行設置ui

4 響應式圖片

自適應網頁須要圖片實現自動縮放：只須要將設置max-width: 100%便可google

5 流動佈局`fluid-grid`

在佈局系統中，各個柵格的位置都是浮動的，並不固定。主要利用float實現柵格系統

float的元素不會在水平方向溢出overflow，出現水平滾動條；而是直接滾動到前面元素的下方。注意絕對定位的使用，當心

6 `media`引入不一樣`CSS`樣式

響應式設計的核心是CSS3引入的Media Query模塊。自動探測屏幕類型及寬度，符合條件時加載CSS樣式

Media Query模塊有三種引入方式：

6.1 使用`link`標籤

<!-- 在屏幕寬度小於400px時，才引用tinyScreen.css樣式表 -->
<link rel="stylesheet" href="tinyScreen.css" type="text/css" media="screen and (max-width: 400px)">

<!-- 在屏幕寬度大於400px而且小於600px時，才引用mediumScreen.css樣式表 -->
<link rel="stylesheet" href="mediumScreen.css" type="text/css" media="screen and (min-width: 400px) and (max-width: 600px;)">

6.2 使用`@import`

利用@import url("tinyScreen") screen and (max-width: 400px);知足條件時，能夠在現有CSS文件中加載其餘的CSS文件

注：@import與link標籤的區別：

link屬於HTML標籤，除引入CSS樣式表還有其餘做用；@import是CSS提供的一種加載CSS文件的方式
link標籤能夠定義RSS、定義rel鏈接屬性；@import只能加載CSS文件
HTML頁面被下載而且增量解析，link標籤被增量解析到便開始加載；@import須要等到HTML頁面下載完畢纔開始加載
JavaScript的DOM接口不能操做@import
@import能夠在現有CSS文件中引入

6.3 使用`@media`

在CSS文件中，使用@media引入一段查詢的樣式

@media all and (max-width: 768px) {
    /* 知足查詢條件後應用的規則 */
}

7 12列柵格佈局系統

主要步驟：

定義容器寬度：100%，必要時能夠設置最大寬度max-width。將容器設置爲border-box便於設置固定寬度的padding
保證行元素不會溢出到其餘行：經過先後添加僞元素，清除浮動
設置列寬：根據100% / 列數，同時設置padding值，用做網格的間距；
設置不一樣列數組合section的寬度：col-n = col- * n
設置響應式網格：根據媒體查詢，設置不一樣的列寬便可，或者應用不一樣的列寬

實現12列柵格系統

/* 使用border-box，便於在百分比寬度容器中設置固定寬度的padding */
* {box-sizing: inherit;}
html {box-sizing: border-box;}
p{margin: 0;}

/* 定義容器寬度 */
.grid_container {
    width: 100%;
    max-width: 1200px;
}

/* 定義row：行內的元素不會溢出到其餘行。利用清除浮動的方式實現 */
.row::before,
.row::after {
    content: "";
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
}

/* 設置列寬：容器寬 / 列數；這裏定義12列 */
/* 使用浮動進行定位，避免容器內沒有內容，爲容器設置一個最小高度1px */
/* 設置列間距：使用padding。容器使用的是border-box，因此網格水平間距是水平的padding-left與padding-right之和 */
/* 垂直間距是padding-top與padding-bottom */
[class*='col-'] {
    float: left;
    width: 8.33%;
    min-width: 1px;

    padding: 10px;    
}

/* 多個網格寬度的組合section */

@media screen and (min-width: 769px) {
    .col-md-1 {width: 8.33%;}
    .col-md-2 {width: 16.66%;}
    .col-md-3 {width: 25%;}
    .col-md-4 {width: 33.33%;}
    .col-md-5 {width: 41.66%;}
    .col-md-6 {width: 50%;}
    .col-md-7 {width: 58.33%;}
    .col-md-8 {width: 66.66%;}
    .col-md-9 {width: 75%;}
    .col-md-10 {width: 83.33%;}
    .col-md-11 {width: 91.66%;}
    .col-md-12 {width: 100%;}
}


/* 都不設置樣式的具體高度，根據內容撐開 */

/* 響應式，以768px爲分界點 */
@media screen and (max-width: 768px) {
    .col-sm-1 {width: 8.33%;}
    .col-sm-2 {width: 16.66%;}
    .col-sm-3 {width: 25%;}
    .col-sm-4 {width: 33.33%;}
    .col-sm-5 {width: 41.66%;}
    .col-sm-6 {width: 50%;}
    .col-sm-7 {width: 58.33%;}
    .col-sm-8 {width: 66.66%;}
    .col-sm-9 {width: 75%;}
    .col-sm-10 {width: 83.33%;}
    .col-sm-11 {width: 91.66%;}
    .col-sm-12 {width: 100%;}
}

/* ------------------------------------------------------------ */
/* 內容的樣式 */
[class*='col-'] > p {
    height: 50px;
    line-height: 50px;
    background: #eee;
    color: red;
    border: 1px solid #999;
}

使用：在屏幕小於768px時，應用col-sm-類的樣式。

<div class="grid-container ">
    <div class="row">
        <div class="col-md-4 col-sm-6"><p>col-4</p></div>
        <div class="col-md-4 col-sm-6"><p>col-4</p></div>
        <div class="col-md-4 col-sm-12"><p>col-4</p></div>
    </div>
    <div class="row">
        <div class="col-md-3 col-sm-3"><p>col-3</p></div> 
        <div class="col-md-6 col-sm-6"><p>col-6</p></div> 
        <div class="col-md-3 col-sm-3"><p>col-3</p></div> 
    </div> 
    <div class="row">
        <div class="col-md-1 col-sm-2"><p>col-1</p></div> 
        <div class="col-md-1 col-sm-2"><p>col-1</p></div> 
        <div class="col-md-2 col-sm-8"><p>col-2</p></div> 
        <div class="col-md-2 col-sm-3"><p>col-2</p></div> 
        <div class="col-md-6 col-sm-3"><p>col-6</p></div> 
    </div> 
</div>

添加偏移`offset`功能

offset的實現思路是利用margin-left實現偏移，距離與列寬相同。只需添加響應式規則中便可

@media screen and (min-width: 769px) {
    .col-md-1 {width: 8.33%;}
    .col-md-2 {width: 16.66%;}
    .col-md-3 {width: 25%;}
    .col-md-4 {width: 33.33%;}
    .col-md-5 {width: 41.66%;}
    .col-md-6 {width: 50%;}
    .col-md-7 {width: 58.33%;}
    .col-md-8 {width: 66.66%;}
    .col-md-9 {width: 75%;}
    .col-md-10 {width: 83.33%;}
    .col-md-11 {width: 91.66%;}
    .col-md-12 {width: 100%;}
    /* 偏移offset */
    .col-md-offset-1 {margin-left: 8.33%;}
    .col-md-offset-2 {margin-left: 16.66%;}
    .col-md-offset-3 {margin-left: 25%;}
    .col-md-offset-4 {margin-left: 33.33%;}
    .col-md-offset-5 {margin-left: 41.66%;}
    .col-md-offset-6 {margin-left: 50%;}
    .col-md-offset-7 {margin-left: 58.33%;}
    .col-md-offset-8 {margin-left: 66.66%;}
    .col-md-offset-9 {margin-left: 75%;}
    .col-md-offset-10 {margin-left: 83.33%;}
    .col-md-offset-11 {margin-left: 91.66%;}
    .col-md-offset-12 {margin-left: 100%;}
}