CSS3新增的表格、列表属性以及media query媒体查询

柔情只为你懂 2022-04-23 11:06 156阅读 0赞

CSS针对表格、列表等特定组件提供了相应的属性，通过表格相关属性可以控制表格的边框样式、表格标题所在位置、表格布局等；通过列表相关属性则可以控制列表样式，包括改变列表项的标记，甚至使用自定义图片作为列表项的标记。CSS3还提供了media query功能，通过media query可以针对不同的显示类型、不同参数细节的输出媒体使用不同的CSS布局，从而允许页面进行自适应调整。

# 1.表格相关属性 #

表格相关属性主要用于控制表格的外观，表格相关属性有如下几个。

<table> 
 <thead> 
  <tr> 
   <th style="width:114px;">属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="width:114px;">border-collapse</td> 
   <td>用于设置表格里行和单元格边框的显示方式，该属性控制两个单元格的边框是合并在一起，还是按照标准的HTML样式分开。该属性有两个值，即seperate（边框分开，使得单元格的分隔线为双线）和collapse（边框合并，使得单元格的分隔线为单线）。</td> 
  </tr> 
  <tr> 
   <td style="width:114px;">border-spacing</td> 
   <td>当设置border-collapse为seperate时，该属性用于设置两个单元格边框之间的间距。</td> 
  </tr> 
  <tr> 
   <td style="width:114px;">caption-side</td> 
   <td>用于设置表格标题位于表格哪边。该属性必须和&lt;caption&gt;元素一起使用。</td> 
  </tr> 
  <tr> 
   <td style="width:114px;">empty-cells</td> 
   <td>控制单元格内没有内容时，是否显示单元格边框。只有当border-collapse属性设置成seperate时，该属性才有效。该属性支持show（显示）和hide（隐藏）两个属性值。</td> 
  </tr> 
  <tr> 
   <td style="width:114px;">table-layout</td> 
   <td>用于设置表格宽度布局的方法。该属性支持auto和fixed两个属性值，其中auto是默认值，也就是平时常见的表格布局方式；fixed则指定使用固定布局方式。</td> 
  </tr> 
 </tbody> 
</table>

## 1.1 使用border-collapse、border-spacing控制单元格边框 ##

border-collapse可控制单元格的边框是分开的还是合在一起，如果设置单元格的边框分开显示，还可以通过border-spacing设置边框的间距。下面定义了3个表格，分别用于测试上面几个表格相关属性。

<!DOCTYPE html>
    <html>
    <head>
    	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title> 表格相关属性 </title>
    	<style type="text/css">
    	table {
    		width: 400px;
    		border: 1px solid black;
    	}
    	td {
    		background-color:#ccc;
    		border: 1px solid black;
    	}
    	</style>
    </head>
    <body>
    <p>表格的单元格边框合并在一起，看起来分割线为单线<br>
    border-collapse:collapse;</p>
    <table style="border-collapse:collapse;">
    	<tr>
    		<td>java</td>
    		<td>android</td>
    	</tr>
    	<tr>
    		<td>html</td>
    		<td>css</td>
    	</tr>
    </table>
    <p>表格的单元格边框分开，看起来表格分割线为双线，并隐藏空格的边框线<br>
    border-collapse:seperate;empty-cells:hide;</p>
    <table style="border-collapse:seperate;empty-cells:hide;">
    	<tr>
    		<td>java</td>
    		<td>android</td>
    	</tr>
    	<tr>
    		<td>html</td>
    		<td></td>
    	</tr>
    </table>
    <p>表格的单元格边框分开，看起来表格分割线为双线，并设置两个单元格的间距<br>
    border-collapse:seperate;border-spacing:20px;</p>
    <table style="border-collapse:seperate;border-spacing:20px">
    	<tr>
    		<td>java</td>
    		<td>android</td>
    	</tr>
    	<tr>
    		<td>html</td>
    		<td>css</td>
    	</tr>
    </table>
    </body>
    </html>

**效果图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70][]

## 1.2 使用caption-side控制表格标题的位置 ##

caption-side属性可以控制表格标题出现的位置，属性值如下所示。

<table> 
 <thead> 
  <tr> 
   <th style="vertical-align:top;">值</th> 
   <th style="vertical-align:top;">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;"> <p>top</p> </td> 
   <td style="vertical-align:top;">默认值。把表格标题定位在表格之上。</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;">bottom</td> 
   <td style="vertical-align:top;">把表格标题定位在表格之下。</td> 
  </tr> 
 </tbody> 
</table>

将上面代码的css改动一下即可。

caption{
        caption-side:bottom;
    }

## 1.3 使用table-layout控制表格布局 ##

table-layout属性为表设置表格布局算法，属性值如下所示。

<table> 
 <thead> 
  <tr> 
   <th style="vertical-align:top;">值</th> 
   <th style="vertical-align:top;">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;">automatic&nbsp;</td> 
   <td style="vertical-align:top;">默认。列宽度由单元格内容设定。</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;">fixed</td> 
   <td style="vertical-align:top;">列宽由表格宽度和列宽度设定。</td> 
  </tr> 
 </tbody> 
</table>

通过将表格的table-layout指定fixed可以控制表格的布局方式（固定的布局方式），表格的宽度会按如下方式计算得到。

1.  如果通过<col>或<clogroup>元素设置了每列的宽度，则表格的宽度将等于所有列宽的总和。
2.  如果表格内第一行的单元格设置了宽度信息，则表格的宽度将等于第一行内所有单元格宽度的总和。
3.  直接平均分配每列的宽度，忽略单元格中内容的实际宽度。

<!DOCTYPE html>
    <html>
    <head>
    	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title> 表格相关属性 </title>
    	<style type="text/css">
    	table {
    		table-layout: fixed;
    		border-collapse:collapse;
    		border: 1px solid black;
    	}
    	td {
    		background-color:#ccc;
    		border: 1px solid black;
    	}
    	</style>
    </head>
    <body>
    <p>表格的宽度将由两个col元素计算出来</p>
    <table>
    	
    	<col style="width:240px"/>
    	<col style="width:80px"/>
    	<tr>
    		<td>java</td>
    		<td>android</td>
    	</tr>
    	<tr>
    		<td>html</td>
    		<td>css</td>
    	</tr>
    </table>
    <p>表格的宽度将由如下第一行的单元格的宽度计算出来</p>
    <table>
    	<tr>
    		
    		<td style="width:80px">java</td>
    		<td style="width:300px">android</td>
    	</tr>
    	<tr>
    		<td>java</td>
    		<td>android</td>
    	</tr>
    </table>
    <p>每列将会平均分配该表格的宽度</p>
    
    <table style="width:300px">
    	<tr>
    		<td>java</td>
    		<td>android</td>
    	</tr>
    	<tr>
    		<td>html</td>
    		<td>css</td>
    	</tr>
    </table>
    </body>
    </html>

**效果图： **

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 1][]

# 2.列表相关属性 #

列表相关属性有如下几个。

<table> 
 <thead> 
  <tr> 
   <th style="width:125px;">属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="width:125px;">list-style</td> 
   <td>这是一个复合属性，使用该属性可以同时指定list-style-image、list-style-position、list-style-type三个属性。</td> 
  </tr> 
  <tr> 
   <td style="width:125px;">list-style-image</td> 
   <td>该属性用于指定作为列表项标记的图片。</td> 
  </tr> 
  <tr> 
   <td style="width:125px;">list-style-position</td> 
   <td>该属性用于指定列表项标记出现的位置。该属性支持outside（列表项标记放在列表元素之外）和inside（列表项标记放在列表元素之内）两个属性值。</td> 
  </tr> 
  <tr> 
   <td style="width:125px;">list-style-type</td> 
   <td> <p>该属性用于指定列表项标记的样式。</p> </td> 
  </tr> 
 </tbody> 
</table>

list-style-type属性支持如下属性值。

*  decimal：阿拉伯数字。默认值。
 *  disc：实心圆。
 *  circle：空心圆。
 *  square：实心方块。
 *  lower-roman：小写罗马数字。
 *  upper-roman：大写罗马数字。
 *  lower-alpha：小写英文字母。
 *  upper-alpha：大写英文字母。
 *  none：不使用项目符号。
 *  cjk-ideographic：浅白的表意数字。
 *  georgian：传统的乔治数字。
 *  lower-greek：基本的希腊小写字母。
 *  hebrew：传统的希伯莱数字。
 *  hiragana：日文平假名字符。
 *  hiragana-iroha：日文平假名序号。
 *  katakana：日文片假名字符。
 *  katakana-iroha：日文片假名序号。
 *  lower-latin：小写拉丁字母。
 *  upper-latin：大写拉丁字母。

##  2.1 使用list-style属性控制列表项 ##

需要指出的是，如果为每个元素同时指定了列表项标记图片（list-style-image）和列表项标记样式（list-style-type），此时list-style-image属性将会覆盖list-style-type属性。

<!DOCTYPE html>
    <html>
    <head>
    	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title> 列表相关属性 </title>
    	<style type="text/css">
    		li {
    			background-color: #aaa;
    		}
    	</style>
    </head>
    <body>
    <p>使用实心方块作为列表项标记<br>
    list-style-type:square;</p>
    <ol style="list-style-type:square;">
    	<li>java</li>
    	<li>android</li>
    	<li>html</li>
    	<li>css</li>
    </ol>
    <p>使用大写拉丁字母作为列表项标记<br>
    list-style-type:hebrew;</p>
    <ul style="list-style-type:hebrew;">
    	<li>java</li>
    	<li>android</li>
    	<li>html</li>
    	<li>css</li>
    </ul>
    <p>使用大写罗马字母作为列表项标记<br>
    list-style-type:upper-roman;</p>
    <ol style="list-style-type:upper-roman;">
    	<li>java</li>
    	<li>android</li>
    	<li>html</li>
    	<li>css</li>
    </ol>
    <p>使用表意数字作为列表项标记，并将列表标记放在列表元素内<br>
    list-style-type:cjk-ideographic;list-style-position:inside;</p>
    <ol style="list-style-type:cjk-ideographic;
    	list-style-position:inside;">
    	<li>java</li>
    	<li>android</li>
    	<li>html</li>
    	<li>css</li>
    </ol>
    <p>使用图片作为列表项标记<br>
    list-style-image:url(fl.gif);</p>
    <ul style="list-style-image:url(fl.gif);">
    	<li>java</li>
    	<li>android</li>
    	<li>html</li>
    	<li>css</li>
    </ul>
    </body>
    </html>

**效果图： **

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 2][]

# #

## 2.2 使用list-style属性控制普通元素 ##

实际上，除了直接使用<ul>、<ol>和<li>等元素来创建列表之外，使用display:list-item还可以把普通元素（例如<div>）显示为列表，此时同样可应用列表相关的CSS属性。

<!DOCTYPE html>
    <html>
    <head>
    	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title> 列表相关属性 </title>
    	<style type="text/css">
    		div>div{
    			background-color: #aaa;
    			display:list-item;
    			list-style-image:url(fl.gif);
    			list-style-position:inside;
    		}
    	</style>
    </head>
    <body>
    <p>使用图片作为列表项标记</p>
    <div>
    	<div>java</div>
    	<div>android</div>
    	<div>html</div>
    	<div>css</div>
    </div>
    </body>
    </html>

上面代码将会把多个<div>元素变成列表组件，并指定使用自定义列表项标记，且将标记放在列表组件之内。

![20190214105559365.png][]

# 3.控制光标的属性 #

通过CSS的cursor属性可以改变光标在目标组件上的形状。该属性支持如下属性值。

<table> 
 <thead> 
  <tr> 
   <th style="width:103px;"> <p>属性值</p> </th> 
   <th> <p>说明</p> </th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="width:103px;"> <p>all-scroll</p> </td> 
   <td> <p>十字箭头光标。</p> </td> 
  </tr> 
  <tr> 
   <td style="width:103px;"> <p>col-resize</p> </td> 
   <td> <p>水平拖动线光标。</p> </td> 
  </tr> 
  <tr> 
   <td style="width:103px;"> <p>crosshair</p> </td> 
   <td> <p>十字线光标。</p> </td> 
  </tr> 
  <tr> 
   <td style="width:103px;"> <p>move</p> </td> 
   <td> <p>移动十字箭头光标。</p> </td> 
  </tr> 
  <tr> 
   <td style="width:103px;"> <p>help</p> </td> 
   <td> <p>带问号的箭头光标。</p> </td> 
  </tr> 
  <tr> 
   <td style="width:103px;"> <p>no-drop</p> </td> 
   <td> <p>禁止光标。</p> </td> 
  </tr> 
  <tr> 
   <td style="width:103px;"> <p>not-allowed</p> </td> 
   <td> <p>禁止光标。</p> </td> 
  </tr> 
  <tr> 
   <td style="width:103px;"> <p>pointer</p> </td> 
   <td> <p>手型光标。</p> </td> 
  </tr> 
  <tr> 
   <td style="width:103px;"> <p>progress</p> </td> 
   <td> <p>带沙漏的箭头光标。</p> </td> 
  </tr> 
  <tr> 
   <td style="width:103px;"> <p>row-resize</p> </td> 
   <td> <p>垂直拖动线光标。</p> </td> 
  </tr> 
  <tr> 
   <td style="width:103px;"> <p>text</p> </td> 
   <td> <p>文本编辑光标。通常就是一个大写的I字光标。</p> </td> 
  </tr> 
  <tr> 
   <td style="width:103px;"> <p>vertical-text</p> </td> 
   <td> <p>垂直文本编辑光标。通常就是大写的I字光标旋转90度。</p> </td> 
  </tr> 
  <tr> 
   <td style="width:103px;"> <p>wait</p> </td> 
   <td> <p>沙漏光标。</p> </td> 
  </tr> 
  <tr> 
   <td style="width:103px;"> <p>*-resize</p> </td> 
   <td> <p>可在各种方向上拖动的光标。支持w-resize、s-resize、nresize、e-resize、ne-resize、sw-resize、se-resize、nw-resize等各种属性值，其中n代表向上方向，s代表向下方向，e代表向右方向，w代表向左方向。</p> </td> 
  </tr> 
 </tbody> 
</table>

下面代码示范了各种光标属性的功能。

<!DOCTYPE html>
    <html>
    <head>
    	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title> 光标相关属性 </title>
    	<style type="text/css">
    		div {
    			display: inline-block;
    			border: 1px solid black;
    			width: 160px;
    			height: 70px;
    		}
    	</style>
    </head>
    <body>
    <div style="cursor:all-scroll;">十字箭头光标</div>
    <div style="cursor:col-resize;">水平拖动线光标</div>
    <div style="cursor:crosshair;">十字线光标</div>
    <div style="cursor:move;">代表移动十字箭头光标</div>
    <div style="cursor:help;">带问号的箭头光标</div>
    <div style="cursor:no-drop;">禁止光标</div>
    <div style="cursor:not-allowed">禁止光标</div>
    <div style="cursor:pointer;">手型光标</div>
    <div style="cursor:progress;">带进度环的箭头光标</div>
    <div style="cursor:row-resize;">垂直拖动线光标</div>
    <div style="cursor:text;">文本编辑光标</div>
    <div style="cursor:vertical-text;">垂直文本编辑光标</div>
    <div style="cursor:wait;">进度环光标</div>
    <div style="cursor:n-resize;">可向上拖动的光标</div>
    <div style="cursor:ne-resize;">上、右可拖动的光标</div>
    <div style="cursor:se-resize;">下、右可拖动的光标</div>
    </body>
    </html>

在浏览器中浏览，并把鼠标移动到不同的<div>元素上，即可看到不同光标的效果。例如，把鼠标移动到带问号的箭头光标上，即下图所示效果。

# ![20190214110343490.png][]4.media query功能 #

很多时候，前期使用HTML+CSS设计的样式非常精美，但可能由于用户设备、浏览器的原因，比如分辨率达不到要求、色深达不到要求，最后导致用户浏览页面时的显示效果非常丑陋。为了解决这个问题，CSS3强化了CSS 2.1的媒体类型支持，增加了media query功能，不仅可以对媒体类型进行匹配，也可以对媒体分辨率、色深等各种细节进行匹配，因此可以针对不同类型、不同参数细节的媒体设备提供精确控制。

## 4.1 media query语法 ##

@media mediatype and|not|only (media feature) {
        CSS-Code;
    }
    //mediatype 媒体类型
    //media feature 媒体特性

# #

**媒体类型：**

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

**媒体特性：**

<table> 
 <thead> 
  <tr> 
   <th style="width:151px;"> <p><strong>媒体特性</strong></p> </th> 
   <th style="width:207px;"> <p>取值</p> </th> 
   <th style="width:69px;"> <p>接受min/max</p> </th> 
   <th style="width:429px;"> <p>说明</p> </th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="width:151px;"> <p>width</p> </td> 
   <td style="width:207px;"> <p>带单位的长度值，比如600px</p> </td> 
   <td style="width:69px;"> <p>yes</p> </td> 
   <td style="width:429px;"> <p>定义输出设备中的页面可见区域宽度</p> </td> 
  </tr> 
  <tr> 
   <td style="width:151px;"> <p>height</p> </td> 
   <td style="width:207px;"> <p>带单位的长度值，比如600px</p> </td> 
   <td style="width:69px;"> <p>yes</p> </td> 
   <td style="width:429px;"> <p>定义输出设备中的页面可见区域高度</p> </td> 
  </tr> 
  <tr> 
   <td style="width:151px;"> <p>device-width</p> </td> 
   <td style="width:207px;"> <p>带单位的长度值，比如600px</p> </td> 
   <td style="width:69px;"> <p>yes</p> </td> 
   <td style="width:429px;"> <p>定义输出设备的屏幕可见宽度</p> </td> 
  </tr> 
  <tr> 
   <td style="width:151px;"> <p>device-height</p> </td> 
   <td style="width:207px;"> <p>带单位的长度值，比如600px</p> </td> 
   <td style="width:69px;"> <p>yes</p> </td> 
   <td style="width:429px;"> <p>定义输出设备的屏幕可见高度</p> </td> 
  </tr> 
  <tr> 
   <td style="width:151px;"> <p>orientation</p> </td> 
   <td style="width:207px;"> <p>portrait | landscape</p> </td> 
   <td style="width:69px;"> <p>no</p> </td> 
   <td style="width:429px;"> <p>定义'height'是否大于或等于'width'。值portrait代表是，landscape代表否</p> </td> 
  </tr> 
  <tr> 
   <td style="width:151px;"> <p>aspect-ratio</p> </td> 
   <td style="width:207px;"> <p>比例值，例如16/9</p> </td> 
   <td style="width:69px;"> <p>yes</p> </td> 
   <td style="width:429px;"> <p>定义'width'与'height'的比率</p> </td> 
  </tr> 
  <tr> 
   <td style="width:151px;"> <p>device-aspect-ratio</p> </td> 
   <td style="width:207px;"> <p>比例值，例如16/9</p> </td> 
   <td style="width:69px;"> <p>yes</p> </td> 
   <td style="width:429px;"> <p>定义'device-width'与'device-height'的比率。如常见的显示器比率：4/3, 16/9, 16/10</p> </td> 
  </tr> 
  <tr> 
   <td style="width:151px;"> <p>color</p> </td> 
   <td style="width:207px;"> <p>整数值</p> </td> 
   <td style="width:69px;"> <p>yes</p> </td> 
   <td style="width:429px;"> <p>定义每一组输出设备的彩色原件个数。如果不是彩色设备，则值等于0</p> </td> 
  </tr> 
  <tr> 
   <td style="width:151px;"> <p>color-index</p> </td> 
   <td style="width:207px;"> <p>整数值</p> </td> 
   <td style="width:69px;"> <p>yes</p> </td> 
   <td style="width:429px;"> <p>定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0</p> </td> 
  </tr> 
  <tr> 
   <td style="width:151px;"> <p>monochrome</p> </td> 
   <td style="width:207px;"> <p>整数值</p> </td> 
   <td style="width:69px;"> <p>yes</p> </td> 
   <td style="width:429px;"> <p>定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0</p> </td> 
  </tr> 
  <tr> 
   <td style="width:151px;"> <p>resolution</p> </td> 
   <td style="width:207px;"> <p>分辨率值，比如300dpi</p> </td> 
   <td style="width:69px;"> <p>yes</p> </td> 
   <td style="width:429px;"> <p>定义设备的分辨率。如：96dpi, 300dpi, 118dpcm</p> </td> 
  </tr> 
  <tr> 
   <td style="width:151px;"> <p>scan</p> </td> 
   <td style="width:207px;"> <p>progressive | interlace</p> </td> 
   <td style="width:69px;"> <p>no</p> </td> 
   <td style="width:429px;"> <p>定义电视类设备的扫描工序</p> </td> 
  </tr> 
  <tr> 
   <td style="width:151px;"> <p>grid</p> </td> 
   <td style="width:207px;"> <p>整数值</p> </td> 
   <td style="width:69px;"> <p>no</p> </td> 
   <td style="width:429px;"> <p>用来查询输出设备是否使用栅格或点阵。只有1和0才是有效值，1代表是，0代表否</p> </td> 
  </tr> 
 </tbody> 
</table>

## 4.2 针对浏览器宽度调整布局 ##

下面开发一个网页，这个网页可以针对浏览器的宽度来调整布局，从而保证该页面向用户呈现较好的视觉效果。下面定义了一个3栏布局的页面，这个页面在宽度大于1000px的浏览器中显示时，3个栏目将会并排显示；在宽度小于480px的浏览器中显示时，3个栏目会垂直排列显示。因此，页面需要针对这几种浏览器宽度分别定义不同的CSS样式，代码如下。

<!DOCTYPE html>
    <html>
    <head>
    	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title> 针对浏览器宽度响应布局 </title>
    	<style type="text/css">
    		/* 设置默认的CSS样式 */
    		#container{
    			text-align: center;
    			margin: auto;
    			width: 750px;
    		}
    		#container>div {
    			border: 1px solid #aaf;
    			text-align: left;
    			/* 设置HTML元素的大小包括边框 */
    			box-sizing: border-box;
    			border-radius: 12px 12px 0px 0px;
    			padding: 5px;
    		}
    		div#left {
    			width: 300px;
    			height: 260px;
    			float: left;
    		}
    		div#main {
    			width: 450px;
    			height: 260px;
    			float: left;
    			/* 让该元素的右边不能出现float元素，即让后面的元素换行 */
    			clear: right;
    		}
    		div#right {
    			width: 750px;
    			float: left;
    		}
    		/* 设置当浏览器宽度大于1000px时的CSS样式 */
    		@media screen and (min-width:1000px) {
    			#container{
    				text-align: center;
    				margin: auto;
    				width: 960px;
    			}
    			#container>div {
    				border: 1px solid #aaf;
    				/* 设置HTML元素的大小包括边框 */
    				box-sizing: border-box;
    				border-radius: 12px 12px 0px 0px;
    				padding: 5px;
    			}
    			div#left {
    				width: 240px;
    				float: left;
    				height: 260px;
    			}
    			div#main {
    				width: 460px;
    				float: left;
    				height: 260px;
    				/* 让左右两边都可以出现float元素 */
    				clear: none;
    			}
    			div#right {
    				width: 260px;
    				float: left;
    				height: 260px;
    			}
    		}
    		/* 设置当浏览器宽度小于480px时的CSS样式 */
    		@media screen and (max-width:480px) {
    			#container{
    				text-align: center;
    				margin: auto;
    				width: 450px;
    			}
    			#container>div {
    				border: 1px solid #aaf;
    				/* 设置HTML元素的大小包括边框 */
    				box-sizing: border-box;
    				border-radius: 12px 12px 0px 0px;
    				padding: 5px;
    			}
    			div#left {
    				width: 450px;
    				float: left;
    				height: 150px;
    			}
    			div#main {
    				width: 450px;
    				float: left;
    				height: 260px;
    				/* 让左右两边都不能出现float元素 */
    				clear: both;
    			}
    			div#right {
    				width: 450px;
    				float: left;
    				height: 170px;
    			}
    		}
    	</style>
    </head>
    <body>
    <div id="container">
    <div id="left">
    <h2>日期</h2>
    <ul>
    	<li>2019年2月1日</li>
    	<li>2019年2月2日 开始</li>
    	<li>2019年2月3日 结束</li>
    </ul>
    </div>
    <div id="main">
    <h2>java语言</h2>
        语法规则和C++相似，但从某种意义上讲，它是由C和C++演变而来，所以C程序设计人员能很容易的掌握java语言的语法。语法规则和C++相似，但从某种意义上讲，它是由C和C++演变而来<br/> 
        来说进行了简化和一定的提高，如：使用接口代替了复杂的多重继承以及取消了指针，还通过实现垃圾自动回收机制，大大简化了程序员的资源释放管理工作。
    </div>
    <div id="right">
    <h2>公司动态</h2>
    <ul>
    	<li>java</li>
    	<li>android</li>
    	<li>html</li>
    	<li>css</li>
    </ul>
    </div>
    </div>
    </body>
    </html>

上面代码定义了两个media query表达式，其中@media screen and(min-width:1000px)指定浏览器宽度大于1000px时的CSS样式；@media screen and(max-width:480px)指定浏览器宽度小于480px时的CSS样式。在浏览器中访问，如果浏览器宽度大于1000px，将可以看到如下图所示的3栏并列的效果。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 3][]

如果让浏览器宽度大于480px，但小于1000px，将可以看到如下图所示的效果。

## ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 4][] ##

如果让浏览器宽度小于480px，将可以看到如下图所示的效果。

## ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 5][] ##

# #

通过CSS3提供的media query功能，我们可以针对不同类型、不同参数细节的媒体设备提供相应的CSS样式，从而可以保证该网页在不同的媒体设备上总可以显示良好的设计，不会乱套。

## 4.3 响应手机浏览器 ##

如果使用手机浏览，会发现显示的却是大于480px小于1000px的页面效果，尽管各个手机的大小屏幕可能千差万别，但手机的浏览器宽度都设置成980px，这是为了兼容互联网绝大部分网页而采用的设计。我们可以通过name为viewport的<meta>来进行设置。

meta viewport 的6个属性：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>width&nbsp;&nbsp;&nbsp; &nbsp;</td> 
   <td>设置layout viewport 的宽度，为一个正整数，或字符串width-device。</td> 
  </tr> 
  <tr> 
   <td>initial-scale</td> 
   <td>设置页面的初始缩放值，为一个数字，可以带小数。</td> 
  </tr> 
  <tr> 
   <td>minimum-scale</td> 
   <td>允许用户的最小缩放值，为一个数字，可以带小数。</td> 
  </tr> 
  <tr> 
   <td>maximum-scale</td> 
   <td>允许用户的最大缩放值，为一个数字，可以带小数。</td> 
  </tr> 
  <tr> 
   <td>height&nbsp;&nbsp;&nbsp; &nbsp;</td> 
   <td>设置layout viewport 的高度，这个属性并不重要，很少使用。</td> 
  </tr> 
  <tr> 
   <td>user-scalable</td> 
   <td>是否允许用户进行缩放，值为no或yes，no&nbsp;代表不允许，yes代表允许。</td> 
  </tr> 
 </tbody> 
</table>

上面首先设置width=device-width，将浏览器宽度设置为与设备宽度一致。接下来设置页面的缩放百分比为1.0，如果希望禁止用户缩放页面，还可以在content属性后添加user-scalable=no。下面代码示范了响应手机浏览器的功能，大家可以放在自己手机上试一试。

<!DOCTYPE html>
    <html>
    <head>
    	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    	<title> 针对浏览器宽度响应布局 </title>
    	<style type="text/css">
    		/* 设置默认的CSS样式 */
    		#container{
    			text-align: center;
    			margin: auto;
    			width: 750px;
    		}
    		#container>div {
    			border: 1px solid #aaf;
    			text-align: left;
    			/* 设置HTML元素的width属性包括边框 */
    			box-sizing: border-box;
    			border-radius: 12px 12px 0px 0px;
    			padding: 5px;
    		}
    		div#left {
    			width: 300px;
    			height: 260px;
    			float: left;
    		}
    		div#main {
    			width: 450px;
    			height: 260px;
    			float: left;
    			/* 让该元素的右边不能出现float元素，即让后面的元素换行 */
    			clear: right;
    		}
    		div#right {
    			width: 750px;
    			float: left;
    		}
    		/* 设置当浏览器宽度大于1000px时的CSS样式 */
    		@media screen and (min-width:1000px) {
    			#container{
    				text-align: center;
    				margin: auto;
    				width: 960px;
    			}
    			#container>div {
    				border: 1px solid #aaf;
    				/* 设置HTML元素的大小包括边框 */
    				box-sizing: border-box;
    				border-radius: 12px 12px 0px 0px;
    				padding: 5px;
    			}
    			div#left {
    				width: 240px;
    				float: left;
    				height: 260px;
    			}
    			div#main {
    				width: 460px;
    				float: left;
    				height: 260px;
    				/* 让左右两边都可以出现float元素 */
    				clear: none;
    			}
    			div#right {
    				width: 260px;
    				float: left;
    				height: 260px;
    			}
    		}
    		/* 设置当浏览器宽度小于480px时的CSS样式 */
    		@media screen and (max-width:480px) {
    			#container{
    				text-align: center;
    				margin: auto;
    				width: 450px;
    			}
    			#container>div {
    				border: 1px solid #aaf;
    				/* 设置HTML元素的大小包括边框 */
    				box-sizing: border-box;
    				border-radius: 12px 12px 0px 0px;
    				padding: 5px;
    			}
    			div#left {
    				width: 450px;
    				float: left;
    				height: 150px;
    			}
    			div#main {
    				width: 450px;
    				float: left;
    				height: 260px;
    				/* 让左右两边都不能出现float元素 */
    				clear: both;
    			}
    			div#right {
    				width: 450px;
    				float: left;
    				height: 170px;
    			}
    		}
    	</style>
    </head>
    <body>
    <div id="container">
    <div id="left">
    <h2>日期</h2>
    <ul>
    	<li>2019年2月1日</li>
    	<li>2019年2月2日 开始</li>
    	<li>2019年2月3日 结束</li>
    </ul>
    </div>
    <div id="main">
    <h2>java语言</h2>
        语法规则和C++相似，但从某种意义上讲，它是由C和C++演变而来，所以C程序设计人员能很容易的掌握java语言的语法。语法规则和C++相似，但从某种意义上讲，它是由C和C++演变而来<br/> 
        来说进行了简化和一定的提高，如：使用接口代替了复杂的多重继承以及取消了指针，还通过实现垃圾自动回收机制，大大简化了程序员的资源释放管理工作。
    </div>
    <div id="right">
    <h2>公司动态</h2>
    <ul>
    	<li>java</li>
    	<li>android</li>
    	<li>html</li>
    	<li>css</li>
    </ul>
    </div>
    </div>
    <script type="text/javascript">
    	// 查看浏览器内body宽度
    	alert(screen.width);
    </script>
    </body>
    </html>

\------------如果大家喜欢[湮顾千古][Link 1]的博客，可以点击左上角的关注哦。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70]: /images/20220320/0f7113e31b7f4f5c9dfce7939cf36dbf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 1]: /images/20220320/e6bad83501e24c4296960f943711df3f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 2]: /images/20220320/04ffdd025ff942a4a194930d4c014058.png
[20190214105559365.png]: /images/20220320/e46c7633073b40e097fd2a5a58ff9170.png
[20190214110343490.png]: /images/20220320/ee7c65a6eeba48d9a75c40d7cd5efe5b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 3]: /images/20220320/54e7a179628442b1b7a5a8a7e68c41b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 4]: /images/20220320/877c3e4d9e9740118ac5b27395eac7ac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 5]: /images/20220320/ba3f9d1eba0745349625e2830f3e8584.png
[Link 1]: https://blog.csdn.net/sujin_