媒体查询响应式设计

yanbingyun1990 发布于2019-08-02 11:00 / 730人阅读

摘要：一媒体查询作用使用查询，你可以针对不同的媒体类型定义不同的样式。可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

一、媒体查询

<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;
}

手机
----------

当你停下来休息的时候，不要忘记别人还在奔跑。

GPU云服务器云服务器响应式设计响应式响应式布局响应式网站

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52700.html

响应式布局的实现

摘要：响应式布局的概念响应式布局，即，在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。框架实现响应式布局利用中栅格系统可以简单实现响应式布局，这里就需要去理解一下啥是栅格系统代表在端上显示在一行的个栅栏，也就是一半。响应式布局的概念响应式布局，即 Responsive design，在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏...

syoya 2019-08-30 10:55 评论0 收藏0
谈谈响应式布局

摘要：今天在这里就略微谈一下响应式布局吧想必大家都知道响应式布局已经在这个移动端为主流的时代成为了避不开的话题之一接下来我们从小到大来谈谈响应式网页设计的基本原则为什么为什么需要响应式设计想必这点不说大家都能想到答案现在是一个移动为先的时代我们要今天在这里就略微谈一下响应式布局吧,想必大家都知道响应式布局已经在这个移动端为主流的时代成为了避不开的话题之一,接下来我们从小到大来谈谈响应式网页...

smallStone 2019-08-29 11:30 评论0 收藏0
响应式web设计--媒体查询

摘要：媒体查询的用法媒体查询包含一个可选的媒体类型和，满足规范的条件下，包含零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为或。还有一个与众不同的是，在其他浏览器中不要像其他属性一样在不同的浏览器中添加前缀。媒体查询的用法 media 媒体查询包含一个可选的媒体类型和，满足CSS3规范的条件下，包含零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为true或false。如...

Eric 2019-08-29 16:07 评论0 收藏0
响应式web设计--媒体查询

摘要：媒体查询的用法媒体查询包含一个可选的媒体类型和，满足规范的条件下，包含零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为或。还有一个与众不同的是，在其他浏览器中不要像其他属性一样在不同的浏览器中添加前缀。媒体查询的用法 media 媒体查询包含一个可选的媒体类型和，满足CSS3规范的条件下，包含零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为true或false。如...

Salamander 2019-08-02 11:00 评论0 收藏0
媒体查询响应式设计

摘要：一媒体查询作用使用查询，你可以针对不同的媒体类型定义不同的样式。可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。一、媒体查询作用使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设...

worldligang 2019-08-29 16:07 评论0 收藏0