调整flipclock.js的大小不按预期resize
http://flipclockjs.com/
我正在使用默认的表盘，我想要做的就是将其resize1/3，但无论出于何种原因，它都没有像我期望的那样resize
在flipclock css我更改了以下内容
.flip-clock-wrapper ul { position: relative; float: left; margin: 5px; width: 20px; height: 30px; font-size: 27px; font-weight: bold; line-height: 29px; border-radius: 6px; background: #000; } 但每个ul的宽度是40px;
如果有人能指出我正确的方向，这将是伟大的..
我对即将发布的调查问卷发表评论
要修复FlipClock中的大小问题，只需将以下css添加到主时钟容器即可
.timer { zoom: 0.5; -moz-transform: scale(0.5); }
如果你想要更小的尺寸你可以使用0.3或其他什么，上面的线将减小1/2的大小
Flipclockjs建立在许多固定属性上。 你必须调整更多。 我使用响应方法覆盖它们的示例：
@media screen and (max-width: 819px) { /*.home-featured .clock { margin: 0 auto; display: block; width: 322px; }*/ .home-featured h1 { font-size: 1.6em; } .flip-clock-wrapper ul { height: 50px; line-height: 50px; margin: 3px; } .flip-clock-wrapper ul li a div.up:after { top: 24px; } .flip-clock-divider { height: 50px; } .flip-clock-dot { height: 6px; width: 6px; left: 7px;} .flip-clock-dot.top { top: 17px; } .flip-clock-dot.bottom { bottom: 8px; } .flip-clock-divider .flip-clock-label { font-size: 16px; } .flip-clock-divider.days .flip-clock-label { right: -76px; } .flip-clock-divider.hours .flip-clock-label { right: -70px; } .flip-clock-divider.minutes .flip-clock-label { right: -64px; } .flip-clock-divider.seconds .flip-clock-label { right: -70px; } .flip-clock-wrapper ul { width: 37px; } .flip-clock-wrapper ul li a div div.inn { font-size: 38px; } /* Korekcja położenia pól zegara załamanych do nowej linii */ .flip-clock-wrapper ul { margin-bottom: 35px; } .flip-clock-wrapper { margin-bottom: -35px; } } .flip-clock-divider.minutes { clear: none;} @media screen and (max-width: 550px) { .flip-clock-divider.minutes { clear: left;} /* break clock at minutes */ }
已经有一段时间了，因为这是活跃的，但我已经碰到了这个lib，我已经决定我会尝试一下。 事情一直在努力。 这是一个改编自repo的封闭问题之一 （未解决）的解决方案。 似乎开发人员承诺了一个新的API，但这已经超过1年了。
它并不完美，因为在设置$clock-flip-font-size: 120px时存在一些问题。 此外，当分钟显示为3位数时，“分钟”文本不centered 。
这是codepen： https ：//codepen.io/jimasun/pen/PzAqVw/
// // ------------------------- FlipClock // $clock-flip-font-size: 120px $clock-flip-border-radius: 8px $clock-digit-gap: 20px $clock-dot-size: 20px $clock-height: ($clock-flip-font-size * 1.2) $clock-flip-width: ($clock-flip-font-size * 0.8) $clock-flip-margin: ($clock-digit-gap / 2) $clock-flip-section-width: (2 * ($clock-flip-width + 2 * $clock-flip-margin)) $clock-flip-bg: #607D8B $clock-flip-shadow: 0 2px 5px rgba(0, 0, 0, 0.7) $clock-flip-font-color: #F44336 $clock-flip-font-shadow: 0 1px 2px #000 .countdown-wrapper left: 50% position: absolute top: 50% transform: translate(-50%, -50%) .countdown.flip-clock-wrapper ul height: $clock-height margin: 0 $clock-flip-margin width: $clock-flip-width box-shadow: $clock-flip-shadow .countdown.flip-clock-wrapper ul li line-height: $clock-height .countdown.flip-clock-wrapper ul li a div div.inn background-color: $clock-flip-bg color: $clock-flip-font-color font-size: $clock-flip-font-size text-shadow: $clock-flip-font-shadow .countdown.flip-clock-wrapper ul, .countdown.flip-clock-wrapper ul li a div div.inn border-radius: $clock-flip-border-radius .countdown.flip-clock-wrapper ul li a div.down border-bottom-left-radius: $clock-flip-border-radius border-bottom-right-radius: $clock-flip-border-radius .countdown.flip-clock-wrapper ul li a div.up:after top: (($clock-height / 2) - 1px) .countdown .flip-clock-dot.top top: ($clock-height / 2 - $clock-flip-font-size * 0.2 - $clock-dot-size / 2) .countdown .flip-clock-dot.bottom top: ($clock-height / 2 + $clock-flip-font-size * 0.2 - $clock-dot-size / 2) .countdown .flip-clock-dot height: $clock-dot-size left: $clock-dot-size width: $clock-dot-size background: $clock-flip-bg .countdown .flip-clock-divider height: $clock-height width: ($clock-dot-size * 3) &:first-child width: 0 .countdown .flip-clock-divider.seconds .flip-clock-label, .countdown .flip-clock-divider.minutes .flip-clock-label right: -1 * $clock-flip-section-width .countdown .flip-clock-divider .flip-clock-label color: $clock-flip-font-color font-size: $clock-flip-font-size / 4 width: 2 * $clock-flip-width + 4 * $clock-flip-margin // // ------------------------- FlipClock //
.flip-clock-wrapper ul { width: 20px; height: 25px; line-height: 25px; **padding-left: 20px;** //add this to your wrapper ul and youll be able to set the with you can set it to zero and just adujst your width }
试试这个
.flip-clock-wrapper ul { ... width: 20px !important; ... }