字体图标与媒体查询练习

1. 实例演示字体图标的引入与显示

使用阿里字体图标https://www.iconfont.cn/

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体图标练习</title>
    <style>
        /* 引入阿里图标文件 */
        @import url(//at.alicdn.com/t/c/font_3887880_49wqabhnxhs.css);
        .font-style{
            font-size:3em;
            color:rebeccapurple;
        }
        a {text-decoration: none;}
    </style>
</head>
<body>
    <div class="iconfont">
        <span class="icon-code font-style"></span>
    </div>
    <div class="iconfont font-style">
        <a href="#" class="icon-copy font-sytle"></a>
    </div>
</body>
</html>

2. 实例演示媒体查询(移动优先)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>媒体查询</title>
    <style>
        /* 移动端优先，由小屏到大屏 */
        @media (max-width: 375px) {
            /* 当屏幕宽度小于375px时，使用这里面的CSS规则 */
            h1{
                font-size:1em;
            }
        }
        @media (min-width: 375px) and (max-width: 640px) {
            /* 当屏幕宽度介于375px--640px之间时，使用这里的css规则 */
            h1{
                font-size:2em;
            }
        }
        @media (min-width: 640px) {
            /* 当屏幕大于640px时，使用这里面的CSS规则 */
            h1{
                font-size:3em;
            }
        }
    </style>
</head>
<body>
    <h1>大表哥</h1>
</body>
</html>

字体图标与媒体查询练习

字体图标与媒体查询练习

1. 实例演示字体图标的引入与显示

2. 实例演示媒体查询(移动优先)

相关文章