移动前端开发入门(一)

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

  1、媒体查询:支持不一样的窗口chrome

  基本语法:网络

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

  使用@inport指令能够在当前样式表中按条件引入其余样式表。以下例:ide

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

  可是须要注意的是使用@inport方式会增长HTTP请求布局

  媒体查询可以检测的性能有:性能

  width:视口宽度字体

  height:视口高度url

  device-width:设备屏幕宽度idea

  device-height:设备屏幕高度spa

  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建立查询范围。

  2、使用流式布局

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

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

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

  em的特色:

  一、em的值并非固定的。

  二、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" />
相关文章
相关标签/搜索