字体图标与媒体查询练习

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>

批改老师：

PHPz

批改状态：合格

老师批语：要是添加结果截图就更好了

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

表单元素 form 属性知识整理

2023-01-21 11:21:06