5 星合成方案你都了解么-优快云博客

随着移动互联网的飞速发展，硬件设备的不断升级，高清屏幕越来越普及。在开发时，对高清图的要求也越来越高。在制作 5 星评级效果时，也需要考虑高清屏的适配问题。

方案 1

方案图来源于大众点评

1.将所有的 评级设计图 都制作出来：<img src=“https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0d98a1bcb4b246078ac3333366eedde3~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image)2.通过 background-position、width、height 来显示不同的评级。<img src=“https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fa12a94c2afa4b718f9a7099c96cc8ac~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image) [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eHDq60NA-1658756513978)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/002ad10148c3471e9024ef1bbe1c8087~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image)]**该方案如何解决高清屏显示问题？*” style=“margin: auto” /” style=“margin: auto” />

1.首先需要准备不同的尺寸设计图，来适配不同的分辨率<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e01a30257156460e96c11ceabfe2e529~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image)2.通过 @media 或 image-set() 方法来适配对应的尺寸设计图。* 豆瓣基于 `image-set()` 实践效果图：<img src=“https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/eb7a21f85a2644d3ba1a291d6212b89c~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image)* Google play 基于 `@media` 实践效果图：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cC4IHe9w-1658756513978)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/45629a97fcd749c8a08aa3e8123455f8~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)]方案 " style=“margin: auto” /” style=“margin: auto” />

1.将 5 星 与 0 星 合并在一起<img src=“https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/48bbf5abbc864608b5ce9f28dc4cd347~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image)2.通过 background-position、width、height 来显示不同的评级。<img src=“https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/28681964b5184c2982f2edf6fb36499b~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image)另外，如果需要半星还需提供如下合成图：![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6b47fdac3b874c4ba22951eda1830e3d~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image” style=“margin: auto” /” style=“margin: auto” />

实例

Amazon，京东(评价)， airbnb 等都使用了这种方案。

该方案如何解决高清屏显示问题？

与 方案 1 类似，不再赘述……

方案 3

上述 3 种方案只能由 0 星、0.5 星、1 星 组合而成。而对于 0.1 ~ 0.4 与 0.4 ~ 0.9 之间的无法精确表示。怎么破？接下来介绍的方案可以很好地解决该问题。

1.构建 5 个 0 星 作为底层
2.构建 5 个 1 星 作为显示层
3.将底层与显示层完全叠加，并且显示层置于底层之上。
4.控制显示层的宽来显示不同的评级。

原理图如下

<!-- 底层 -->
<div class="stars-back"><!-- 显示层 --><div class="stars-display" style="width: 50%"></div>
</div>

.stars-back {position: relative;height: 20px;width: 100px;background: url(/images/zero.png) repeat-x 0 0;overflow: hidden;
}
.stars-display {height: 100%;width: 100%;background: url(/images/one.png) repeat-x 0 0;
}

如何制作显示层或底层？

通过图像软件制作输出。
使用单元图结合 background-repeat-x: repeat;绘制输出。

实例

天猫，当当，苏宁等都使用了这种方案。

该方案如何解决高清屏显示问题？

与 方案 1 类似，不再赘述……

方案 4

为了解决高清屏显示问题，也有使用 font icon 的解决方案

1.首先得将 star icon 制作成字体文件。<img src=“https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/036586b40d3442738b21ff769a40bebc~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image)2.然后引入字体文件，根据评级情况使用不同的 star icon 字体```<<img src=“https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2460c127261f454bb43dd5b0919da367~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image)### 实” style=“margin: auto” /” style=“margin: auto” />

segmentfault 就使用该技术方案

当然，也可以使用 SVG，原理与 icon font 类似。直接看掘金实例

方案 5

该方案是 方案 3 与 方案 4 结合。

1.使用 font icon 构建底层和 显示层。
2.通过控制显示层 width 来控制评级情况。

关键代码

<!-- 2.5 星 -->
<div class="stars"><!-- 底层 --><div class="stars-back"><i class="iconfont icon-star-zero"></i><i class="iconfont icon-star-zero"></i><i class="iconfont icon-star-zero"></i><i class="iconfont icon-star-zero"></i><i class="iconfont icon-star-zero"></i></div><!-- 显示层 --><div class="stars-display" style="width: 50%"><i class="iconfont icon-star-one"></i><i class="iconfont icon-star-one"></i><i class="iconfont icon-star-one"></i><i class="iconfont icon-star-one"></i><i class="iconfont icon-star-one"></i></div>
</div>