javascript 调整 flipclock.js 的大小未按预期调整大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24946573/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
resizing flipclock.js not resizing as expected
提问by Barry Hamilton
I'm using the default clockface, all I want to do is roughtly resize by 1/3 but for whatever reason it isn't resizing as I expect
我正在使用默认的表盘，我想做的只是将大小大致调整为 1/3，但无论出于何种原因，它都没有像我预期的那样调整大小
In flipclock css I changed the following
在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;
}
but the width of each ul is is 40px;
但是每个ul的宽度是40px；
If anyone can point me in the right direction that would be great..
如果有人能指出我正确的方向，那就太好了。
回答by Nasser Hadjloo
I leave a comment for upcoming questionnaires
我对即将到来的问卷发表评论
To fix size issue in FlipClock, simply add following css to your main clock container
要修复FlipClock 中的大小问题，只需将以下 css 添加到您的主时钟容器
.timer {
zoom: 0.5;
-moz-transform: scale(0.5);
}
above line will reduce size by 1/2, if you want smaller size you can use 0.3 or whatever
上面的线将尺寸减小 1/2，如果你想要更小的尺寸，你可以使用 0.3 或其他
回答by Krzysztof Przygoda
Flipclockjs is built on many fixed properties. You must adjust more than that. An example I use with responsive method to override them:
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 */
}
回答by jimasun
It been some time since this was active but I've bumped into this lib and I've decided I'll give it a try. Things have been working out alright for now. This is a solution adapted from one of the repo's closed issue(unsolved). It seems that the dev's promised a new API but that was more than 1 year ago.
自从它活跃以来已经有一段时间了，但我遇到了这个库，我决定试一试。目前一切顺利。这是改编自 repo 的一个已关闭问题（未解决）的解决方案。似乎开发人员承诺了一个新的 API，但那是一年多前的事了。
It's not perfect as there are some issues when setting $clock-flip-font-size: 120px. Also, when minutes are being displayed as 3 digits, the "Minutes" text is not centered.
它并不完美，因为设置时存在一些问题$clock-flip-font-size: 120px。此外，当分钟显示为 3 位数字时，“分钟”文本不是centered。
Here is the codepen: https://codepen.io/jimasun/pen/PzAqVw/
这是代码笔：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
//
回答by anuloo
.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
}
回答by Gon
Try this
试试这个
.flip-clock-wrapper ul {
...
width: 20px !important;
...
}