详细解析HTML5开发移动项目经验谈
讲了这么多，有人可能会疑惑为什么这些都不是用在CSS中的?别急，慢慢来，现在就介绍如何在样式中运用，按照上述屏幕分辨率的四种划分，我们可以看到基本可以舍弃ldpi了。
/* 中分辨率屏幕 */
/*高分辨率屏幕*/
/*超高分辨率屏幕(传说中的Retina屏)*/
上面就是在css中的用法，把我们需要的css代码包含在大括号中就能用了，是不是很方便的样子%>_
针对视口宽度不大于768像素的情况加载大括号中的样式。
虽然我们可以把设备的分辨率可以分为这几类，但是屏幕的尺寸实在太多，如果针对每一种尺寸写一种样式，我觉得设计师和前端面不用干别的了，因为开发成本实在太大，而且没有必要，我们只需要针对绝大多数的设备结合媒体查询和弹性布局来调整，减少开发成本。
2.CSS3新增属性
现在移动端两大阵营ios和android都是基于webkit内核的，而webkit内核对CSS3的支持走在了前面，在这里我们可以抛开翔一样的ie家族，尽情享受多彩绚丽CSS3世界吧!
CSS3给我们带来了如：文字阴影(text-shadow)、盒子阴影(box-shadow)、圆角(border-radius)、背景渐变(background: linear-gradient(#000, #fff))、2D变换(transition)、动画(animation)等大家耳熟能详的常用属性外，还有如-webkit-mask、-webkit-text-stroke、-webkit-nbsp-mode、-webkit-tap-highlight-color、-webkit-box-reflect、-webkit-marquee、-webkit-box等webkit内核私有属性，至于这些属性其他浏览器支持程度，有兴趣的可以自己研究研究，这上面的每一个属性都有自己的使用场景，就看如何灵活运用。今天我不全部列出，仅简单介绍几个。
(1)、介绍的第一个就是display：-webkit-box，我们知道元素大致分为内联元素、块状元素和介于两者之间的元素，当然还有inline-table、table-cell等神马的，那么display: -webkit-box怎么用呢，什么举个应用场景，对于下图所示的情况，父元素被1、2、3均分，且2和1之间间隔10px，你会怎么做?
这时候我们可以试试新的display:-webkit-box，另外还有如下属性配合使用，
-webkit-box-orient子元素排列方向 horizontal | vertical | inline-axis | block-axis | inherit，其中默认值是inline-axis，即横向排列
-webkit-box-flex 子元素之间比例，仅作一个系数
-webkit-box-direction 子元素排列顺序 normal | reverse | inherit，其中默认值是normal
-webkit-box-flex-group 以组为单位的流体系数
-webkit-box-ordinal-group 以组为单位的子元素排列方向
-webkit-box-lines 子元素是否换行，类似word-wrap和word-break的作用
-webkit-box-align 子元素垂直方向的对其方式
-webkit-box-pack 子元素水平方向的对其方式
这些配合使用的属性我们全部默认即可
CSS：
HTML：
怎么理解上面的代码呢，父亲有一块地，要分给兄弟几个，除去老大和老二之间的分割线所占的那块，剩下的部分均分的分数由li的兄弟个数和box-flex的总数确定，现在一共三兄弟，每兄弟的box-flex都是1，所以就总分数=1*1+1*1+1*1=3。
如果代码稍作修改
那么现在老二的box-flex是2了，总分数就是1*1+1*2+1*1=4，其中老大老三各占一份，老二占两份，显示效果如下：
(2)、-webkit-text-size-adjust:none;我做项目的时候发现一个问题，就是当竖屏的屏的时候显示效果不错，但是当横屏的时候，字体会变大，无论你怎么设置字体大小都无效，后来才知道是text-size-adjust(https://developer.mozilla.org/en-US/docs/CSS/text-size-adjust)在作怪。浏览器默认会根据当前屏幕和内容作调整，在webkit内核的浏览器中只需要-webkit-text-size-adjust:none就禁止自动调整，至于是否全局活局部使用看自己的项目需求。
如上图所示，很明显当手机由竖屏转向横屏的时候主题区域的文字自动变大，跟你自己设置的大小无关，当你设置了-webkit-text-size-adjust:none后横屏的效果是这样的
