1.CSS 来实现响应式

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

  • @media 类型 and (条件1) and (条件二){css样式}
  • <link rel="stylesheet" type="text/css" href="css/demo.css" media=“all and (max-width=980px)”/>

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

<!doctype html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>响应式</title>

    <link rel="stylesheet" type="text/css" href="demo01.css" media="screen and (min-width:1024px)"/>

    <link rel="stylesheet" type="text/css" href="demo03.css" media="screen and (max-width:1024px) and (min-width:450px)"/>

    <link rel="stylesheet" type="text/css" href="demo02.css" media="screen and (max-width:450px)"/>

</head>

<body>

    <div class="header">

        头部

    </div>

    <div class="container clearfix">

        <div class="left">左部</div>

        <div class="center">中部</div>

        <div class="right">右部</div>

    </div>

    <div class="footer">底部</div>

</body>

</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三部分竖直排列显示，若窗口持续缩小，不在发生变化，区域被压缩

效果总图：

持续更新，欢迎大家！

css 响应式（媒介查询）的更多相关文章

  1. (原)css 响应式媒体查询 模板

    @media only screen and (max-width:340px) { html,input{ font-size:80%; } } @media only screen and (ma ...

  2. CSS响应式布局到底是什么？

    响应式布局是最近几年在前端开发中非常火热的词,它是相对于固定像素大小的网页而言的,那么CSS响应式布局到底是什么?顾名思义,响应式布局就是网页能够响应各种各样不同分辨率大小的设备,能够将网页很好的呈献 ...

  3. css - 响应式

    css - 响应式 移动设备尺寸 移动设备的尺寸各不相同,大体上可以做如下划分: 768px以下的是手机屏幕 768px-991px是平板ipad屏幕 992px-1199是大平板屏幕 1200极其以 ...

  4. html响应式布局，css响应式布局，响应式布局入门

    html响应式布局,css响应式布局,响应式布局入门 >>>>>>>>>>>>>>>>>>& ...

  5. Bulma CSS - 响应式

    Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式 Bulma是一 ...

  6. css响应式布局RWD

    响应式布局结合了三大理念: 1)用于布局的弹性网络(百分比定义宽度) 2)用于图片和视频的弹性媒体 3)媒体查询 在布局中,需要注意的点有: 1)尽量用min-width/max-width,max- ...

  7. CSS 响应式设计

    响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...

  8. Bootstrap的介绍和响应式媒体查询

    Bootstrap的介绍 凡是使用过Bootstrap的开发者,都不在乎做这么两件事情:复制and粘贴.哈哈~,是的使用Bootstrap非常简单,但是在复制粘贴之前,需要先对Bootstrap的用法 ...

  9. css响应式设计

    响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...

随机推荐

  1. 单页应用 cookies处理

    w Node & 单页应用 来做一个完整用户系统吧! - harryfyodor的前端专栏 - SegmentFaulthttps://segmentfault.com/a/119000000 ...

  2. 如何吸引用户打开自己发送的EDM邮件

    一般来说,邮件发送到用户的收件箱,但用户不一定会阅读.因为每个用户收到的邮件都很多.那么,究竟应该如何吸引读者打开自己的EDM邮件呢? 只有当用户认识并信任发件人的时候,此时邮件的打开率是最高的,可以 ...

  3. DRF的路由生成类的使用

    DRF路由生成类的使用 对于视图集ViewSet,我们除了可以自己手动指明请求方式与动作action之间的对应关系外,还可以使用Routers来帮助我们快速实现路由信息. REST framework ...

  4. 001-spring boot概述与课程概要

    一.Spring Boot介绍 Spring Boot的目的在于创建和启动新的基于spring框架的项目.Spring boot会选择最适合的Spring 子项目和第三方开源库进行整合.大部分Spri ...

  5. 从 spring-cloud-alibaba-nacos-config 进入 nacos-client

    sc 的 bootstrap context 是 main application context 的 parent,需要在 main application context 中使用的 bean 可以 ...

  6. 查询SQL Server数据库所有表字段备注

    SELECT 表名 = case when a.colorder=1 then d.name else '' end, 表说明 = case when a.colorder=1 then isnull ...

  7. 001/Docker入门（Mooc）

    docker官网:https://www.docker.com/ 1.什么是docker 2.Docker思想     ==> [1].集装箱:保证程序完整(不缺东西,如配置文件等). [2]. ...

  8. Linq查询语法(1)

    转:http://www.cnblogs.com/ahao214/archive/2013/01/22/2871044.html LINQ的基本格式如下所示:var <变量> = from ...

  9. 前端 CSS 盒子模型

    盒模型的概念 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和I ...

  10. Java相关面试题总结+答案（十）

    [JVM] 194. 说一下 JVM 的主要组成部分?及其作用? 类加载器(ClassLoader) 运行时数据区(Runtime Data Area) 执行引擎(Execution Engine) ...