Question

我正在使用默认的表盘，我想要做的就是将其调整大小1/3，但无论出于何种原因，它都没有像我期望的那样调整大小

在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;

如果有人能指出我的方向会很好......

Answer 1

我对即将发出的问卷发表评论

要修复 FlipClock 中的尺寸问题，只需将以下css添加到主时钟容器中

.timer {
    zoom: 0.5;
    -moz-transform: scale(0.5);
}

上面的行将减小1/2，如果你想要更小的尺寸你可以使用0.3或任何

Answer 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 */

}

Answer 3

已经有一段时间了，因为这是活跃的，但我已经碰到了这个lib，我已经决定尝试一下。事情一直在努力。这是一个改编自repo的closed issue（未解决）之一的解决方案。似乎开发人员承诺了一个新的API，但那已经超过1年了。

由于设置$clock-flip-font-size: 120px时存在一些问题，因此并不完美。此外，当分钟显示为3位数时，＆＃34;分钟＆＃34;文字不是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
//

Answer 4

.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
    }

Answer 5

试试这个

.flip-clock-wrapper ul {
  ...
  width: 20px !important;
  ...
}

调整flipclock.js的大小不按预期调整大小

5 个答案: