資訊專欄INFORMATION COLUMN
摘要：一媒體查詢作用使用查詢，你可以針對不同的媒體類型定義不同的樣式。可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面，是非常有用的。當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。
一、媒體查詢
<1>作用
使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。
@media 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面，@media 是非常有用的。
當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。
<2>使用方式1
<(min-width:1024px)>代表當視口的寬大于1024px時所表現的狀態,一般用與PC端；
<(max-width:1024px) and (min-width:680px)>代表當視口的寬大于680px小于1024px時所表現的狀態，一般用與paid；
<(max-width:680px）>代表視口大小小于680px是所表現的狀態，一般用于手機；
<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;
}
}
二、響應式設計（1）<效果圖>
（PC端）
（paid顯示器沒PC的大所以中間放不下三個div就把右邊的移到下邊）
（手機端顯示器相對于其他倆個最小，中間的部分只能放一個div說以只能讓三個div豎直排列）
（2）代碼如下：
響應式設計
這是頭部
這是右邊
這是中間
這是左邊
.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;
}
手機
----------
當你停下來休息的時候，不要忘記別人還在奔跑。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113536.html
摘要：今天在這里就略微談一下響應式布局吧想必大家都知道響應式布局已經在這個移動端為主流的時代成為了避不開的話題之一接下來我們從小到大來談談響應式網頁設計的基本原則為什么為什么需要響應式設計想必這點不說大家都能想到答案現在是一個移動為先的時代我們要 今天在這里就略微談一下響應式布局吧,想必大家都知道響應式布局已經在這個移動端為主流的時代成為了避不開的話題之一,接下來我們從小到大來談談響應式網頁...
摘要：媒體查詢的用法媒體查詢包含一個可選的媒體類型和，滿足規范的條件下，包含零個或多個表達式，這些表達式描述了媒體特征，最終會被解析為或。還有一個與眾不同的是，在其他瀏覽器中不要像其他屬性一樣在不同的瀏覽器中添加前綴。 媒體查詢的用法 media 媒體查詢包含一個可選的媒體類型和，滿足CSS3規范的條件下，包含零個或多個表達式，這些表達式描述了媒體特征，最終會被解析為true或false。如...
摘要：媒體查詢的用法媒體查詢包含一個可選的媒體類型和，滿足規范的條件下，包含零個或多個表達式，這些表達式描述了媒體特征，最終會被解析為或。還有一個與眾不同的是，在其他瀏覽器中不要像其他屬性一樣在不同的瀏覽器中添加前綴。 媒體查詢的用法 media 媒體查詢包含一個可選的媒體類型和，滿足CSS3規范的條件下，包含零個或多個表達式，這些表達式描述了媒體特征，最終會被解析為true或false。如...
閱讀 2123·2019-08-29 16:53
閱讀 2699·2019-08-29 16:07
閱讀 2041·2019-08-29 13:13
閱讀 3266·2019-08-26 13:57
閱讀 1331·2019-08-26 13:31
閱讀 2432·2019-08-26 13:22
閱讀 1220·2019-08-26 11:43
閱讀 2084·2019-08-23 17:14
