提升用户体验是前端开发工程师一直努力的方向
所谓提高用户体验，就是给用户在使用过程中带来方便，比如提高加载时速度，亮眼的色彩搭配，添加动画效果等，那么作为一个卑微前端，可以为提高用户体验奉献些什么呢？
优秀博文推荐：前端提高用户体验指南
一、前端提升用户体验的解决方案
二、具体内容
1.布局优化
css计算属性的使用
这样定左不定右的布局，右侧自然应该适应剩余宽度。
.left{
width: 200px;
height: 100%;
border: red 5px solid;
}
.right{
width: calc(100% - 200px);
border: #55007f 5px solid;
}
再比如这样，把某一宽度平均分成n份
相关的代码如下：
.container{
height: 100%;
display: flex;
}
.container div{
height: 100px;
width: calc(100% / 7);
border: #007AFF solid 4px;
}
2.滚动优化
scroll-snap-type:属性定义在滚动容器中的一个临时点（snap point）如何被严格的执行。
光看定义有点难理解，简单而言，这个属性规定了一个容器是否对内部滚动动作进行捕捉，并且规定了如何去处理滚动结束状态。让滚动操作结束后，元素停止在适合的位置
相关代码如下所示：
.scroll_box{
overflow: auto;
scroll-snap-type: x mandatory;
}
.scroll_box div{
scroll-snap-align: center;
}
3.图片拉伸问题
打个比方，假如商品列表，商品缩略图宽高比例不一样时，就会出现如下图情况，显然严重不符合审美效果，
这时如果给图片规定宽高，预览图就变形，不好看了，
接下来，重点来了，上代码：
.goods_item img{
width: 100%;
height: 2rem;
object-fit: cover;
}
object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。
不过就是兼容性差了一点
4.按钮用户体验
可以加上适当的鼠标移入、点击效果：
.btn:hover{
background: #088cff;
cursor: pointer;
}
.btn:active{
background: #000088;
}
如上图，当点击按钮频率过快时，会选中按钮文字，我们可以这样
.btn{
user-select: none;
}
这样无论怎么点击都不会选中文字了，网课期末考试题目无法选中复制就是这样实现的呢。
5.加载动画
凡是等待加载的时候，都可以用上一些好看的动画，下面是多种css3写的动画，好看吧。戳这里下载。
6.边界保护
边界保护就是给元素边界撑合适的padding值，如下有图，好看得多了。
7.PC端文字选择优化
正常情况下，我们选择文字是这样的：
但是有时用户或许需要复制整段文字，或者电话号码啥的 ，我们可以这样做，把需要选择复制到一起的内容装到一个元素内，给元素添加下面样式：
{
user-select: all;
}
8.处理动态文本超长问题：
如下图，显然不符合美观视觉
此时我们可以这样写，文字不换行溢出显示省略号：
{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width:200px//宽度看具体情况而定，父级限定宽度也可以
}
文字多行行溢出显示省略号：
{
width:200px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
9.图片加载失败处理
<img src="jdkjk" onerror="this.src='https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1731029843,3592757081&fm=15&gp=0.jpg'" >
上图左边图片加载失败处理过的。
10.暂无数据
写的不合适的地方还望多多指教。
