🌤️ 🎴 🛬 13种CSS框架的视觉比较 ↖️ 🗜️ 🛀

朋友们，美好的一天！

我提请您注意一项小型研究的结果-13个CSS框架的视觉比较。

研究的目的是确定哪种框架在默认样式下效果最好。无需添加特殊的（由框架提供）类。

该研究提出了以下框架：

使用了以下样式的版本：

测试标记展示了网页的主要元素，重点是语义标签：

<header>
    <figure>
        <figcaption>logo</figcaption>
        <img src="logo.png" alt="logo">
    </figure>

    <nav>
        <a href="#">link1</a>
        <a href="#">link2</a>
        <a href="#">link3</a>
    </nav>
</header>

<hr>

<main>
    <h1>main title</h1>

    <aside>
        <h4>aside title</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, quibusdam.</p>
    </aside>

    <section>
        <h2>section title</h2>

        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odit, illum.</p>

        <ul>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
        </ul>

        <table>
            <caption>table</caption>
            <tr>
                <th>1</th>
                <th>2</th>
                <th>3</th>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
        </table>

        <dl>
            <dt>term</dt>
            <dd>Lorem <strong>ipsum</strong>, dolor sit <em>amet</em> consectetur adipisicing elit. <mark>Accusamus</mark>, obcaecati?</dd>
        </dl>

        <details open>
            <summary>summary</summary>
            <p><small>Lorem dolor sit amet ipsum, consectetur adipisicing elit. Explicabo, repellat?</small></p>
        </details>

        <button>button</button>
    </section>

    <article>
        <h3>article title</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, architecto?</p>

        <blockquote>Lorem ipsum dolor, sit amet <cite>consectetur adipisicing elit.</cite> Ipsam, ad!</blockquote>

        <code>
            console.log('hello world')
        </code>
    </article>
</main>

<hr>

<footer>
    <form action="#">
        <fieldset>
            <legend>form</legend>
            <label>name:
                <input type="text">
            </label>
            <label>email:
                <input type="email">
            </label>
            <input type="submit" value="subscribe">
        </fieldset>
    </form>

    <p>© 2020.</p>
</footer>

看起来是这样的：

您可以在此处试用代码：

沙盒不允许使用head标签，因此欢迎您使用GitHub Pages。

项目代码在这里。

研究结果非常令人期待：Bootstrap是第一，Materialize是第二。

Materialize似乎遵循“移动优先”的概念，这就是为什么Bootstrap在宽屏时会失败的原因。Materialize在功能方面也有所损失，但这是另一回事。

Skeleton和Picnic在我看来很有前途。

感谢您的关注。

13种CSS框架的视觉比较

More articles: