Question

CSS

.checkbox label:after {
    content: '';
    clear: both;
    display: table;
}

.checkbox .cr {
    display: table-cell;
    position: relative;
    border: 1px solid #a9a9a9;
    border-radius: .25em;
    width: 4vw;
    height: 4vw;
}

.checkbox .cr .cr-icon {
    position: absolute;
    font-size: 1.5vw;
    line-height: 0;
    top: 2vw;
    left: 1.2vw;
}

.checkbox label input[type="checkbox"] {
    display: none;
}

.checkbox label input[type="checkbox"] + .cr > .cr-icon {
    transform: scale(3) rotateZ(-20deg);
    opacity: 0;
    transition: all .3s ease-in;
}

.checkbox label input[type="checkbox"]:checked + .cr > .cr-icon {
    transform: scale(2) rotateZ(0deg);
    opacity: 1;
}

HTML

<div class="checkbox">
    <label>
        <input type="checkbox" value="" checked>
        <span class="cr"><i class="cr-icon fa fa-check"></i></span>
    </label>
</div>

外部CSS

https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css

我有一个自定义css复选框。假设当我缩小屏幕宽度时，复选框和刻度线的大小将会缩小。

无论屏幕尺寸有多小，它在IE中都能正常工作，并且刻度可能非常小，这是预期的。问题出在Chrome中，当屏幕宽度非常小时，滴答符号会溢出。

我已经设置了JSFiddle https://jsfiddle.net/7fuL1zh3/5/ 希望有人能帮我一臂之力。

Answer 1

您使用“vw”作为字体大小和位置等的单位。所以“vw”意味着，它相对于视口的宽度。因此，在调整浏览器/视口大小时，这些值会相对应用。

你可以使用绝对长度单位而不是相对长度单位，如。

EG。 font-size: 1.5px

参考。 https://www.w3schools.com/cssref/css_units.asp

Chrome css转换比例/字体大小问题

1 个答案: