<!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. linux如何启动/停止/重启MySQL

    如何启动/停止/重启MySQL 一.启动方式 1.使用 service 启动:service mysqld start2.使用 mysqld 脚本启动:/etc/inint.d/mysqld star ...

  2. 【docker】查看docker镜像的版本号TAG，从远程仓库拉取自己想要版本的镜像

    要想查看镜像的版本好TAG,需要在docker hub查看 地址如下:https://hub.docker.com/r/library/ 进入之后,在页面左上角搜索框搜索, 例如搜索redis 搜索完 ...

  3. 用coffeescript实现类java的Map类

    class Map constructor : -> @entry = {} @count = 0 size : -> return @count isEmpty : -> retu ...

  4. 【angularJS】三个学习angulaJS的链接

    1.官方文档:https://code.angularjs.org/1.5.7/docs/api 2.A Better Way to Learn AngularJS:https://thinkster ...

  5. Scala 将BigDecimal转换为Long

    待转换.asInstanceOf[Number].longValue (Double转为Long也适用)

  6. MyEclipse图表工具Birt的使用技巧（三）--连接webservice数据源

    Web Services 技术是一套标准.它定义了应用程序怎样在Web上实现互操作. 用户能够使用不论什么语言.在不同的平台下编写Web Services.然后通过Web Services 的标准来对 ...

  7. 【DB2】对两列分组之后判断另外一列是否有重复

    建立表数据如下: ),sex ),sex_nm ),OWER ),TYPE ),TYPE_NM )); ,','水果'), (,','水果'), (,','水果'), (,','水果'), (,',' ...

  8. Visual studio C++ MFC之Menu editor

    背景 本篇旨在MSDN帮助文档下总结Menu editor的使用,并列出碰到的具体问题. 正文 创建Menu Editor 打开链接MSDN之Creating a Menu.按照文档的方法创建Menu ...

  9. 神奇的canvas——巧用 canvas 为图片添加水印

    代码地址如下:http://www.demodashi.com/demo/11637.html 很久之前写过一篇关于 canvas 的文章,是通过 canvas 来实现一个绚丽的动画效果,不管看过没看 ...

  10. 04-1下载Win系统（装机助理）

    下载Win系统(装机助理): http://www.zhuangjizhuli.com/upan.html http://www.krlxx.com/64win7.html 选择你需要安装的系统: 以 ...