下载此文档

CSS3媒体查询实现页面在各种设备上的适应.docx

文档分类：IT计算机 | 页数：约4页举报非法文档有奖

1/4

下载提示

1.该资料是网友上传的，本站提供全文预览，预览什么样，下载就什么样。
2.下载该文档所得收入归上传者、原创者。
3.下载的文档，不会出现我们的网址水印。

同意并开始全文预览

(约 1-6 秒)

1/4 下载此文档

文档列表 文档介绍

<!DOCTYPE>
<html>
<head>
<title>页面自适应</title>
<link rel="stylesheet" media="all" href="css/" />
</head>
<body>
<div class="top">使用CSS3媒体查询--自适应</div>

<div>
注:该实例讲述手机端、平板和PC设置的自适应,主要应用CSS3的媒体查询(device-width)!
下面是Media的参数用法解释总结: 
1、width:浏览器可视宽度。 
height:浏览器可视高度。

***@media screen and (max-width:1023px) {
 
body { 
padding: 100px; 
background-color: #86; 
color: #fff; 
width: 100%; 
} 
}

2、device-width:设备屏幕的宽度。 
device-height:设备屏幕的高度。 

***@media screen and (max-device-width:1023px) {
 
body { 
padding: 100px; 
background-color: #86; 
color: #fff; 
width: 100%; 
} 
}

orientation:检测设备目前处于横向还是纵向状态。 
aspect-ratio:检测浏览器可视宽度和高度的比例。(例如:aspect-ratio:16/9) 
device-aspect-ratio:检测设备的宽度和高度的比例。 
color:检测颜色的位数。(例如:min-color:32就会检测设备是否拥有32位颜色) 
color-index:检查设备颜色索引表中的颜色,他的值不能是负数。 
monochrome:检测单色楨缓冲区域中的每个像素的位数。(这个太高级,估计咱很少会用的到) 
resolution:检测屏幕或打印机的分辨率。(例如:min-resolution:300dpi或min-resolution:118dpcm)。 
grid:检测输出的设备是网格的还是位图设备。 
</div>
<div class="">
页面整个CSS

html, body {
padding: 0px;
margin: 0px;
background-color: #ececec;
font-family: 'Microsoft YaHei';
} 
bo

CSS3媒体查询实现页面在各种设备上的适应来自淘豆网www.taodocs.com转载请标明出处.