@media自适应宽度
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>css3-media-queries-demo</title>
<style>
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
padding: 0;
margin: 0;
}
.content{
zoom:1;
}
.content:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.leftBox, .rightBox{
float: left;
width: 20%;
height: 500px;
margin: 5px;
background: #ffccf7;
display: inline;
-webkit-transition: width 1s ease;
-moz-transition: width 1s ease;
-o-transition: width 1s ease;
-ms-transition: width 2s ease;
transition: width 1s ease;
}
.middleBox{
float: left;
width: 50%;
height: 800px;
margin: 5px;
background: #b1fffc;
display: inline;
-webkit-transition: width 1s ease;
-moz-transition: width 1s ease;
-o-transition: width 1s ease;
-ms-transition: width 1s ease;
transition: width 1s ease;
}
.rightBox{
background: #fffab1;
}
@media only screen and (min-width: 1024px){
.content{
width: 1000px;
margin: auto
}
}
@media only screen and (min-width: 400px) and (max-width: 1024px){
.rightBox{
width: 0;
}
.leftBox{ width: 30%}
.middleBox{ width: 65%}
}
@media only screen and (max-width: 400px){
.leftBox, .rightBox, .middleBox{
width: 98%;
height: 200px;
}
}
</style>
</head> <body>
<div class="content">
<div class="leftBox"></div>
<div class="middleBox"></div>
<div class="rightBox"></div>
</div>
</body>
</html>
@media自适应宽度的更多相关文章
- 从三栏自适应宽度布局到css布局的讨论
如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就 ...
- UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案
UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效 ...
- JS实现自适应宽度的Tag切换
效果体验:http://hovertree.com/texiao/js/3.htm 该效果使用纯JavaScript代码,实现TAB页切换效果,TAB标签根据内容自适应宽度,点击TAB标签切换内容页. ...
- RelativeLayout中的格局,自适应宽度布局
RelativeLayout中的布局,自适应宽度布局 该图片中为android布局:总布局为 RelativeLayoutAtLeft 为居左 <TextView android:backgro ...
- Qt的tablewidget行列头自适应宽度
Qt构造一个TableWidget后,窗口最大化后,列头默认不能自适应宽度,研究了一下,Qt提供了两种方式来处理这个问题,如下: 1. 使用horizontalHeader()->setRe ...
- [Winform]DataGridView列自适应宽度
引言 在做winform项目中,数据控件DataGridView的使用多多少少是会用到的,如果不设置它的属性,默认情况下是不会自适应宽度的,你想查看某项的数据,就不得不将标题栏拖来拖去,挺烦的. 方法 ...
- ASP.NET实例——漂亮的自适应宽度的导航条(仿Discuz!)
PHP比较成熟的开放的源代码比较多,比方说PrestaShop,比方说Discuz!...... 虽然语言不同,但基本原理是一样的,有时间的话读一读,对学习ASP.NET应该是非常有好处的(唉,什么时 ...
- 漂亮的自适应宽度的多色彩CSS图片按钮
一.素材 二.效果 三.CSS *{padding:0;margin:0} /*----------------------------------- 自适应宽度图片按钮 ...
- CSS 圣杯布局升级版---多个固定宽度一个自适应宽度
1.一个div固定,一个div自适应宽度.两种情况,固定在左或者在右. HTML: <div class="box1"> <div class="mai ...
随机推荐
- Java EE开发平台随手记5——Mybatis动态代理接口方式的原生用法
为了说明后续的Mybatis扩展,插播一篇广告,先来简要说明一下Mybatis的一种原生用法,不过先声明:下面说的只是Mybatis的其中一种用法,如需要更深入了解Mybatis,请参考官方文档,或者 ...
- ng-表单验证
表单验证<AngularJs> 常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type ...
- Bourbon – 简单轻量的 Sass 混入(Mixins)库
Bourbon 是一个简单易用的 Sass 混入(Mixin)库,无需配置.该混入包含用于支持所有现代浏览器的 CSS3 属性前缀.前缀需要确保在旧的浏览器支持优雅降级.Bourbon 使用 SCSS ...
- 决战JS(二)
紧接着上次的<决战JS>,分析总结一些比较实用的DEMO与新手分享,望大神拍砖. demo5.点击隐藏: 要实现这个功能只需要知道在onclick事件中加入对父节点的样式dislay设置为 ...
- REST API出错响应的设计
REST API应用很多,一方面提供公共API的平台越来越多,比如微博.微信等:一方面移动应用盛行,为Web端.Android端.IOS端.PC端,搭建一个统一的后台,以REST API的形式提供服务 ...
- Android 网络通信API的选择和实现实例
Android开发网络通信一开始的时候使用的是AsyncTask封装HttpClient,没有使用原生的HttpURLConnection就跳到了Volley,随着OkHttp的流行又开始迁移到OkH ...
- Windows Azure Cloud Service (11) PaaS之Web Role, Worker Role(上)
<Windows Azure Platform 系列文章目录> 本文是对Windows Azure Platform (六) Windows Azure应用程序运行环境内容的补充. 我们知 ...
- java字符编码和oracle乱码
编码问题我仍旧没搞懂,最根本的从哪里来就没搞懂.当页面发送请求,编码到后台是什么编码呢?好吧,我默认的都是utf-8.后台接收参数后,可以在控制台打印出来,我也不清楚是什么编码.然后,就是数据库问题. ...
- installshield生成时提示6003错误的一种可能
因为项目需要,2014年写过的一个老项目需要重新打包.开发电脑换了,原来开发的系统是win7,现在已经升到了win10.而且原来使用installshield limited 2013开发的打包项目已 ...
- 使用Uploadify(UploadiFive)多文件上传控件遇到的坑
最近项目中需要实现多文件上传功能,于是结合需求最终选择了Uploadify这一款控件来实现.相比其他控件,Uploadify具有简洁的界面,功能API基本可以解决大多数需求,又是基于jquery的,配 ...