html5-- 总结 （3）

关于viemport的使用

方法

手机有不同的分辨率，不同的屏幕大小。

<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=no">

• width=device-width 设置宽度为屏幕宽度
• maximum-scale=1.0 设置最大缩放比例
• minimum-scale=1.0 设置最小的缩放比例。0.25-1.0
• user-scalable=no 禁止用户捏合
• inital-scale = 1.0 设置初始化的缩放比例
• 在Android中还支持 target-densitydpi
  1. 像素密度
  2. 定义为每英寸点得数量
  3. 值
     • device-dpi 使用设备原本的dpi作为目标dpi，不会发生默认缩放
     • high-dpi 使用high-dpi作为dpi。中等像素密度和低像素密度设备相应缩小
     • medium-dpi 使用medium-dpi作为dpi。高像素密度设备相应放大，像素
       密度设备相应缩小，这是默认的target-api
     • low-dpi 使用mdpi作为目标dpi。中等像素密度和高像素密度设备相应放大
     • value 指定一个具体的dpi值作为target-dpi，这个值范围需要在70-400之间
     • 特别说明就是这个属性只有Android支持，并且Android已经决定废弃。所以尽量不要用

布局种类

声明：自适应和响应式布局原理都是检测设备，根据不同的设备采用不同的css代码。并且css都是采用百分比，而不是固定宽高。

• 静态布局（static layout)
  固定死的宽和高

• 自适应（adaptive layout)
  为不同屏幕定制不同布局
  在每个布局中，页面元素不随窗口大小而改变

• 流失布局（liquid layout）
  只有一套布局
  页面元素随着窗口大小而改变

• 响应式（responsive layout)
  为不同屏幕定义分辨率定义不同的布局
  同时在么个布局中，应用流式布局，即页面元素宽度随着屏幕调整而自动适配

流式布局

• 定义
  1. 只有一套布局
  2. 页面元素随着窗口大小而改变（百分比布局）
  3. 有em/rem替换px
• 百分比的使用
  1. 尺寸百分比 width：20%
  2. 位置百分比 top：50%
  3. 保留小数点后5位 3.12343%
• 单位
  1. em 全拼 element ，值会继承腹肌元素的字体大小而改变
  2. rem 相对于html根标签的单位
  3. 兼容性 在ie6~8上不能使用

响应式布局

• 定义

  1. 为不同屏幕定义分辨率定义不同的布局
  2. 同时，在每个布局中，应用流式布局，页面元素宽度随着屏幕调整而自动适配
  3. 使一个网站能够兼容多个终端而不是每个终端做一个特定的版本

• 好处

  1. 响应式可以为不同的终端用户提供更加舒适的页面和更好的用户体验
  2. 随着目前大屏幕移动设备的普及，可以用”大势所趋“来形容

• 实现方法

  1. 通过不同屏幕大小定义不同的样式
  2. 媒体查询让css可以更精确作用于不同的设备类型和统一设备的不同条件
  3. 媒体查询的大部分媒介特性都接受min和max用于表达：大于或等于或小于或等于
  4. 在link中使用或者嵌套@media查询设备 同时media可以查询用户设备

  <link rel="stylesheel" type="text/css" media="only screen and (max-width:480px )" href = "link_css

  @media screen (max-width:700px) and (min-width:500px) {}