媒介查询demo
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒介查询</title>
<style>
*{
margin:0;
padding:0;
}
#container{
width:100%;
height: 500px;
background: pink;
} /* 小于500px*/
@media only screen and (max-width:500px ) {
/*小于500时布局的样式控制开始*/
#a,#b,#c{
float:none;
}
#a{
background: red;
width:100%;
height: 500px;
}
#b{
background: yellow;
width:100%;
height: 500px;
}
#c{
width:100%;
height: 500px;
background: blue;
}
/*小于500时布局的样式控制结束*/
}
/* 大于500px*/
@media only screen and (min-width:500px ) {
/*小于500时布局的样式控制开始*/
#a,#b,#c{
float:left;
}
#a{
background: red;
width:33.3%;
height: 500px;
}
#b{
background: yellow;
width:33.3%;
height: 500px;
}
#c{
width:33.3%;
height: 500px;
background: blue;
}
/*小于500时布局的样式控制结束*/
}
</style>
</head>
<body>
<div id="container">
<div id="a">我是第一块</div>
<div id="b">我是第二块</div>
<div id="c">我是第三块</div>
</div> </body>
</html> <!--
http://www.jb51.net/css/475563.html css3 media 响应式布局实例
-->
媒介查询demo的更多相关文章
- HTML5移动Web开发（五）——移动设计之CSS媒介查询
CSS媒介查询(media query)是响应式设计中很重要的部分,它帮助你实现更加灵活的移动设计. 看示例代码ch01r06_c.html <!doctype html> <htm ...
- IOS CoreData 多表查询demo解析
在IOS CoreData中,多表查询上相对来说,没有SQL直观,但CoreData的功能还是可以完成相关操作的. 下面使用CoreData进行关系数据库的表与表之间的关系演示.生成CoreData和 ...
- 关于网页的自适应问题一---Media Query（媒介查询）
1.Media Query(媒介查询) 通过不同的媒介类型和条件定义样式表规则.媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件.媒介查询的大部分媒介特性都接受min和max用于表达 ...
- css3媒介查询使用规则小结
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用大势所趋来形容也不为过. 用一句话来说:使用同一套Html代码来适配不同设备和满足不同场景不同用户 ...
- css3_媒介查询
!!!做媒介查询页面大小时,一定要加: <meta name="viewport" content="width=device-width, initial-sca ...
- H5天气查询demo（二）
最近刚好有空,学长帮忙让做个毕设,于是我提到了那个基于H5地理位置实现天气查询的方法,学长听了也觉得不错,于是就这个主题,扩展了一下,做了一个航班管理查询系统,为上次博客中提到的利用H5 api中的经 ...
- 【SSH系列】一步步深入springmvc+商品列表查询demo
在前面的博文中,小编主要简单的介绍springmvc的体系结构.mvc模式的优缺点以及mvc框架,今天我们来继续学习springmvc的相关知识,在这篇博文中,小编讲解过springmvc的体系结构, ...
- MVC之查询demo
上篇已经说过怎样建立MVC项目.这次主要讲述样例的实现. 其基本的功能就是从数据库中查询一些基本信息. 前边我们已经将实体引入到了项目中,这时Model目录中已经出现了我们建立的newsSystem. ...
- css 响应式（媒介查询）
1.CSS 来实现响应式 CSS实现响应式网站的布局要用到的就是CSS中的媒体查询接下来来简单介绍一下: @media 类型 and (条件1) and (条件二){css样式} <link r ...
随机推荐
- Linux发行版和内核版本
1./etc/issue 和 /etc/redhat-release都是系统安装时默认的发行版本信息,通常安装好系统后文件内容不会发生变化. 2.lsb_release -a :FSG(Free St ...
- 使用layui iframe弹层,各弹层之前的传值问题
最近做一个后台管理系统,用到的layui,主要是使用它的弹层,但是各个弹层之前的传值经常容易搞晕,写个个博客记录一下,方便自己,也方便别人, 首先我的页面已经嵌套了好几个iframe页面了,嵌套了三个 ...
- LeetCode--062--不同路径(python)
一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为“Start” ). 机器人每次只能向下或者向右移动一步.机器人试图达到网格的右下角(在下图中标记为“Finish”). 问总共有多 ...
- Quick BI的宝藏工具——交叉表
对于普通的表格展示数据,相信大家都非常熟悉了,今天给大家介绍的是BI领域的分析利器-交叉表,这个在BI分析场景中使用占比最多的分析利器.通过交叉表对数据的承载和管理,用户可以一目了然地分析出各种场景指 ...
- mysql UNIQUE约束 语法
mysql UNIQUE约束 语法 作用:UNIQUE 约束唯一标识数据库表中的每条记录. 江苏大理石平台 说明:UNIQUE 和 PRIMARY KEY 约束均为列或列集合提供了唯一性的保证.PRI ...
- 2017南宁网络赛 Problem J Minimum Distance in a Star Graph ( 模拟 )
题意 : 乱七八糟说了一大堆,实际上就是问你从一个序列到另个序列最少经过多少步的变化,每一次变化只能取序列的任意一个元素去和首元素互换 分析 : 由于只能和第一个元素去互换这种操作,所以没啥最优的特别 ...
- OpenCV feature2d
/*M/////////////////////////////////////////////////////////////////////////////////////// // // IMP ...
- Qt android 配置
http://www.cnblogs.com/ztzheng/p/3703716.html
- [ethereum源码分析](1) dubug环境搭建
前言 因为最近云小哥哥换了一份工作,新公司比较忙,所以一直没有更新新的博客.云小哥哥新的公司是做区块链的,最近在学习区块链相关的东西(也算是乘坐上了区块链这艘大船).本博客是记录我搭建ethereum ...
- After laptop installed fedora23
en_US.UTF-8和 zh_CN.UTF-8 en和zh是语言, US和CN是分地区. 两者的编码UTF-8都差不多.只是用语言环境来表示时间, 数字, 温度等的不同 自定义程序快捷键: 在选中条 ...