移动端 CSS 常用小结
您目前处于:开发&语言  -  HTML5  2017年07月13日  阅读 1644

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 (文/乔淑夷)

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

赞赏支持
分享到: 更多
作者  乔淑夷  发布于 2017年12月30日  阅读 70
作者 何昆 发布于 2017年08月14日  阅读 2007
如果你是一个WEB开发人员,你肯定遇到过跨域的问题。什么是跨域?我先假装你们不知道(^..^嘻嘻),域名你们都知道,比如www.baidu.com,www.jd.com等都属于域名,如果我想在京东的页面中通过一个关键字来请求百度获取搜索结果,这就是一个跨域请求。举个例子:民间一位姓陈的人家有一手上好的酿酒本事。他们家立下规矩,这门手艺只传自家孩子。那如果我这个姓何的想去学肯定会被扫地出门,除非得到...
作者  乔淑夷  发布于 2017年07月31日  阅读 1474
开发过程中我们遇到的一些JS的问题,总结一下,未完待续 ……1. 滚动条滚动到页面容器底部,设置滚动条距离顶部的高度为容器内容高度和容器可视区域高度的差,并添加动画。var obj = document.getElementById('msgList'); if(obj.scrollHeight > obj.clientHeight){ $(obj).animate({ ...
作者  乔淑夷  发布于 2017年07月27日  阅读 1207
组件(Component)是Vue.js的核心部分,组件的作用域是孤立的,所以不能在子组件模板内直接引用父组件的数据,但是组件之间的通信是必不可少的。组件A在其模板中使用了组件B,A组件要向B组件传递数据,B组件要将其内部发生的事情告知A组件,那么A、B组件怎么进行通信呢?Vue.js父子组件的关系可以总结为props down,events up,父组件通过props向下传递数据给子组件,子组件...
作者  乔淑夷  发布于 2017年07月19日  阅读 562
Yeoman是Google团队开发的项目,通过内部三个工具yo,grunt,bower协同工作,可以让网络前端开发者快速打造一个漂亮的网络应用。yo:脚手架工具,用于构建一个新的项目框架,项目工程依赖目录和文件生成工具,项目生产环境和编译环境生产工具bower:web开发的包管理,类似npm,npm专注于nodejs模块,bower专注于css、js、图像等前端内容管理,bower的运行依赖于版本...