• 移动端CSS小结


    Meta 标签

    <meta name="viewport"  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.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;

    字体不换行,溢出省略号

    200px;  

    white-space: nowrap;  

    text-overflow:ellipsis;   

    overflow:hidden;


    清除浮动影响

    .clear:after {  

      content: ".";  

      display: block;  

      height: 0;  

      visibility: hidden;  

      clear: both;  

    }  

    .clear {  

      *zoom: 1;  

    }


    表格内容自动换行

    table-layout :fixed;

    word-break: break-all;

    word-wrap :break-word;


    iOS 快速回弹

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

    overflow-y: scroll;  

    -webkit-overflow-scrolling: touch;


    CSS3 元素居中

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

  • 相关阅读:
    洛谷[P1002]过河卒
    ACM-Teleportation
    ACM-Team Tic Tac Toe
    Data_Structure04-树
    Data_Structure03-栈和队列
    Data_Structure02-线性表
    Data_Structure01-绪论
    C语言第二次实验报告
    C语言第一次实验报告
    mysql
  • 原文地址:https://www.cnblogs.com/gaoxinwu/p/7351565.html
Copyright © 2020-2023  润新知