移動開發（webapp）過程中的小細節總結

標籤：

1.阻止旋轉螢幕時自動調整字型大小

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {    -webkit-text-size-adjust:100%;}

2.去掉input在ios下的預設效果

input{    resize: none;    -webkit-appearance:none;}

3.去掉手持功能點擊時出現的透明層

a,button,input{    -webkit-tap-highlight-color: rgba(0,0,0,0);    -webkit-tap-highlight-color: transparent; }

4.CSS3 box-flex 屬性

執行個體

定義兩個可伸縮的 p 元素。如果父元素的總寬度是 300 像素，則 #p1 的寬度是 100 像素，而 #p2 的寬度是 200 像素：

#p1{-moz-box-flex:1.0; /* Firefox */-webkit-box-flex:1.0; /* Safari 和 Chrome */box-flex:1.0;border:1px solid red;}#p2{-moz-box-flex:2.0; /* Firefox */-webkit-box-flex:2.0; /* Safari 和 Chrome */box-flex:2.0;border:1px solid blue;}

 

瀏覽器支援

目前沒有瀏覽器支援 box-flex 屬性。

Firefox 支援替代的 -moz-box-flex 屬性。

Safari、Opera 以及 Chrome 支援替代的 -webkit-box-flex 屬性。

5.HSL顏色

HSL模式基於一個360色相環。第一個數字代表色相，60度時為黃色。120度綠色。180度青色。240度藍色。300度洋紅色。360度紅色。第二個數數字代表飽和度。值為百分比。第三個數字是亮度，值為百分比。 如：hsl(255,90%,50%)

移動開發（webapp）過程中的小細節總結