web自适应布局之一（css3 media query）

最新推荐文章于 2024-07-29 14:03:52 发布

狂奔的CD

最新推荐文章于 2024-07-29 14:03:52 发布

阅读量2.3k

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/kkae8643150/article/details/52515556

版权

web 专栏收录该内容

36 篇文章 3 订阅

订阅专栏

这几天看了下响应式布局的东东，拿腾讯新闻的页面测试瞄了一下，发现里面用了media这个东东，结果百度了一下，发现了很多资料。

media是css3中的一个属性，用法极其简单，既然是css的属性，自然写在css的那些地方。

语法如下：

   @media  
  mediatype and|not|only 
   (media feature) { 
  
     CSS-Code;
 } 
 

你也可以针对不同的媒体使用不同 stylesheets :

   <link rel="stylesheet" media=" 
  mediatype and|not|only ( 
  media feature)" href=" 
  mystylesheet.css"> 
 

mediatype指的是设备类型

媒体类型

值	描述
all	用于所有设备
aural	已废弃。用于语音和声音合成器
braille	已废弃。应用于盲文触摸式反馈设备
embossed	已废弃。用于打印的盲人印刷设备
handheld	已废弃。用于掌上设备或更小的装置，如PDA和小型电话
print	用于打印机和打印预览
projection	已废弃。用于投影设备
screen	用于电脑屏幕，平板电脑，智能手机等。
speech	应用于屏幕阅读器等发声设备
tty	已废弃。用于固定的字符网格，如电报、终端设备和对字符有限制的便携设备
tv	已废弃。用于电视和网络电视

我们这里为了适配手机自然用screen

and not only是连接词暂时不管

media feature是媒体特征，结合连接词形成判断条件

值	描述
aspect-ratio	定义输出设备中的页面可见区域宽度与高度的比率
color	定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0
color-index	定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的比率。
device-height	定义输出设备的屏幕可见高度。
device-width	定义输出设备的屏幕可见宽度。
grid	用来查询输出设备是否使用栅格或点阵。
height	定义输出设备中的页面可见区域高度。
max-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
max-color	定义输出设备每一组彩色原件的最大个数。
max-color-index	定义在输出设备的彩色查询表中的最大条目数。
max-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
max-device-height	定义输出设备的屏幕可见的最大高度。
max-device-width	定义输出设备的屏幕最大可见宽度。
max-height	定义输出设备中的页面最大可见区域高度。
max-monochrome	定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
max-resolution	定义设备的最大分辨率。
max-width	定义输出设备中的页面最大可见区域宽度。
min-aspect-ratio	定义输出设备中的页面可见区域宽度与高度的最小比率。
min-color	定义输出设备每一组彩色原件的最小个数。
min-color-index	定义在输出设备的彩色查询表中的最小条目数。
min-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最小比率。
min-device-width	定义输出设备的屏幕最小可见宽度。
min-device-height	定义输出设备的屏幕的最小可见高度。
min-height	定义输出设备中的页面最小可见区域高度。
min-monochrome	定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution	定义设备的最小分辨率。
min-width	定义输出设备中的页面最小可见区域宽度。
monochrome	定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
orientation	定义输出设备中的页面可见区域高度是否大于或等于宽度。
resolution	定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
scan	定义电视类设备的扫描工序。
width	定义输出设备中的页面可见区域宽度。

看的出来东西不少，这里我们选择响应式布局需要用到的，min-width max-width,比如下面的代码：

@media only screen and (min-width: 1024px){ //仅screen类设备使用，当屏幕尺寸>=1024px时，以下css生效
.content{
width: 1000px;
margin: auto
}
.leftBox, .rightBox{
width: 20%;
}
.middleBox{
width: 50%;
}
}
@media only screen and (min-width: 400px) and (max-width: 1024px){ //仅screen类设备使用，当屏幕尺寸<=1024px且尺寸>=400px时，以下css生效

.rightBox{
width: 0;
}
.leftBox{ width: 30%}
.middleBox{ width: 65%}
}
@media only screen and (max-width: 400px){ //仅screen类设备使用，当屏幕尺寸<=400px时，以下css生效
.leftBox, .rightBox, .middleBox{
width: 98%;
height: 200px;
}
}

是不是很简单，接下来上这个网上找来的代码：

<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;
}

.leftBox, .rightBox{
    float: left;
    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;
    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
        }
    .leftBox, .rightBox{ 
    	width: 20%;
    }
     .middleBox{
     	width: 50%;
     }
}
@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>

发现，html5、css3还有javascript都是很屌的东西，有时间要多研究啊