码迷,mamicode.com
首页 > 移动开发 > 详细

移动开发(webapp)过程中的小细节总结

时间:2016-06-15 15:45:28      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:

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)过程中的小细节总结

标签:

原文地址:http://www.cnblogs.com/kingplus/p/5587387.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!