css 响应式（媒介查询）

ningwang 发布于2019-08-29 16:07 / 3502人阅读

摘要：来实现响应式实现响应式网站的布局要用到的就是中的媒体查询接下来来简单介绍一下类型条件条件二样式我们只需用到衍生出的这个属性，定义输出设备中的页面可见区域宽度来控制该改变的样式即可。

1.CSS 来实现响应式

CSS实现响应式网站的布局要用到的就是CSS中的媒体查询接下来来简单介绍一下：

@media 类型 and (条件1) and (条件二){css样式}

我们只需用到width衍生出的max-width这个属性，定义输出设备中的页面可见区域宽度来控制该改变的样式即可。
html代码如下：

demo01.css样式如下：

body{
    margin:0;
    text-align:center;
}

.header{
    height:100px;
    background-color:red;
}
.container{
    height:400px;
    background-color:pink;
}
.clearfix:after{
    display:block;
    content:"";
    visibility:hidden;
    height:0;
    clear:both;
}
.footer{
    height:100px;
    background-color:blue;
}
.left{
    width:20%;
    background-color:orange;
    float:left;
    height:300px;
}
.center{
    width:55%;
    background-color:gray;
    float:left;
    height:300px;
    margin:0 2.5%;
}
.right{
    width:20%;
    background-color:yellow;
    float:left;
    height:300px;
}

demo02的样式如下：

body{
    margin:0;
    text-align:center;
}

.header{
    height:100px;
    background-color:red;
}
.container{
    height:400px;
    background-color:pink;
}
.clearfix:after{
    display:block;
    content:"";
    visibility:hidden;
    height:0;
    clear:both;
}
.footer{
    height:100px;
    background-color:blue;
}
.left{
    width:30%;
    background-color:orange;
    float:left;
    height:300px;
}
.center{
    width:70%;
    background-color:gray;
    float:left;
    height:300px;
}
.right{
    width:100%;
    background-color:yellow;
    height:300px;
}

demo03的样式：

body{
    margin:0;
    text-align:center;
}

.header{
    height:100px;
    background-color:red;
}
.container{
    background-color:pink;
}
.clearfix:after{
    display:block;
    content:"";
    visibility:hidden;
    height:0;
    clear:both;
}
.footer{
    height:100px;
    background-color:blue;
}
.left{
    width:100%;
    background-color:orange;
    height:300px;
}
.center{
    width:100%;
    background-color:gray;
    height:300px;
}
.right{
    width:100%;
    background-color:yellow;
    height:300px;
}

效果图：

窗口大于1024px时显示的样子

当大于640小于980时，右侧栏在底部

当小于480时，导航栏折叠，body三部分竖直排列显示，若窗口持续缩小，不在发生变化，区域被压缩

效果总图：

持续更新，欢迎大家！

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

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

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

css 响应式（媒介查询）

摘要：来实现响应式实现响应式网站的布局要用到的就是中的媒体查询接下来来简单介绍一下类型条件条件二样式我们只需用到衍生出的这个属性，定义输出设备中的页面可见区域宽度来控制该改变的样式即可。 1.CSS 来实现响应式 CSS实现响应式网站的布局要用到的就是CSS中的媒体查询接下来来简单介绍一下： @media 类型 and (条件1) and (条件二){css样式} 我们只需用到widt...

OBKoro1 2019-08-02 11:00 评论0 收藏0
Web移动端页面 --响应式和动态REM

摘要：当媒介最大宽度为且是横屏时里面的样式生效目前前端开发项目类型可以分为两种方式，和。这样我们的响应式网页才完全生效了。移动端特点移动端特点没有有没有滚动条没有没有因为移动端是没有事件的所以当我们在需要兼容移动端的页面中应该尽量少用事件。鄙人最近才刚刚开始学习一些关于移动端的知识，还只是个小白，文中可能有许多理解错误，望指出，请多多见谅。响应式什么是响应式页面呢？顾名思义响应式页面就是能做...

BLUE 2019-04-23 13:44 评论0 收藏0
面试前端时遇到的CSS题目

摘要：昨天面试了本地的一家公司，面试的前端。行内元素，不可设置宽高其实正确答案应该是设置无效，单行显示直到一行排列不下，才会换新一行。头部有固定的高度像素，内容容器是像素而侧边栏是像素。它根据条件告诉浏览器如何为指定视图宽度渲染页面。昨天面试了本地的一家公司，面试的Web 前端。题目共有CSS和JS两部分，因为我对于CSS不是很熟悉，所以这里就只列出CSS相关的笔试题，仅供学习。盒模型的...

kycool 2019-08-29 12:18 评论0 收藏0
css相关 - 收藏集 - 掘金

摘要：在正式前端一些小细节前端掘金英文原文，翻译未来的太让人兴奋了一方面，是全新的页面布局方式另一方面，是酷炫的滤镜颜色等视觉效果。老司机教你更好的进行编程个技巧前端掘金并不总是容易处理。 CSS3 实现文字流光渐变动画 - 前端 - 掘金来自百度前端技术学院的实践任务：有趣的鼠标悬浮模糊效果，参考：http://ife.baidu.com/course/d...，用CSS3实现了一下，顺便...

molyzzx 2019-08-29 12:38 评论0 收藏0
响应式布局设计

摘要：详细讲解响应式布局响应式设计网格系统响应式实用工具响应式设计的步骤设置标签通过媒介查询来设置样式设置多种试图宽度设置标签大多数移动浏览器将页面放大为宽的视图以符合屏幕分辨率。详细讲解响应式布局Bootstrap 响应式设计Bootstrap 网格系统Bootstrap 响应式实用工具响应式设计的步骤设置 Meta 标签通过媒介查询来设置样式 Media Queries 设置多...

Drinkey 2019-08-29 15:04 评论0 收藏0