媒介查询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 ...
随机推荐
- 《SaltStack技术入门与实践》—— Job管理
Job管理 本章节参考<SaltStack技术入门与实践>,感谢该书作者: 刘继伟.沈灿.赵舜东 在SaltStack里面执行任何一个操作都会在Master上产生一个jid号.Minion ...
- table表格 td设置固定宽度
table宽度自适应,而且部分TD是固定宽度. 只需要将固定宽设死,留下一列不设置宽度,将table宽度设置为100%. table-layout:fixed 作用不是很清楚 <table wi ...
- 【leetcode】848. Shifting Letters
题目如下: 解题思路:本题首先要很快速的计算出任意一个字符shift后会变成哪个字符,其实也很简单,让shift = shift % 26,接下来再做计算.第二部是求出每个字符要shift的次数.可以 ...
- 前端面试题常考&必考之--清除浮动的方法
浮动 问题:子元素设置了float后,脱离父元素,导致父元素无法撑开?(也就是子元素的高度没有过渡到父元素) 例子: 检查元素的效果: (三种)常用的解决办法: 1>额外标签法,添加一个空的di ...
- React Native 中 跨页面间通信解决方案之 react-native-event-bus
https://github.com/crazycodeboy/react-native-event-bus 用法: A页面和B页面中都有相同的列表,点击B页面中的收藏按钮,A页面会跟着更新 impo ...
- JS中的执行机制（setTimeout、setInterval、promise、宏任务、微任务）
1.执行机制 JS 是单线程的,处理 JS 任务(程序)只能一个一个顺序执行,所以 JS 中就把任务分为了同步任务和异步任务.同步的进入主线程先执行,异步的进入Event Table并注册函数,当指定 ...
- PHP超大文件上传与下载
前段时间做视频上传业务,通过网页上传视频到服务器. 视频大小 小则几十M,大则 1G+,以一般的HTTP请求发送数据的方式的话,会遇到的问题:1,文件过大,超出服务端的请求大小限制:2,请求时间过长, ...
- BigDecimal.setScale 处理java小数点[转]
BigDecimal.setScale()方法用于格式化小数点setScale(1)表示保留一位小数,默认用四舍五入方式 setScale(1,BigDecimal.ROUND_DOWN)直接删除多余 ...
- sqlserver控制台-添加用户
1.右键新建登陆名 2. 常规选项 3.服务器角色 4.用户映射
- 解决ios和Android的差异
第一个:input,button input标签在 android系统不带圆角,在ios系统上带圆角 解决办法: input,button{ -webkit-appearance:none; } 第二 ...