摘要：一媒体查询作用使用查询，你可以针对不同的媒体类型定义不同的样式。可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
一、媒体查询
<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;
}
手机
----------
当你停下来休息的时候，不要忘记别人还在奔跑。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113536.html
摘要：今天在这里就略微谈一下响应式布局吧想必大家都知道响应式布局已经在这个移动端为主流的时代成为了避不开的话题之一接下来我们从小到大来谈谈响应式网页设计的基本原则为什么为什么需要响应式设计想必这点不说大家都能想到答案现在是一个移动为先的时代我们要 今天在这里就略微谈一下响应式布局吧,想必大家都知道响应式布局已经在这个移动端为主流的时代成为了避不开的话题之一,接下来我们从小到大来谈谈响应式网页...
摘要：媒体查询的用法媒体查询包含一个可选的媒体类型和，满足规范的条件下，包含零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为或。还有一个与众不同的是，在其他浏览器中不要像其他属性一样在不同的浏览器中添加前缀。 媒体查询的用法 media 媒体查询包含一个可选的媒体类型和，满足CSS3规范的条件下，包含零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为true或false。如...
摘要：媒体查询的用法媒体查询包含一个可选的媒体类型和，满足规范的条件下，包含零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为或。还有一个与众不同的是，在其他浏览器中不要像其他属性一样在不同的浏览器中添加前缀。 媒体查询的用法 media 媒体查询包含一个可选的媒体类型和，满足CSS3规范的条件下，包含零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为true或false。如...
阅读 2101·2019-08-29 16:53
阅读 2672·2019-08-29 16:07
阅读 2014·2019-08-29 13:13
阅读 3243·2019-08-26 13:57
阅读 1313·2019-08-26 13:31
阅读 2419·2019-08-26 13:22
阅读 1205·2019-08-26 11:43
阅读 2069·2019-08-23 17:14
