移动开发（webapp）过程中的小细节总结

Posted 2020-07-25 kingplus

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%)