移动开发(webapp)过程中的小细节总结
2016-06-15 14:37
537 查看
1.阻止旋转屏幕时自动调整字体大小
2.去掉input在ios下的默认效果
3.去掉手持设备点击时出现的透明层
4.CSS3 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%)
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 与sass
- 部署maven时,src/main/resources里面配置文件加载不到webapp下classes路径下的问题
- webApp移动开发之REM
- web.xml中webAppRootKey
- SpringMVC 上下文webApplicationContext
- 【web前端】记webApp开发记录
- web.xml中webAppRootKey
- 如此繁荣的移动webapp开发市场:总结当下的一些移动web开发套件
- jetty项目部署与配置
- web.xml中webAppRootKey
- Framework7中文教程-中文演示DEMO
- webapp开发
- WebApp中调试jsavascript
- webkit webApp 开发技术要点总结
- webapp
- HTML5实现webApp中图片轮播的效果(二)之 iSlider 爬坑经历
- springMvc中WebApplicationContext的继承关系
- 服务器启动时Webapp的web.xml中配置的加载顺序
- log4j配置webapp日志系统
- Log4j 配置 的webAppRootKey参数问题