Jake

闲看四季，静候花开。

发表于 更新于 分类于 本文字数： 90 阅读时长 ≈ 1 分钟

scss

1
2
3
4
5
6
$mobile: 'only screen and (max-device-width: 720px),
only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 720px)';

@media #{$mobile}{
    font-size: (100vw/7.5);
}

Less

1
2
3
4
5
@mobile: ~"only screen and (max-device-width: 720px), only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 720px)";

@media @mobile{
    font-size: (100vw/7.5);
}

postcss

1
2
3
4
5
6
@custom-media --mobile only screen and (max-device-width: 720px),
                       only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 720px);

@media (--mobile){
    font-size: (100vw/7.5);
}

发表于 更新于 分类于 本文字数： 168 阅读时长 ≈ 1 分钟
1
2
3
<div class="outer">
    <div class="inner rotate">Centered?</div>
</div>

div.outer是一个窄垂直条。 div.inner旋转90度。我想要文本居中？出现在其容器div.outer中心。不确定div.outer的大小。

See the Pen qodqzq by Jake (@JakeLaoyu) on CodePen.

阅读全文 »

发表于 更新于 分类于 本文字数： 28 阅读时长 ≈ 1 分钟
1
2
3
4
5
6
7
8
9
10
11
body:before{
    content: ' ';
    position: fixed;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url("../images/bg.png?ewrfg") center no-repeat;
    background-size: 100% 100%;
}

发表于 更新于 分类于 本文字数： 218 阅读时长 ≈ 1 分钟

nth-child是个神奇的东西，但是总会忘记一些常用的用法。

阅读全文 »
0%