专栏首页京程一灯总结 | 移动端 CSS 常用小结

总结 | 移动端 CSS 常用小结

分类:总结,CSS

难度:★☆

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

本文分享自微信公众号 - 京程一灯(jingchengyideng)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-07-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 你无法检测到触摸屏

    无论你可能会怎么想,目前,在浏览器里可靠地检测当前的设备是否有一个触摸屏是不可能的。

    疯狂的技术宅
  • 在 Docker 中配置 Headless Chrome Node.js 服务器

    随着开发过程中自动 UI 测试的兴起,无头浏览器已变得非常流行。网站爬虫和基于 HTML 的内容分析也有无数的用例。

    疯狂的技术宅
  • 13个帮你提高开发效率的现代CSS框架[每日前端夜话0x67]

    本文将向你介绍一系列顶级CSS框架。有些人可能听说过,也可能对有些人是全新的。但它们都提供了各种有用的先进功能,可以改善你的工作流程。开始吧!

    疯狂的技术宅
  • if-else判断语句中经常犯的一个错误

    当输入小于0和0-50之间的数时,均正常输出,但是!!!当输出大于50的时候,就出现了如上图所示的问题:输入59以后,不但输出了超过50,还输入...

    WeiMLing
  • 数据库知识点总结

    星辉
  • 会计学原理 读书笔记

    经济利益 financial well-being 会计(accounting)是确认,记录,传递具有相关性,可靠性和可比性的有关组织(企业)经营活动信息的...

    lilugirl
  • 手把手教你构建食物识别AI:小白轻易可上手,人气高赞有Demo | 资源

    最近,工程师Nidhin Pattaniyil和Reshama Shaikh写了一篇从零开始构建网页&App版食物识别AI的教程,有数据、有教程、有Demo,简...

    量子位
  • 系统架构师论文-论信息系统的架构设计

    本文讨论医保通零距离实时赔付系统项目的架构设计。该系统主要实现了中国人寿保险公司通过与医院合作,让中国人寿客户在出险住院并完成治疗后,即可获得实时的健康险理赔服...

    cwl_java
  • NeurIPS 2019 马上要开了,如何为现场参会做准备?

    久负盛名的机器学习顶会 NeurIPS 2019 马上就要在加拿大温哥华开幕了。如今的 NeurIPS 除了参数人数众多之外,从 12 月 8 日一直到 12 ...

    AI科技评论
  • Eclipse导入SpringBoot项目pom.xml第一行报错Unknown error

    1、网上搜的都说是将SpringBoot2.1.5版本降级到SpringBoot2.1.4版本,感觉这治标不治本啊,以后想升级不是玩完了。

    别先生

扫码关注云+社区

领取腾讯云代金券