CSS Styles

Shao Zelian, 01 Jun 2025

根据设备调整CSS - MQ (Media Queries)

Media Queries是一种常用的CSS技术，用来检测正常访问网页的设备特征，比如设备宽度/高度（Width/Height）、视区方向（Orientation of ViewPort）以及分辨率（Resolution）等。通过获得设备的特征，开发人员可以调整css style已确保网页内容以合适地方式在这些设备（比如各种电脑、Tablet和手机等）上呈现。

Ref.: W3schools - CSS Media Queries

语法：

<style>
@media not|only mediatype and (media feature) and (media feature) {
  CSS-Code;
}
</style>

示例：

<style>
/* for iPhone 14 Pro Max*/
@media only screen and (max-width: 430px) {
    .container {
        width: 98%;
    }
}

/* for devices with wider screen > 430px */
@media only screen and (min-width: 431px) {
    .container {
        width: 90%;
    }
}
</style>

元素垂直居中

<style>
.container {
    display: flex;
    align-items: center; /* 垂直居中 */
}
</style>

<div class="container">
    <img src="/assets/images/bmw.png" alt="bmw" />
    <span>BMW Group</span>
<div>

<div>始终在底部

<style>
.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}
</style>

<div class="footer">
    this is footer.
</div>

根据子元素选择

以下示例表示选择具有 “class=’language-mermaid’” 的子元素的<pre>元素。

pre:has(code.language-mermaid) {
    background-color: white !important;
}

/*以下prev元素会被选择*/
<pre>
    <code class='language-mermaid'>
    ...
    <code>
</pre>

悬浮<div>

以下代码会让<div>悬浮在父容器的右上角。

<style>
    .floating-div {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 300px;
        position: sticky;
        z-index: 1020;
        float: right;
        padding: 10px;
        font-size: 12px;
    }

</style>


<div class="floating-div">
    here's the content of the window.
</div>

带圆圈的数字

<style>
.circle {
    background: #e3e3e3;
    border-radius: 50%;
    color: #6e6e6e;
    display: inline-block;
    font-weight: bold;
    line-height: 40px;
    margin-right: 5px;
    text-align: center;
    width: 40px;
}
</style>

<span class="circle">1</span>

1 2 3 … 10

SHAO Zelian

人而无信，不知其可也 | 学不可以已