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. 图论——图的邻接表实现——Java语言（完整demo）

    1.图的简单实现方法——邻接矩阵 表示图的一种简单的方法是使用一个一维数组和一个二维数组,称为领接矩阵(adjacent matrix)表示法. 对于每条边(u,v),置A[u,v]等于true:否则 ...

  2. iOS即时通讯之CocoaAsyncSocket源码解析五

    接上篇:iOS即时通讯之CocoaAsyncSocket源码解析四         原文 前言: 本文为CocoaAsyncSocket Read篇终,将重点涉及该框架是如何利用缓冲区对数据进行读取. ...

  3. easyui表格适应bootstrap

    .panel1 { overflow: hidden; text-align: left; margin:; border:; -moz-border-radius: 0 0 0 0; -webkit ...

  4. 关于问题的四个单词区别: question problem matter issue

    [[ 网上讨论的 problem, question, issue, matter这些名词均含"问题"之意.problem: 指客观上存在的.难以处理或难以理解的问题.questi ...

  5. PHP版本问题

    PHP 5.3以下版本 无法用下标直接取得函数返回的数组 eg: $val_0 = explode(',', $val)[0]//报错 #要改成: $exploded_val = explode(', ...

  6. postman使用小结

    需要权限验证: cookie就是存在本地的键值对,session存在服务器端的键值对 上传文件: form_data选择file ,输入传入的参数

  7. 【MongoDB】 windows下建立双机主从

    [双机配置] 服务端: 两台 Dell R730 双路E5 服务器 使用一个内网环境,网段20, ping 测试互通 主服ip: 192.168.20.176: 27017 从服ip: 192.168 ...

  8. idea创建maven中的 jar、war、 pom项目

    我用的是:2019.1版本的idea 创建maven项目时候的选项: 1: 2: 3:之后的步骤都一样按照自己的来就行

  9. oracle--ORA常见报错

    常见错误地址 http://ora-12xyz.com/error/ora-01911 ORA-01034和ORA-27101的解决办法 出现ORA-01034和ORA-27101的原因是多方面的:主 ...

  10. <每日一题> Day5：简单递推两题

    原题链接 参考代码: #include <iostream> using namespace std; typedef long long ll; + ; ll dp[maxn]; int ...