移动端CSS常用小结
2017-12-14 15:57
411 查看
1. Meta标签
移动端页面添加meta标签,可以让文档的宽度与设备的宽度保持1:1,文档的最大宽度比例是1.0,不允许用户点击屏幕放大浏览。
2. 禁止IOS自动识别电话和Android自动识别邮箱
3. 禁止文本选择
4. 屏蔽输入框阴影,去掉按钮默认样式
5. border-box
想要设置一个宽度100%的元素,又要设置元素固定的padding-left或padding-right,还有边框,就会出现水平滚动条,可以用box-sizing来解决。
6. css3多行文本换行
7. 字体不换行,溢出省略号
8. 清除浮动
9. 表格内容自动换行
10. IOS快速回弹
在IOS上如果想让一个元素拥有像Native的滚动效果,可以这样写
11. css3元素居中
/* translate2d实现方式 */
12. Retina屏的移动设备实现1px线(0.5px线),采用伪类+transform的方式
13. 动态bar实现
14. aside-right menu动画
15. gradient过渡兼容
移动端页面添加meta标签,可以让文档的宽度与设备的宽度保持1:1,文档的最大宽度比例是1.0,不允许用户点击屏幕放大浏览。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
2. 禁止IOS自动识别电话和Android自动识别邮箱
<meta name="format-detection" content="telephone=no"/> <meta name="format-detection" content=“email=no"/>
3. 禁止文本选择
-webkit-user-select:none
4. 屏蔽输入框阴影,去掉按钮默认样式
-webkit-appearance:none
5. border-box
想要设置一个宽度100%的元素,又要设置元素固定的padding-left或padding-right,还有边框,就会出现水平滚动条,可以用box-sizing来解决。
*, *:before, *:after { -webkit-tap-highlight-color: transparent; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
6. css3多行文本换行
{ overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
7. 字体不换行,溢出省略号
{ width:300px; white-space: nowrap; text-overflow:ellipsis; overflow:hidden; }
8. 清除浮动
.clearfix:after { content: "."; display: block; height: 0; visibility: hidden; clear: both; } .clearfix { *zoom: 1; }
9. 表格内容自动换行
table-layout :fixed;word-break: break-all;word-wrap :break-word;
10. IOS快速回弹
在IOS上如果想让一个元素拥有像Native的滚动效果,可以这样写
overflow-y: scroll; -webkit-overflow-scrolling: touch;
11. css3元素居中
/* translate3d实现方式 */ position: absolute; top: 50%; left: 50%; -ms-transform: translate3d(-50%,-50%,0);/*IE9*/ -moz-transform: translate3d(-50%,-50%,0);/*Firefox*/ -webkit-transform: translate3d(-50%,-50%,0);/*Safari and Chrome*/ -o-transform: translate3d(-50%,-50%,0);/*Opera*/ transform: translate3d(-50%,-50%,0);
/* translate2d实现方式 */
position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%,-50%);/*IE9*/ -moz-transform: translate(-50%,-50%);/*Firefox*/ -webkit-transform:translate(-50%,-50%);/*Safari and Chrome*/ -o-transform: translate(-50%,-50%);/*Opera*/ transform: translate(-50%,-50%);
12. Retina屏的移动设备实现1px线(0.5px线),采用伪类+transform的方式
.menu li{ position: relative; } .menu li:after{ content: ''; position: absolute; left: 0; width: 100%; height: 1px; background: #E1E1E1; -webkit-transform: scaleY(0.5); -moz-transform: scaleY(0.5); -o-transform: scaleY(0.5); transform: scaleY(0.5); }
13. 动态bar实现
<div class="i-default-bar"> <div class="i-bar"></div> </div> .i-default-bar { height: 4px; background: #EAEAEA; border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; -o-border-radius: 1px; } .i-bar { height: 100%; width: 0; background: #FF8885; border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; -o-border-radius: 1px; transition: all 1s linear; -moz-transition: all 1s linear; -webkit-transition: all 1s linear; -o-transition: all 1s linear; } $('.i-bar').css('width','50%');
14. aside-right menu动画
.aside { position: fixed; top: 0; right: 0; z-index: 100; visibility: hidden; width: 100%; height: 100%; background: #fff; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; } .aside-vertical { width: 100%; height: 100%; top: 0; z-index: 100; } .aside-right { visibility: visible; -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .aside-right.aside-open { visibility: visible; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
15. gradient过渡兼容
background:-moz-linear-gradient(top, #FFFFFF, #000000); background:-webkit-linear-gradient(top, #FFFFFF, #000000); background:-ms-linear-gradient(top, #FFFFFF, #000000); background:linear-gradient(top, #FFFFFF, #000000); -ms-filter:"progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#FFFFFF, endColorstr=#000000)"; +background:#f9f9f9;/*ie6、7*/
相关文章推荐
- 移动端CSS常用小结
- CSS清除浮动常用方法小结
- CSS之清除浮动的几种常用方法小结
- CSS清除浮动常用方法小结
- 常用的CSS缩写语法小结可帮助你减少CSS文件大小
- CSS清除浮动常用方法小结 CSS clear both {overflow:auto;zoom:1;}
- 【css】常用知识点小结
- CSS清除浮动常用方法小结 CSS clear both {overflow:auto;zoom:1;}
- HTML+CSS布局(常用css控制属性)小结
- CSS清除浮动常用方法小结
- 移动端的一些常用css的设置 .(2)
- CSS清除浮动常用方法小结
- 那些不常用却很有的CSS小结
- 移动端常用的 reset.css
- 针对常用移动端H5页面CSS 样式控制。禁用页面文本复制、禁用系统默认菜单、禁止链接点击高亮的处理。。。。
- CSS清除浮动常用方法小结 CSS clear both {overflow:auto;zoom:1;}
- 常用的CSS缩写语法一些方法小结
- CSS清除浮动常用方法小结
- CSS清除浮动常用方法小结
- web开发中常用css兼容代码(包括移动端)