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