本课要点：

上次课我们已经做出了基本页面，这节课我们讲怎么从基本页面变化到其它版面。

使用媒体检测，从基本页面转化到其它版面。

  1、从基本样式变为宽屏的pc样式

     1）分析pc样式与基本样式的不同处   难点

/*最小分辨率为1025px的样式，即pc屏幕的样式*/  

/*mast不再浮动，里面的logo和nav分别左右浮动，形成左右两栏*/    重点

/*图片变小，使一行显示6张图片*/

@media screen and (min-width:1025px) 

{

.mast { float: none; width: auto;}     重点

#logo { float: left; width: 32%;}      重点

.nav {  float: right; margin: 40px 0 1em; text-align: center; width: 66%;}     重点

.nav li {float: left; margin-right: 3.3%; width: 16%;}    

.intro {margin-top: 1em;}

.figure {margin-right: 2.5%; width: 14%;}  /*图片宽度变窄，使一行显示6幅*/

}

2、从基本样式变为iPad竖屏样式

/*最大分辨率为768px的样式，即ipad竖屏的样式*/

 @media screen and (max-width:768px) 

 {

.mast,.intro, .main, .footer { float: none; width: auto;}

 /*清除所有重要板块的浮动属性，使其垂直排列*/

#logo { background: none;}/*由于智能手机显示区域有限，这里不再显示装饰性图像*/

#logo a {padding-top: 20px; height: 80px; display: block;}

ul.nav {margin: 0 auto; width: 100%;}

ul.nav li { float: left; margin-right: 3%; width: 17%;}

ul.nav a {font: 14px "微软雅黑"; font-weight: bold;}

.intro {margin-top: 10px;}

.intro h2 { font-size: 1.4em;}

/*注意，此处没有改写figure的样式，figure里的图片依然保持初始样式的左浮动，30%宽，还是3*2的排列*/

}

3、从ipad竖屏的样式变为手机样式

max-width        输出设备中页面最大可视区域宽度 小于这个width时，其中的css起作用  难点

min-width        输出设备中页面最小可视区域宽度 大于这个width时，其中的css起作用  难点

/*最大分辨率为414px的样式，即手机竖屏的样式*/

/*因为前面ipad竖屏时设置的条件max-width:768px时的样式（清除所有重要板块的浮动属性）在这时依然有效，所以这里不需要再设置重要板块的浮动属性*/   难点

 @media screen and (max-width:414px) {

.figure {

float:none;

width:100%;

}  /*取消图片的浮动，宽度变成100%*/

/*当显示宽度小于等于414像素时，图文信息列表宽度增加，有三列显示变为1列显示，图像信息显示区域增大，有利于访问者浏览*/

}

注意：要根据分割点轴线顺序写媒体查询。