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就禁止自動調整，至因而否全局活局部使用看本身的項目需求（廢話@-@）。