<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>改变浏览器宽度实现DIV布局宽度改变 案例在线演示 DIVCSS5</title>

<style>

.abc{ height:300px; border:1px solid #000; margin:0 auto}

@media screen and (min-width: 1201px) {

  .abc {width: 1200px}

  }

/* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */

@media screen and (max-width: 1200px) {

  .abc {width: 900px}

  }

/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */

@media screen and (max-width: 900px) {

  .abc {width: 200px;}

    }

/* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */

@media screen and (max-width: 500px) {

  .abc {width: 100px;}

    }

/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */

</style>

 <!--[if lt IE 9]>

<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

<![endif]-->

</head>

<body>

<div class="abc"><a href="http://www.divcss5.com/" target="_blank">DIVCSS5</a>实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度</div>

<p>返回 <a href="http://www.divcss5.com/jiqiao/j662.shtml">css实现分辨率浏览器宽度改变网页布局宽度</a>：<a href="http://www.divcss5.com/jiqiao/j662.shtml">http://www.divcss5.com/jiqiao/j662.shtml</a></p>

</body>

</html>

根据分辨率改变宽度 demo的更多相关文章

  1. C#根据屏幕分辨率改变图片尺寸

    最近工作中遇到一个问题,就是需要将程序文件夹中的图片根据此时电脑屏幕的分辨率来重新改变图片尺寸 以下为代码实现过程: 1.获取文件夹中的图片,此文件夹名为exe程序同目录下 //读取文件夹中文件 Di ...

  2. extjs grid禁止表格头部使用鼠标拖拽改变宽度

    extjs6 经典版 表格头部使用鼠标拖动 禁止改变列的宽度 只需要给grid 设置属性enableColumnResize:false就可以啦 xtype:'grid', enableColumnR ...

  3. 利用CSS3中的clac()实现按照屏幕分辨率自适应宽度

    1.简介 calc()看其外表像个函数.平时在制作页面的时候,总会碰到有的元素是100%的宽度(例如body元素).如果元素宽度为100%时,其自身不带其他盒模型属性设置还好,要是有别的,那将导致盒子 ...

  4. jQuery实现类似Chrome控制台可拖拽改变宽度的样式

    最近项目进程紧张,没法再愉快的网上冲浪了 因为项目需要实现一个页面上可拖拽改变div宽度的功能,类似效果如Chrome的右侧调试台样式: 大概思路为: 1.使用mousemove()方法,将鼠标的位置 ...

  5. JS根据屏幕分辨率改变背景宽高

    //控制浏览器显示的高宽 function document_loaded() { GotoMainStep(); /; document.getElementById("main1&quo ...

  6. table可拖拽改变宽度

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 图片_ _Android--加载大分辨率图片到内存

    http://www.cnblogs.com/plokmju/p/android_LoadBigImage.html#3084005 前言 在使用ImageView显示图片的时候,直接加载一个图片资源 ...

  8. Unity3D NGUI自适应屏幕分辨率（2014/4/17更新）

    原地址:http://blog.csdn.net/asd237241291/article/details/8126619 原创文章如需转载请注明:转载自 脱莫柔Unity3D学习之旅 本文链接地址: ...

  9. Swift基础之实现下拉变大和OC下拉变大上拉缩小Demo

    Swift语言实现下拉变大效果:(上拉缩小效果随后研究......) 关键代码:方法一: self.automaticallyAdjustsScrollViewInsets = false;      ...

随机推荐

  1. 使用ReadOnlyCollection创建只读集合

    转载:http://www.cnblogs.com/abatei/archive/2008/02/04/1064102.html 使用泛型创建只读集合 问题 您希望类中的一个集合里的信息可以被外界访问 ...

  2. 事务的实现就是利用数据库锁（行锁，表锁等），且db上锁，都是在操作之前上锁

    悲观锁(Pessimistic Lock), 顾名思义,就是很悲观,每次去拿数据的时候都认为别人会修改,所以每次在拿数据的时候都会上锁,这样别人想拿这个数据就会block直到它拿到锁.传统的关系型数据 ...

  3. Docker实践3: Docker常用命令(未完)

    查看容器及运行进程 docker ps 查看容器内部信息 docker inspect container_id 进入容器 docker attach container_id 退出容器 docker ...

  4. Druid对比Cassandra

    不是Cassandra专家, 如果描绘有错误, 请通过邮件列表或者其他方式告知, 我们会修正. Druid对扫描和聚合做了很大程度的优化, 不用提前计算就支持任意的向下钻取, 还可以实时摄入流式数据并 ...

  5. Android动态载入Dex机制解析

    1.什么是类载入器? 类载入器(class loader)是 Java™中的一个非常重要的概念.类载入器负责载入 Java 类的字节代码到 Java 虚拟机中. Java 虚拟机使用 Java 类的方 ...

  6. 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-人机界面HMI自锁按钮和自复位按钮如何理解（Toggle variable Tap variable）

    我分别创建两个按钮,自锁和自复位,绑定到主程序的两个布尔值上去   自锁按钮是指点击一下为TRUE,再点击一下为FALSE,自复位按钮是指按下的时候为TRUE,松开的时候为FALSE(也可以勾选Tap ...

  7. ubuntu14.10环境下使用apache2.2配置代理服务器

    参考网址: 使用Apache架设代理服务器 ubuntu之apache正向代理及反向代理(ProxyPass\ProxyPassReverse) Apache配置正向代理与反向代理 我的配置步骤: 1 ...

  8. UIScreenAdaptive

    using UnityEngine; namespace Com.Xyz.UI { [ExecuteInEditMode] [RequireComponent(typeof(UIRoot))] pub ...

  9. Python——@property属性描述符

    @property 可以将python定义的函数“当做”属性访问,从而提供更加友好访问方式,但是有时候setter/getter也是需要的 假设定义了一个类Cls,该类必须继承自object类,有一私 ...

  10. 【DB2】国标行业分类存储，通过SQL查询出层级关系

    新建表 DROP TABLE Industry; CREATE TABLE Industry( IndustryCode VARCHAR(40),IndustryName VARCHAR(100),P ...