css判断不同分辨率显示不同宽度布局实现自适应宽度&css3 @media样式的使用

最新推荐文章于 2024-08-01 14:29:05 发布

霄永梓

最新推荐文章于 2024-08-01 14:29:05 发布

阅读量4.8w

点赞数 6

分类专栏： ---------【CSS】 ---------【html】文章标签： css3 media 自适应

---------【html】同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

---------【CSS】

6 篇文章 0 订阅

订阅专栏

css判断不同分辨率显示不同宽度布局实现自适应宽度即 css3 @media样式的使用

转自：脚本之家【css判断不同分辨率显示不同宽度布局实现自适应宽度】 http://www.jb51.net/css/151312.html

CSS判断不同分辨率浏览器（显示屏幕）显示不同宽度
布局CSS3技术支持IE6到IE8。
将用到css3 @media样式进行判断，
但IE9以下版本不支持CSS3技术，
这里DIVCSS5给大家介绍通过JS实现低版本的
浏览器也支持CSS3实现实用布局

CSS DIV网页布局中当分辨率小于等于1024px（像素）时，DIV布局对象显示1000px宽度，当分辨率大于1024px时候显示1200px宽度等需求。使用CSS实现改变浏览器显示宽度从而实现布局的网页宽度动态改变变化（网页宽度自动随浏览器显示宽度而变宽变窄）。

随着发展，越来越多的电脑用户显示屏分辨率越来越高，但有的用户还是使用1024px的分辨率的显示屏（根据几个浏览器分辨率统计平台得到数据现在使用1200分辨率以下用户极少，但我们CSS布局时仍然需要至少考虑1024px分辨率用户），如果网页布局宽度固定到1200px，1024分辨率用户浏览网页时浏览器下方会出现滚动条，为了解决这个问题，大家可以通过使用CSS3样式判断用户浏览器宽度从而调用不同布局宽度。

使用CSS单词与语法

复制代码代码如下:

@media screen and (判断属性){ CSS样式选择器 }
这里注意花括号里装要变化CSS样式选择器。
三、不同分辨率显示不同宽度样式案例

1、DIVCSS小案例描述

我们首先设置一个DIV盒子CSS命名为“.abc”，设置其高度为300px，css边框为黑色；以及设置margin:0 auto布局居中。预先设置这两个样式是为了便于观察。
我们通过手动拖拽浏览器显示宽度，然后观察此盒子宽度变化情况，当浏览器宽度调节到宽度不大于500px时，对应此盒子宽度显示100px；调节浏览器宽度不大于901px时，显示“.abc”对应盒子宽度显示200px;当调节浏览器宽度大于1201px时，盒子对象宽度显示1200px；当小于1200px时候显示宽度为900px。

2、CSS代码

复制代码代码如下:

.abc{ height:300px; border:1px solid #000; margin:0 auto} 
@media screen and (min-width: 1201px) { 
.abc {width: 1200px} 
} 
/* css注释：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */

@media screen and (max-width: 1200px) { 
.abc {width: 900px} 
} 
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */

@media screen and (max-width: 901px) { 
.abc {width: 200px;} 
} 
/* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */

@media screen and (max-width: 500px) { 
.abc {width: 100px;} 
} 
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */

需要注意是CSS代码顺序，由大到小排版CSS（判断浏览器宽度越大越放前），这样是因为逻辑关系，@media 判断CSS排错将导致判断失效。

3、HTML代码

复制代码代码如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>无标题文档</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> 
</head> 
<body> 
<div class="abc">DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度</div> 
</body> 
</html>

4、为了兼容IE9以下版本浏览器需要加入一个google的JS，当然可以下载引人html

复制代码代码如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>无标题文档</title> 
<style> 
.abc{ height:300px; border:1px solid #000; margin:0 auto} 
@media screen and (min-width: 1201px) { 
.abc {width: 1200px} 
} 
/* css 注释说明：设置了浏览器宽度不小于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">DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度</div> 
</body> 
</html>

利用@media screen实现网页布局的自适应,@media screen and

转自 http://www.cnblogs.com/mofish/archive/2012/05/23/2515218.html

开始研究响应式web设计，CSS3 Media Queries是入门。
Media Queries，其作用就是允许添加表达式用以确定媒体的环境情况，以此来应用不同的样式表。换句话说，其允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备。
那么，Media Queries是如何工作的？
两种方式：

一种是直接在link中判断设备的尺寸，然后引用不同的css文件：

<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">

意思是当屏幕的宽度大于等于400px的时候，应用styleA.css
在media属性里：
screen 是媒体类型里的一种，CSS2.1定义了10种媒体类型
and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)
(min-width: 400px) 就是媒体特性，其被放置在一对圆括号中。

<link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">

意思是当屏幕的宽度大于600小于800时，应用styleB.css

另一种方式，即是直接写在

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
  .class {
    background: #ccc;
  }
}

写法是前面加@media，其它跟link里的media属性相同。
其实基本上就是样式覆盖~，判断设备，然后引用不同的样式文件覆盖。
要注意的是由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要，否则会出现横向滚动条。

补充：media query中的not only all等关键字
not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）
only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持 Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。
all: 所有设备，这个应该经常看到
还有其它一些：

这里写图片描述

以下是demo
一个三栏布局的，在不同的尺寸下，变为两栏，再变为一栏
这里写图片描述

代码：

<!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>