web移动端小tip，box-flex

1,移动端页面

最重要的标签：

<meta content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no,target-densitydpi=high-dpi]" name="viewport">

在多数ios和android设备的浏览器都支持viewport meta元素覆盖默认的画布缩放设置。在标签中插入meta标签，设置相应属性即可，如上代码，name=”viewport” content中width=device-width表示浏览器页面宽度等于设备宽度（同理可以设置高度，也可指定具体值），initial- scale=1表示页面不缩放保持，mininum-scale=1和maximum-scale=1表示允许用户最小缩小至原大小和扩大到原大小（实际 就是不让缩放^^），user-scaleable=no 表示禁止缩放, target- densitydpi = high-dpi表示适配高分辨率的屏幕，还可以取值为dpi_value | device-dpi| high-dpi | medium-dpi | low-dpi，后面的四个定性，第一个定量，即dpi_value是DPI值，device-dpi是使用设备原本的 dpi 作为目标 dp，不发生默认缩放，而后面的三个是指dpi取值在一定范围的表示。

2,css3新增样式

 

强大的CSS属性box-flex

 

display:-webkit-box;

 

<ul>
   <li>11</li>
   <li>22</li>
   <li>33</li>
</ul>    

 

 

 

ul{display:-webkit-box;}
ul li{-webkit-box-flex:1;}
ul li:first-child{background-color:#fafafa;}
ul li:nth-child(2){ background-color:#ccc; }
ul li:last-child{background-color:#fbfbfb; }

 

 

效果是这样的，在浏览器里是居中的，由于图片颜色问题这里显示不够清楚。

示例2

<div class="t-box">
    <div class="demo1">
        <input placeholder="百分百宽度输入框" type="text">
    </div>
</div>

 

 

.demo1{display: -webkit-box;}
.demo1 input{-webkit-box-flex: 1;width: 100%;padding:4px;height:18px;line-height:18px;border: solid 1px #ddd ;display: block;}

 

页面就是这个样子的~

 

-webkit-text-size-adjust:none;

做项目的时候发现一个问题，就是当竖屏的屏的时候显示效果不错，但是当横屏的时候，字体 会变大，无论你怎么设置字体大小都无效，后来才知道是text-size-adjust在作怪。浏览器默认会根据当前屏幕和内容作调整，在webkit内核的浏览器中只需 要-webkit-text-size-adjust:none就禁止自动调整，至于是否全局活局部使用看自己的项目需求（废话@-@）。