From 1cf6d9fb8cf2f10e302509f033d8d55b4e60712c Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Sun, 14 Aug 2022 01:45:42 +0800
Subject: [PATCH] 优化友链布局，月台窗口自适应，处理hls取消后仍然缓存问题
---
src/components/mini/box-friend.vue | 27 +++++++++++++++++----------
1 files changed, 17 insertions(+), 10 deletions(-)
diff --git a/src/components/mini/box-friend.vue b/src/components/mini/box-friend.vue
index 49e55ce..c2328c1 100644
--- a/src/components/mini/box-friend.vue
+++ b/src/components/mini/box-friend.vue
@@ -191,24 +191,31 @@
@media screen and (min-width: 1600px) {
.link-box a {
margin: 0 0.9375rem 3.75rem;
- width: -webkit-calc(100% / 5 - 1.875rem);
- width: calc(100% / 5 - 1.875rem);
+ width: -webkit-calc(100% / 5 - 4rem);
+ width: calc(100% / 5 - 4rem);
}
}
- @media screen and (max-width: 1599px) and (min-width: 768px) {
+ @media screen and (max-width: 1599px) and (min-width: 1439px) {
.link-box a {
margin: 0 0.9375rem 3.75rem;
- width: -webkit-calc(100% / 4 - 1.875rem);
- width: calc(100% / 4 - 1.875rem);
+ width: -webkit-calc(100% / 3 - 8rem);
+ width: calc(100% / 3 - 8rem);
+ }
+ }
+ @media screen and (max-width: 1438px) and (min-width: 791px) {
+ .link-box a {
+ margin: 0 0.9375rem 3.75rem;
+ width: -webkit-calc(100% / 4 - 2.3rem);
+ width: calc(100% / 4 - 2.3rem);
}
}
- @media screen and (max-width: 767px) and (min-width: 501px) {
+ @media screen and (max-width: 790px) and (min-width: 501px) {
.link-box a {
margin: 0 0.9375rem 3.75rem;
- width: -webkit-calc(100% / 3 - 1.875rem);
- width: calc(100% / 3 - 1.875rem);
+ width: -webkit-calc(100% / 3 - 2.3rem);
+ width: calc(100% / 3 - 2.3rem);
}
}
@@ -216,8 +223,8 @@
@media screen and (max-width: 500px) and (min-width: 319px) {
.link-box a {
margin: 0 0.75rem 1.5rem;
- width: -webkit-calc(50% - 1.5rem);
- width: calc(50% - 1.5rem);
+ width: -webkit-calc(100% / 3 - 1.5rem);
+ width: calc(100% / 3 - 1.5rem);
}
.blog-main {
--
Gitblit v1.9.1