• 在移动端浏览器会遇见点击出现高亮的效果，在某项项目是不需要这个默认的效果的。那么我们通常会把这个点击的颜色设置成透明。当然也可以设置成自己喜欢的颜色。
    -webkit-tap-highlight-color:transparent;/清除点击高亮效果/

  • 通过css3的新属性box-sizing我们能够让盒子有限顾及自己的尺寸而不是内容,避免出现多余的滚动条。

    -webkit-box-sizing: border-box;/*webkit内核兼容性写法*/
box-sizing: border-box;
  • 在移动设备的浏览器中input标签一般会有默认的样式,通过border=none,outline=none无法去除,比如立体效果,3d效果等等,我们需要添加下列样式。
    -webkit-appearance: none;/*在移动端清除浏览器默认样式*/

  • 考虑到移动设备在大尺寸的的屏幕不会过度缩放 失去清晰度,在小尺寸的屏幕中不会出现布局错乱的问题。

    max-width: 640px;  /*在行业当中的移动端的设计图一般使用的是640px*/
min-width: 300px;  /*在移动设备当中现在最小的尺寸320px*/

  • nth-child()如果有多个不同兄弟节点获取的时候,索引需要特殊计算,我们可以限定在某一个类型上,语法如下

    • E:first-of-type匹配同类型中的第一个元素E。
    • E:last-of-type匹配同类型中的最后一个元素E。
    • E:nth-of-type(n) 匹配同类型中的第n个元素E。
Last modification：July 18, 2018
© Allow specification reprint
If you think my article is useful to you, please feel free to appreciate