446节---------5月16日

流式布局（百分比布局）

• 也称非固定像素布局
• 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充
• 流式布局方式是移动 Web开发实用的比较常见的布局方式
• 可以设置最大值和最小值
  • max-width ，max-height
  • min-width  ，min-height

二倍精灵图做法

• 在firework里面把精灵图等比例缩放为原来的一半
• 之后根据大小测量坐标
• 注意代码里面background-size也要写：精灵图原来宽度的一半

Rem布局

rem单位

• rem 是一个相对单位，类似于em , em是相对于父元素字体大小。
• 不同的是rem是相对于html元素的。
• 比如，根元素(html)设置font-size=12px,非根元素设置width:2rem;则换成px表示就是24px
•  优点就是可以通过改html里面的文字大小来改变页面中元素的大小，可以整体控制

媒体查询

• 是css3新语法
• 使用 @media查询，可以针对不同的媒体类型定义不同的样式
• @media可以针对不同的屏幕尺寸设置不同的样式
• 你重置浏览器大小的过程中，页面也会根据浏览器的高度和宽度重新渲染页面
• 目前计对很多苹果于机、Android于机,平板等设备都用得到多媒体查询

语法规范

@media mediatype and|not|only (media feature) {
    css-code;
}

• 用@media开头
• mediatype媒体类型：
  • all（所有）
  • print（打印机）
  • screen（电脑，平板，手机）
• 关键字
  • and     可以将多个媒体特性良街道一起，相当于“且”
  • not      排除某个媒体类型，相当于“非”，可以省略
  • only     指定某个特定的媒体类型，可以省略
• media feature 媒体特性 必须有小括号包含
  • width          定义输出设备中页面可见区域的宽度
  • min-width   定义输出设备中页面最小可见区域宽度
  • max-width  定义输出设备中页面最大可见区域宽度

媒体查询+rem可以实现元素动态大小变化

引入资源

当样式比较多时，我们可以针对不同的媒体使用不同的stylesheets（样式表）

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

语法:

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