移动端开发常见的css总结

第一次正式接触移动端的开发，感觉还是学到一些东西的，因为之前都是自己乱七八糟的写一点，今天进行稍微规范点的总结一下，还有，还有，就是对于写代码的态度，一定要比较认真，不懂的一定要得出一个结论弄懂。

1: 对于背景图片问题

• 通常对于并不是要求特别精准精细的设计，一般使用background:url(bground.png);一般设置背景图，但是背景图并不会自动撑开空间，所以需要设置宽度和高度，宽度可能使用百分比，对于高度，一般按照iphone6里面的高度写死。与之搭配的几个属性包括：

     background-position: center;
     background-repeat: no-repeat;
     background-size: contain;(还包括cover，是铺满整个区域)
     background-image: url(/common/images/play@3x.png);
     background-color: transparent;

还有刚接触的一点是，背景图可以在一个里面设置多层：

background-color: rgba(0, 0, 0, .3);
    background-image: url(/common/images/theme-frame@3x.png);
    background-size: 88%;
    background-position: center;
    background-repeat: no-repeat;

background-color和background-image可以一起使用，来形成漂浮在上面的蒙罩。

• 也可以使用img标签进行引入，这样必须是图片比例固定的，一般在要求比较精准的地方使用。

2: 消除链接、图片等一点击出现蓝色阴影的问题

 div,a,img {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select:none;
}

3: 对于一些文字比较多，要设置显示 ...
自己刚开始的第一反应是使用js，但js有很多问题，比如加载比较慢，会出现闪跳等问题，原来这个是使用css进行解决呀。 上代码

.descirbe{
  text-overflow: ellipsis; //设置省略号
  overflow: hidden;  //  设置超出的部分进行隐藏
  -webkit-line-clamp: 1; // 设置显示的行数为1，若超出一行则隐藏
  -webkit-box-orient: vertical;
  display: -webkit-box;
}

ps：对于移动端的开发，能使用css的，就尽量不要使用js，因为js是异步加载，会比较慢，或者在html的下面直接写js代码，也会快一点。

4: 想记录一个背景渐变的属性 backgound:linear-gradient：

.set-item-mask {
   position: absolute;
   height: 50px;
   width: 100%;
   margin-top: 140px;
   background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
 }

5: 对于链接跳转的，一般都使用a标签，然后display：block啥的进行样式的调整，不要使用button啥的用js控制。

6: 对于视频剧集，可以进行横向滑动。
效果：

屏幕快照 2017-06-22 下午5.54.59.png

直接使用css就可以搞定了。

.serial-item-wrap.serial-episode-list {
    width: 100%;
    height: 36px;
    margin-bottom: 10px;
    overflow: hidden;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    -webkit-overflow-scrolling: touch;
    text-align: justify; 
    &::-webkit-scrollbar {
        display: none;
    }

    .serial-item {
      margin-bottom: 0;
    }
  }