h5端开发下面这段话是必须配置的
<metaname="viewport"content="width=device-width, initial-scale=1, user-scalable=no">
其它相关配置内容如下：
width viewport 宽度(数值/device-width)height viewport 高度(数值/device-height)initial-scale 初始缩放比例maximum-scale 最大缩放比例minimum-scale 最小缩放比例user-scalable 是否允许用户缩放(yes/no)minimal-ui iOS 7.1 beta 2 中新增属性（注意：iOS8 中已经删除），可以在页面加载时最小化上下状态栏。之前在做移动端开发的时候，为了适配多屏幕。使用的是rem 单位。这个时候就需要根据屏幕的尺寸来来动态的设置根节点html 的font-size 值。这样可以解决多屏幕适配的问题。 比如下面的 媒体查询代码
html { //iphone5 font-size: 62.5%; } @media (max-width: 414px) { html { //iphone6+ font-size: 80.85%; } } @media (max-width: 375px) { html { //iphone6 font-size: 73.24%; } }这样做的结果，有两个很明显的缺点。
适配屏幕的尺寸不是连续的。在自己的 css 文件中添加大段的这样查询代码。增加了 css 文件的体积。后来参考淘宝移动端页面适配规则，使用 js 获取客户端的宽度，根据设计稿的原型动态的计算font-size 的值。
详细的内容请看这里 根据iPhone6设计稿动态计算rem值
如果我们使用的是rem 单位，使用 js 动态计算font-size 值的话，我们可以无限适配最大和最小的终端屏幕。但是当用户的屏幕超过一定的尺寸以后还继续显示h5页面的话对用户会很不友好。 我们参看下京东和淘宝的h5 页面
我们看到了都是定义了页面的最大和最小宽度。这样在屏幕超过一定的尺寸以后可以更友好的展示（当然这不是必须的）。
我给自己的产品页面定义的最大的宽度和最小宽度分别是：
{ max-width:640px; min-width:320px; }在移动端使用 a标签做按钮的时候，点按会出现一个“暗色”的背景，去掉该背景的方法如下
CSS 1 2 3 a,button,input,optgroup,select,textarea { -webkit-tap-highlight-color : rgba ( 0,0,0,0 ) ; /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/ }使用 a标签的时候，移动端长按会出现一个 菜单栏，这个时候禁止呼出菜单栏的方法如下：
CSS 1 2 3 a, img { -webkit-touch-callout : none ; /*禁止长按链接与图片弹出菜单*/ }
CSS 1 2 3 body { -webkit-overflow-scrolling : touch ; }
单行截断字符串,这里必须指定字符串的宽度
CSS 1 2 3 4 5 6 7 8 { /*指定字符串的宽度*/ width : 300px ; overflow : hidden ; /* 当字符串超过规定长度，显示省略符*/ text-overflow : ellipsis ; white-space : nowrap ; }
之前在做布局的时候使用calc 出现了很严重的线上 BUG。后来就深究了下这个属性的使用。 calc好用的地方就是，可以在任何单位之间进行换算。但是浏览器支持的不是很好。看一下can i use 截图：
而且在使用的时候要加上厂商前缀，达到兼容性。不过现在不推荐使用，毕竟，浏览器支持有限。 示例代码：
CSS 1 2 3 4 5 6 7 8 9 #formbox { width : 130px ; /*加厂商前缀，操作符（+，-，*，/）两边要有空格）*/ width : -moz-calc ( 100% / 6 ) ; width : -webkit-calc ( 100% / 6 ) ; width : calc ( 100% / 6 ) ; border : 1px solid black ; padding : 4px ; }研究过淘宝，天猫，京东的 h5端页面看到这个单位用的不多，主要还是兼容性的问题吧。
line-height 一个很重要的用途就是让我们的文本可以在父级元素中垂直居中，但是在使用它的过程中也会遇到一些问题。
先来看一个实例，如下图：
代码也很简单，就是当我们在div 中定义的字体很大的情况下，我们看到字体和父级元素之间有一些空隙。那么这是为什么？
我们查一下 line-height 的定义，如下：
normal 默认。设置合理的行间距。number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。length 设置固定的行间距。% 基于当前字体尺寸的百分比行间距。inherit 规定应该从父元素继承 line-height 属性的值。
所以在以上的情况我们要想使，我们的字体能够撑满我们的容器，就需要给父级容器添加 line-height属性且值为 100%
代码和效果如下：
那么为什么会出现上面的问题呢？
line-height 与 font-size 的计算值之差(行距)分为两半，分别加到一个文本行内容的顶部和底部。
所以，可以得出下面的一个公式：
空白间距 = line-height – font-size
所以，当设置为line-height 的值为100%的时候，line-height的值就等于 font-size的尺寸，此时的空白间距为0。
很多时候我们要把图标和文字配合使用，而且需要图标和文字都能够垂直居中。如下图所示：
如果要实现文字的垂直居中很容易，只需要使用line-height=父容器高度 。但是要想使图标能够垂直居中就比较麻烦。
正常情况下我们的文字或者说相邻的容器，都应该和文字保持在相同的底线上，如下图：
明显的可以看到我们的返回图标不是垂直居中的。那么应该怎么样使图标垂直居中呢？
首先，我们先来搞清楚几个线的关系（图片来源于网络，侵权请告知）：
这样我们就要用到 vertical-align 这个属性，最重要的一点是:指定了行内（inline）元素或表格单元格（table-cell）元素的垂直对齐方式
baseline：将支持valign特性的对象的内容与父级元素基线对齐sub：元素基线与父元素的下标基线对齐。super：元素基线与父元素的上标基线对齐。top： 元素及其后代的顶端与整行的顶端对齐。text-top：元素顶端与父元素字体的顶端对齐。middle：元素中线与父元素的基线对齐。bottom：元素及其后代的底端与整行的底端对齐。text-bottom：元素底端与父元素字体的底端对齐。percentage：用百分比指定由基线算起的偏移量。可以为负值。基线对于百分数来说就是0%。length：用长度值指定由基线算起的偏移量。可以为负值。基线对于数值来说为0。（CSS2）
看下边的一段 html ：
XHTML 1 2 3 4 5 <div class = "title-div" > <img src = "1_icon.png" alt = "返回图标" > <!-- <span >图标位置</span> --> <span> 我就是标题 </span> </div>最初的结果是这样子的
我们想实现如下图所示的结果，图标相对于右边的字体居中：
这个时候我们就要使用vertical-align属性和设置他的length属性，即设置我们的图标相对与文字基线的偏移量。 当我们加入属性的时候很容易使图标和文字都垂直居中。
CSS 1 2 3 { vertical-align : 15px ; }这个时候就会是我们的图标和字体相对于父级元素居中。
flex 现在 pc 端支持的不好（主要是因为还有很多 IE8，9的用户存在。）大多情况下我们都是在移动端使用flex布局。但是就算是这样，也会有很多坑人的 bug出现。谈谈一些基本的使用经验吧，什么时候使用 flex 。
先来看一个产品模型如下图
我的左边商品和右边商品的宽度是一样的。当我看到这个模型的时候，第一件就是想就是使用 flex 让我们两列商品列表平分屏幕区域。这个时候就是用flex 来做。父级元素如下定义
CSS 1 2 3 4 5 6 7 8 9 10 11 { margin-bottom : .5rem ; display : box ; display : -webkit-box ; display : -ms-flexbox ; display : flex ; display : -webkit-flex ; -webkit-flex-flow : row ; -ms-flex-flow : row ; flex-flow : row ; }
使用 flex 的时候一定要记得加厂商前缀（目前使用方式都有三种写法：1，旧的2，过度的3，新的)。不然肯定会有兼容性问题。
CSS 1 2 3 4 5 6 { display : -webkit-box ; display : -ms-flexbox ; display : flex ; display : -webkit-flex ; }先看我的代码：
CSS 1 2 3 4 5 6 7 8 { box-flex : 1 ; -webkit-box-flex : 1 ; -webkit-flex : 1 ; -ms-flex : 1 ; flex : 1 ; width : 18.5rem ; }这里只是让左右两边平分屏幕的宽度。 之前使用 flex在安卓4.3的手机上遇到一个问题。正常的页面应该如下图所示，
但是在 安卓4.3的手机上却是如下的结果
后来研究了下天猫的页面（因为之前使用这个 flex 就是参考天猫来学习的），看到他们在定义flex值的时候 都会有这样的一个属性width=0;
而且当我给我的页面也加上这个属性的时候，页面的布局也变得正常了。我现在想不明白愿意是什么，只能当一个 hack 来使用。如果大家也遇到这个问题，请试一下添加这个属性。如果大家知道为什么这么用，请指教一下。
给大家推荐一个网站（点击这里）可以检测我们平时使用的 css 属性改变元素样式的时候，触发的是 cpu还是 gpu ，特别是在做动画的时候，如果使用 gpu 渲染图形，可以减少 cpu 的消耗，提高程序的性能。
比如我们做一个 slider 动画切换图片位置的时候，会使用margin-left的属性，通过网站查询该属性值得到如下的结果
由上可以知道使用margin-left 的时候会处罚页面的重绘和重排。
但是当我们使用css3新属性transform 来代替传统的 margin-left 来改变元素位置的时候对页面有什么影响呢？先来看下网站查询的结果：
由查询结果可以知道，使用transform 不会触发任何的重绘。而且会触发 gpu 来帮助页面的排版。即使用GPU操作渲染动画，减少cpu的消耗，提高性能。
css动画简单实例，css代码如下：
CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 .lottery-animation { -webkit-animation : lottery-red 2s ; animation : lottery-red 2s ; -webkit-animation-iteration-count : infinite ; animation-iteration-count : infinite ; } @-webkit-keyframes lottery-red { from { -webkit-transform: rotateY(0deg); transform : rotateY ( 0deg ) ; } to { -webkit-transform : rotateY ( 360deg ) ; transform : rotateY ( 360deg ) ; } } @keyframes lottery-red { from { -webkit-transform: rotateY(0deg); transform : rotateY ( 0deg ) ; } to { -webkit-transform : rotateY ( 360deg ) ; transform : rotateY ( 360deg ) ; } }效果如下图：
这里我只是对图像标签添加了一个 class="lottery-animation"
我截取动态图片软件的问题，我的这个gif 截图动画有些卡顿，不流畅。在正常机器上是没有问题的（如果大家有mac下好用的 gif截图软件可以推荐给我，谢谢！）。
