<!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. Ubuntu14中supervisor的安装及配置

    supervisor是一款很好用的进程管理工具,其命令也很简单,其安装过程如下: Ubuntu14: 首先保证本地的Python环境是OK的,并且已经安装supervisor包,如果没有安装可以用ea ...

  2. 一次意外的X锁不阻塞问题

        最近有一个朋友问我一个关于给查询操作强制上X锁却不阻塞的问题.该查询写在一个存储过程中,代码如代码1所示: 1: create PROC [dbo].[GetCityOrders] 2: @c ...

  3. 牛刀小试：使用Reactive Extensions（Rx），对短时间内多次发生的事件限流

    我之前有一篇文章介绍到了Reactive Extension这个组件,请参考下面的文章,其中有一些基本的概念和相关的链接 牛刀小试:使用Reactive Extensions(Rx),一行代码实现多线 ...

  4. 算法与数据结构(2)--英雄会第三届在线编程大赛：几个bing

    基础知识的回顾不再写到这里面了,会写一些算法算法的解答或者读一些相关书籍的笔记. 今天做了一道算法题,来自微软必应·英雄会第三届在线编程大赛:几个bing? 做出来了...但不知道为啥执行测试用例失败 ...

  5. c#事件与委托

    C#.net 目录(?)[-] 将方法作为方法的参数 将方法绑定到委托 事件的由来 事件和委托的编译代码 委托事件与Observer设计模式 范例说明 Observer设计模式简介 实现范例的Obse ...

  6. ButterKnife--View注入框架

    俗话说,不会偷懒的程序员不是好程序员!作为一名Android的开发者,我们已经厌烦了经常写大量的findViewById以及setOnClickListener代码.而ButterKnife是一个专注 ...

  7. HT for Web基于HTML5的图像操作（一）

    HT for Web独创的矢量图片设计架构,使其具有强大丰富的动态图形呈现能力,但从最近知乎热议的“Adobe Photoshop 是否已经过时?”的话题,大家能体会到很多情况下实际项目不可能完全采用 ...

  8. 自定义视图引擎，实现MVC主题快速切换

    一个网站的主题包括布局,色调,内容展示等,每种主题在某些方面应该或多或少不一样的,否则就不能称之为不同的主题了.每一个网站至少都有一个主题,我这里称之为默认主题,也就是我们平常开发设计网站时的一个固定 ...

  9. CSS魔法堂：再次认识font

    一.前言 文字承载着站点内涵,而良好的字体.排版则为用户提供舒适的阅读体验.本文打算对字体稍微深入一下子网页字体的内容,若有纰漏请大家指正,谢谢! 目录一坨: 二, 字体分类 1. 衬线体(Serif ...

  10. SqlCommandBuilder实现大数据更新

    /// <param name="table">准备更新的DataTable新数据</param> /// <param name="Tab ...