移动端 CSS 常用小结
作者 乔淑夷  发布于 2017年07月13日  阅读 1524
您目前处于:开发&语言  -  HTML5

Meta 标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />

移动端页面添加 meta 标签,可以让文档的宽度与设备的宽度保持1:1,文档的最大宽度比例是1.0,不允许用户点击屏幕放大浏览。

禁止 iOS 自动识别电话和 Android 自动识别邮箱

<meta name="format-detection" content="telephone=no"/>  
<meta name="format-detection" content=“email=no"/>

禁止文本选择

-webkit-user-select:none

屏蔽输入框阴影,去掉按钮默认样式

-webkit-appearance:none

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;  
}

css3 多行文本换行

overflow : hidden;  
text-overflow: ellipsis;  
display: -webkit-box;  
-webkit-line-clamp: 2;  
-webkit-box-orient: vertical;

字体不换行,溢出省略号

width:300px;  
white-space: nowrap;  
text-overflow:ellipsis;   
overflow:hidden;

清除浮动

.clearfix:after {  
  content: ".";  
  display: block;  
  height: 0;  
  visibility: hidden;  
  clear: both;  
}  
.clearfix {  
  *zoom: 1;  
}

表格内容自动换行

table-layout :fixed;word-break: break-all;word-wrap :break-word;

iOS 快速回弹

在 iOS 上如果想让一个元素拥有像 Native 的滚动效果,可以这样写

overflow-y: scroll;  
-webkit-overflow-scrolling: touch;

css3 元素居中

3d

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

2d

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

本文受原创保护,未经作者授权,禁止转载。 linkedkeeper.com (文/乔淑夷)

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
分享到: 更多