<!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自适应宽度的更多相关文章

  1. 从三栏自适应宽度布局到css布局的讨论

    如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就 ...

  2. UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案

    UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效 ...

  3. JS实现自适应宽度的Tag切换

    效果体验:http://hovertree.com/texiao/js/3.htm 该效果使用纯JavaScript代码,实现TAB页切换效果,TAB标签根据内容自适应宽度,点击TAB标签切换内容页. ...

  4. RelativeLayout中的格局，自适应宽度布局

    RelativeLayout中的布局,自适应宽度布局 该图片中为android布局:总布局为 RelativeLayoutAtLeft 为居左 <TextView android:backgro ...

  5. Qt的tablewidget行列头自适应宽度

    Qt构造一个TableWidget后,窗口最大化后,列头默认不能自适应宽度,研究了一下,Qt提供了两种方式来处理这个问题,如下:   1. 使用horizontalHeader()->setRe ...

  6. [Winform]DataGridView列自适应宽度

    引言 在做winform项目中,数据控件DataGridView的使用多多少少是会用到的,如果不设置它的属性,默认情况下是不会自适应宽度的,你想查看某项的数据,就不得不将标题栏拖来拖去,挺烦的. 方法 ...

  7. ASP.NET实例——漂亮的自适应宽度的导航条（仿Discuz!）

    PHP比较成熟的开放的源代码比较多,比方说PrestaShop,比方说Discuz!...... 虽然语言不同,但基本原理是一样的,有时间的话读一读,对学习ASP.NET应该是非常有好处的(唉,什么时 ...

  8. 漂亮的自适应宽度的多色彩CSS图片按钮

    一.素材               二.效果 三.CSS *{padding:0;margin:0} /*----------------------------------- 自适应宽度图片按钮 ...

  9. CSS 圣杯布局升级版---多个固定宽度一个自适应宽度

    1.一个div固定,一个div自适应宽度.两种情况,固定在左或者在右. HTML: <div class="box1"> <div class="mai ...

随机推荐

  1. js高程读书笔记（1-3章）

    一.js简介 js是一种专为与网页交互而设计的脚本语言,由以下三个不同的部分组成: 1.ECMAScript,由ECMA-262(它规定了语言的这些组成部分:语法,类型,语句,关键字,保留字,操作符, ...

  2. silverlight中 Storyboard(动画)的使用，实现球的上下循环移动，左右移动，及旋转功能

    话说,总结应该是个收获的心情,可现在的自己似乎没感觉到哪个喜悦的心情,说明自己做得还不够好,现在还是把一些做好的东西总结下.“总结”是学习,工作中必须的,不能偷这个懒 o(╯□╰)o 实现上下循环移动 ...

  3. Netbeans 中创建数据连接池和数据源步骤（及解决无法ping通问题）

    1.启动glassfish服务器, 在浏览器的地址栏中输入 http://localhost:4848 2.首先建立JDBC Connection Pools: 3.new 一个Connectio P ...

  4. tomcat架构之-----基本概念

    一直都没有搞明白tomcat中server.service.Engine.Host.Context概念的意义,最近认真看了<Tomcat 6 Developer Guide>,有了进一步的 ...

  5. 面试题目: PHP 有哪些优缺点？

    当面试官噼里啪啦的问你一大堆问题后,突然问你,PHP有哪些优缺点?你蒙了没? 反正我是蒙了,不管你信不信! 现在,关于PHP优缺点,大致的说几点: 1.  语法简单的,上手很快,而且还有很多很便捷的开 ...

  6. [转载]Office Visio快捷键

    “帮助”任务窗格和“帮助”窗口 使用“帮助”任务窗格和“帮助”窗口 通过“帮助”任务窗格,您可以访问“Microsoft Office Visio 帮助”的全部内容,该窗格显示为 Microsoft ...

  7. （斐波那契总结）Write a method to generate the nth Fibonacci number (CC150 8.1)

    根据CC150的解决方式和Introduction to Java programming总结: 使用了两种方式,递归和迭代 CC150提供的代码比较简洁,不过某些细节需要分析. 现在直接运行代码,输 ...

  8. java基础题目总结

    有些基础题目由于工作中用的比较少但却又是不可少的,这样回答起来就会反应慢,不确定,不准确,特此开了文章记录遇到的不确定或者回答比较拗口的问题. 1.servlet是单例的吗,是安全的吗,是多线程吗 s ...

  9. 加速Web开发的9款知名HTML5框架

    与手工编码比起来,HTML5框架在准确性和正确率方面给予了保证.大多数HTML5框架都会有一个组合或者包含一些额外的组件,比如jQuery Scripts.CSS3样式表则以改善多媒体特征的功能性和响 ...

  10. 基于HTML5 WebGL实现3D飞机叶轮旋转

    在上一篇<基于HT for Web矢量实现2D叶轮旋转>中讲述了叶轮旋转在2D拓扑上的应用,今天我们就来讲讲叶轮旋转在3D上的应用. 在3D拓扑上可以创建各种各样的图元,在HT for W ...