媒体查询和字体图标使用

发布于：2022-07-11 14:10:09  栏目：技术文档

一、媒体查询，屏幕适应

语法@media screen and (max-width: 600px) { }，其中 screen and可以省略不写，像这样@media (max-width: 600px) { }

注意所以我们用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面

1.实例

    <div class="divs" align="center">
        <button class="titlebut1">首页</button>
        <button class="titlebut2">产品中心</button>
        <button class="titlebut3">关于我们</button>
    </div>
CSS设置
    /* 当屏幕小于300时 */
@media (max-width: 300px) {
    html {
        font-size: 10px;
    }
}
/* 当屏幕大于600时 */
@media (min-width: 600px) {
    html {
        font-size: 30px;
    }
}
/* 多条件使用 media */
@media (min-width: 800px) and (max-width:300px) {
    html {
        font-size: 80px;
    }
}

二、引用字体图标

使用步骤1.导入css文件2.引用图标名称3.设置样式

1.实例

  <!-- 注意这里引用字体图标的名称要一致 -->
 <spa class="iconfont icon-jingdong iconjingdong"></span>
 css设置
 /* 注意先导入字体图标css */
@import 'font_icon/iconfont.css';
 /* 设置字体图标样式 */
.iconfont {
    font-size: 50px;
    background-color: blueviolet;
}

相关推荐