CSS3布局、移动特性、响应式

CSS3布局

弹性盒(flexbox)布局

参考文档1 参考文档2

CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

用法

属性 order 将元素依次分组,并决定谁先出现。

属性 flex-direction 定义主轴方向。

属性 flex 是 flex-basis,flex-grow 和 flex-shrink 的缩写,代表弹性子元素的伸缩性。

<div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

.box{
    width: 400px;
    display: flex;
}
.box .item{
    flex: 1;
}

常见使用场景

参考demo

box-sizing

demo

box-sizing: border-box; //以边框做为宽度 box-sizing: content-box; //以内容做宽度

.ct{ width: 200px; border: 1px solid black; overflow: auto; } .item{ box-sizing: border-box; width: 33.3%; border: 1px solid red; height: 30px; float: left; }

响应式

作用:根据不同的页面宽度或者媒体类型展示不同的样式

媒体查询包含了一个媒体类型 和如CSS3规范中描述的包含一个或多个表达式的媒体属性,这些媒体属性会被解析成真或假。如果媒体查询中的媒体类型与文档要展示的设备相符则查询结果为真,并且媒体查询中的所有表达式为真。

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

body{
  background: #ccc;
}
@media screen and (max-width: 500px){
  body{
    background: red;
  }
}
@media screen and (max-width: 400px){
  body{
    background: blue;
  }
}
@media screen and (min-width: 200px) and (max-width: 300px){
  body{
    background: yellow;
  }
}

demo

移动开发相关

开发调试

移动端开发调试

  • DebugGap
  • Weinre
  • chrome移动调试工具
  • ...

常用类库

zepto.js [appFramework]

viewport

最head里添加如下meta

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

| 属性| 解释 | | ---| -- | |width | 设置layout viewport 的宽度,为一个正整数,或字符串"width-device"| |initial-scale | 设置页面的初始缩放值,为一个数字,可以带小数| |minimum-scale| 允许用户的最小缩放值,为一个数字,可以带小数| |maximum-scale | 允许用户的最大缩放值,为一个数字,可以带小数| |user-scalable | 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许|

终端检测

使用zepto检测

$.os.phone
$.os.tablet
// specific OS
$.os.ios
$.os.android
$.os.blackberry

// specific device type
$.os.iphone
$.os.ipad
$.os.ipod // [v1.1]
$.os.touchpad
$.os.kindle

原生检测--使用navigator.userAgent做正则匹配

function isAndroid(){
    return /Android/.test(navigator.userAgent);
}
function isIos(){
    return /iPhone|iPad|iPod/.test(navigator.userAgent);
}

触摸事件

// 手势事件
touchstart            //当手指接触屏幕时触发
touchend             //当手指离开屏幕时触发

zepto可使用的触控事件 - tap - singleTap 、 doubleTap - longTap
- swipe, swipeLeft, swipeRight, swipeUp, swipeDown

<style>.delete { display: none; }</style>

<ul id=items>
  <li>List item 1 <span class=delete>DELETE</span></li>
  <li>List item 2 <span class=delete>DELETE</span></li>
</ul>

<script>
// show delete buttons on swipe
$('#items li').swipe(function(){
  $('.delete').hide()
  $('.delete', this).show()
})

// delete row on tapping delete button
$('.delete').tap(function(){
  $(this).parent('li').remove()
})
</script>

屏幕旋转

事件:orientationchange 属性:window.orientation 值:0表示肖像模式,竖屏。90表示横向(手机头在左侧),-90表示横向(鼠标头在右侧)。

其他

1.隐藏地址栏 & 处理事件的时候,防止滚动条出现:

setTimeout(function(){ window.scrollTo(0, 1); }, 100); 

2.电话短信

<a href="tel:12345654321">打电话给我</a>
<a href="sms:12345654321">发短信</a>

3.300毫秒延迟 fastclick