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就禁止自动调整，至因而否全局活局部使用看本身的项目需求（废话@-@）。