响应式布局定义:将弹性网格布局、弹性图片、媒体和媒体查询整合起来,即为响应式布局。

  一、媒体查询:支持不同的窗口

  基本语法:

@media screen and    (max-width:960px){
    body{
         background-color:red;    
     }
}

  使用@inport指令可以在当前样式表中按条件引入其他样式表。如下例:

@inport url("phone.css") screen and (max-width:768px);

  但是需要注意的是使用@inport方式会增加HTTP请求

  媒体查询能够检测的性能有:

  width:视口宽度

  height:视口高度

  device-width:设备屏幕宽度

  device-height:设备屏幕高度

  orientation:检测设备处于横向还是纵向

  aspect-ratio:基于视口宽高比,一个16:9显示的屏可这样定义,aspect-ratio:16/9

  device-aspect-ratio:基于设备屏幕宽高比

  color:颜色位数,min-color:16,会检测设备是否拥有16位颜色

  color-index:设备颜色索引表中的颜色数,必须为非负整数

  monochrome:检测单色帧缓冲区中每像素使用位数,必须非负整数

  resolution:检测屏幕或打印机分辨率

  scan:电视机的扫描方式,值可为,progresssive(逐行扫描),interlace(隔行扫描)

  grid:检测输出设备是网络设备还是位图设备

  注:上述特性,除scan和grid外,可用min和max创建查询范围。

  二、使用流式布局

  目标元素宽度 / 上下文元素宽度 = 百分比宽度

  在响应式布局中,要放弃使用px,使用em。

  IE无法调整使用px作为单位的字体的大小。

  em的特点:

  1、em的值并不是固定的。

  2、em会继承父级元素的字体大小。

  rem,也是相对单位:

  是相对于HTML的根元素,而不是父元素。

  弹性图片:

  可以给图片都加上属性,即为图片设置阈值: 

     img{max-width:100%;}   或   img{max-width:220px;}

  max-width属性:

  可以给元素加上max-width属性,以限制该元素的最大宽度。

  viewport特性,是一个移动专属的Meta值,用于定义视口的各种行为。

      layout viewport:布局视口

  在iOS Safari中定义了一个viewport meta标签,用来创建一个虚拟的布局视口,这个视口的分辨率接近PC。

      visual viewport:视觉视口

  手持设备物理屏幕的可视区域,即视觉视口。

      ideal viewport:完美视口

  完美视口。不用缩放或拖动网页就能很好的进行网页浏览。

      viewport特性: 

     width:

  width被用来定义layout viewport的宽度,如果不指定该属性(或者移除viewport meta标签),则layout viewport宽度为厂商默认值。

<meta name="viewport" content="width=device-width" />

  此时的layout viewport将成为ideal viewport,因为layout viewport宽度与设备视觉视口宽度一致了。

      height:

  与width类似,但实际上却不常用,因为没有太多的use case。

      initial-scale:

  如果想页面默认以某个比例放大或者缩小然后呈现给用户,那么可以通过定义initial-scale来完成。

  initial-scale用于指定页面的初始缩放比例,假定你这样定义:

<meta name="viewport" content="initial-scale=2" />

  那么用户将会看到2倍大小的页面内容。

 <meta name="viewport" content="initial-scale=1" />

  如上initial-scale也能实现ideal viewport。

      maximum-scale:

  在移动端,你可能会考虑用户浏览不便,然后给予用户放大页面的权利,但同时又希望是在一定范围内的放大,这时就可以使用maximum-scale来进行约束。

  maximum-scale用于指定用户能够放大的比例。

<meta name="viewport" content="initial-scale=1,maximum-scale=5" />

  假设页面的默认缩放值initial-scale是1,那么用户最终能够将页面放大到这个初始页面大小的5倍。

      minimum-scale:

  类似maximum-scale的描述,不过minimum-scale是用来指定页面缩小比例的。通常情况下,为了有更好地体验,不会定义该属性的值比1更小,因为那样页面将变得难以阅读。

      user-scalable:

  如果你不想页面被放大或者缩小,通过定义user-scalable来约束用户是否可以通过手势对页面进行缩放即可。

  该属性的默认值为yes,即可被缩放(如果使用默认值,该属性可以不定义);当然,如果你的应用不打算让用户拥有缩放权限,可以将该值设置为no。

  使用方法如下:

<meta name="viewport" content="user-scalable=no" />

 

posted on 2016-07-31 23:22  suvllian  阅读(422)  评论(0编辑  收藏  举报