字体图标与媒体查询示例

题目一：字体图标示例：

<!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">
    <!-- <link rel="stylesheet" href="../static/icon_font/font_3316062_x29n1h5chbq/iconfont.css"> -->
    <link rel="stylesheet" href="../static/5-3.css">
    <title>字体图标</title>
</head>
<body>
    <div>
        <span class="iconfont icon-gouwuchekong"></span>
    </div>
</body>
</html>

对应的css文件为：

@import "../static/icon_font/font_icon1/iconfont.css";
.iconfont.icon-gouwuchekong{
    font-size: 17px;
    color: green;
}

效果图如下：

题目二：媒体查询示例：

<!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">
    <link rel="stylesheet" href="../static/字体图标与媒体查询示例2.css">
    <title>媒体查询2</title>
</head>
<body>
    <button class="btn samll">btn1</button> 
    <button class="btn middle">btn2</button>
    <button class="btn large">btn3</button>
</body>
</html>

对应的css文件如下：

html{
    font-size: 10px;
}
.btn{
    background-color: green;
    color: white;
    border: none;
    outline: none;
}
.btn:hover{
    cursor: pointer;
    opacity: 0.8;
    transition: 0.5s;
    padding: 0.4rem 0.8rem;
}
.btn.small{
    font-size: 1.2rem;
}
.btn.middle{
    font-size: 1.6rem;
}
.btn.large{
    font-size: 1.8rem;
}
/* *当小于374时生效(使字体大一点) */
@media(max-width:374px){
    html{
        font-size: 12px;
    }
}
/* *375-414px之间 */
@media(min-width:375px)and(max-width:413px){
    html{
        font-size: 14px;
    }
}
/* *414px以上空间 */
@media(min-width:414px){
    html{
        font-size: 16px;
    }
}
/* *以上是由小到大叫移动优先 */
/* *如果是由大到小叫pc优先 */

题目一：字体图标示例：

对应的css文件为：

效果图如下：

题目二：媒体查询示例：

对应的css文件如下：

效果图如下：

相关文章