資訊專欄INFORMATION COLUMN
摘要：一媒體查詢作用使用查詢，你可以針對不同的媒體類型定義不同的樣式。可以針對不同的屏幕尺寸設(shè)置不同的樣式，特別是如果你需要設(shè)置設(shè)計響應(yīng)式的頁面，是非常有用的。當你重置瀏覽器大小的過程中，頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面。
一、媒體查詢
<1>作用
使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。
@media 可以針對不同的屏幕尺寸設(shè)置不同的樣式，特別是如果你需要設(shè)置設(shè)計響應(yīng)式的頁面，@media 是非常有用的。
當你重置瀏覽器大小的過程中，頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面。
<2>使用方式1
<(min-width:1024px)>代表當視口的寬大于1024px時所表現(xiàn)的狀態(tài),一般用與PC端；
<(max-width:1024px) and (min-width:680px)>代表當視口的寬大于680px小于1024px時所表現(xiàn)的狀態(tài)，一般用與paid；
<(max-width:680px）>代表視口大小小于680px是所表現(xiàn)的狀態(tài)，一般用于手機；
<2>使用方式2
@medis screen and (max-width:600px){
body{
background-color:red;
}
}
@medis screen and (max-width:960px){
body{
background-color:yelow;
}
}
@medis screen and (min-width:600px) and (max-width:960px){
body{
background-color:blue;
}
}
二、響應(yīng)式設(shè)計（1）<效果圖>
（PC端）
（paid顯示器沒PC的大所以中間放不下三個div就把右邊的移到下邊）
（手機端顯示器相對于其他倆個最小，中間的部分只能放一個div說以只能讓三個div豎直排列）
（2）代碼如下：
響應(yīng)式設(shè)計
這是頭部
這是右邊
這是中間
這是左邊
.hidden{
height:100px;
background:red;
}
.content{
height:100%;
background:green;
overflow:hidden;
}
.footer{
height:100px;
background:blue;
}
.right{
width:20%;
height:300px;
float:left;
background:#ff0;
}
.center{
width:55%;
height:300px;
margin:0 2.5%;
float:left;
background:#0ff;
}
.left{
width:20%;
height:300px;
float:left;
background:#f0f;
}
（PC端）
----------
body{
margin:0;
}
.hidden{
height:100px;
background:red;
}
.content{
height:100%;
background:green;
overflow:hidden;
}
.footer{
height:100px;
background:blue;
}
.right{
width:20%;
height:300px;
float:left;
background:#ff0;
}
.center{
width:75%;
height:300px;
margin:0 2.5%;
float:left;
background:#0ff;
}
.left{
width:100%;
height:300px;
/* float:left; */
background:#f0f;
clear:both;
padding:10px 0px;;
}
paid
----------
body{
margin:0;
}
.hidden{
height:100px;
background:red;
}
.content{
height:100%;
background:green;
overflow:hidden;
}
.footer{
height:100px;
background:blue;
}
.right{
width:100%;
height:300px;
background:#ff0;
}
.center{
width:100%;
height:300px;
background:#0ff;
}
.left{
width:100%;
height:300px;
background:#f0f;
}
手機
----------
當你停下來休息的時候，不要忘記別人還在奔跑。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113536.html
摘要：響應(yīng)式布局的概念響應(yīng)式布局，即，在實現(xiàn)不同屏幕分辨率的終端上瀏覽網(wǎng)頁的不同展示方式?？蚣軐崿F(xiàn)響應(yīng)式布局利用中柵格系統(tǒng)可以簡單實現(xiàn)響應(yīng)式布局，這里就需要去理解一下啥是柵格系統(tǒng)代表在端上顯示在一行的個柵欄，也就是一半。 響應(yīng)式布局的概念 響應(yīng)式布局，即 Responsive design，在實現(xiàn)不同屏幕分辨率的終端上瀏覽網(wǎng)頁的不同展示方式。通過響應(yīng)式設(shè)計能使網(wǎng)站在手機和平板電腦上有更好的瀏...
摘要：今天在這里就略微談一下響應(yīng)式布局吧想必大家都知道響應(yīng)式布局已經(jīng)在這個移動端為主流的時代成為了避不開的話題之一接下來我們從小到大來談?wù)勴憫?yīng)式網(wǎng)頁設(shè)計的基本原則為什么為什么需要響應(yīng)式設(shè)計想必這點不說大家都能想到答案現(xiàn)在是一個移動為先的時代我們要 今天在這里就略微談一下響應(yīng)式布局吧,想必大家都知道響應(yīng)式布局已經(jīng)在這個移動端為主流的時代成為了避不開的話題之一,接下來我們從小到大來談?wù)勴憫?yīng)式網(wǎng)頁...
摘要：媒體查詢的用法媒體查詢包含一個可選的媒體類型和，滿足規(guī)范的條件下，包含零個或多個表達式，這些表達式描述了媒體特征，最終會被解析為或。還有一個與眾不同的是，在其他瀏覽器中不要像其他屬性一樣在不同的瀏覽器中添加前綴。 媒體查詢的用法 media 媒體查詢包含一個可選的媒體類型和，滿足CSS3規(guī)范的條件下，包含零個或多個表達式，這些表達式描述了媒體特征，最終會被解析為true或false。如...
摘要：媒體查詢的用法媒體查詢包含一個可選的媒體類型和，滿足規(guī)范的條件下，包含零個或多個表達式，這些表達式描述了媒體特征，最終會被解析為或。還有一個與眾不同的是，在其他瀏覽器中不要像其他屬性一樣在不同的瀏覽器中添加前綴。 媒體查詢的用法 media 媒體查詢包含一個可選的媒體類型和，滿足CSS3規(guī)范的條件下，包含零個或多個表達式，這些表達式描述了媒體特征，最終會被解析為true或false。如...
閱讀 2134·2019-08-29 16:53
閱讀 2708·2019-08-29 16:07
閱讀 2052·2019-08-29 13:13
閱讀 3274·2019-08-26 13:57
閱讀 1340·2019-08-26 13:31
閱讀 2444·2019-08-26 13:22
閱讀 1230·2019-08-26 11:43
閱讀 2094·2019-08-23 17:14
