字体图标与媒体查询

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

一、CSS布局常用单位

1. 绝对单位

px像素in英寸

1in等于96px

2.相对单位

2.1 % 相对父级的百分比

2.2 em和rem

1em默认是16pxem受父类影响，rem受根元素也就是HTML的影响。

一般为了保证浏览器正常的阅读，em 小于12px时，将不能生效，除非去浏览器里调整浏览器字体最小显示，调到12px以下，才能生效。不建议调整。

2.3 vw和wh

vw view-width 视图宽度vh view-height 视图高度视图窗口，简称视口，view-port1vw = 整个视口宽度/1001vh = 整个视口高度/100参考如下案例：

HTML代码
<!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>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <div class="box">
    </div>
</body>
</html>
CSS文件test.css中的内容
body{
    background-color: lightblue;
    width: 100vw;
    height: 100vh;
}
.box{
    width: 50vw;
    height: 50vh;
    background-color: coral;
    background-clip: border-box;
}

效果如下（div始终占视口的50%）：

二、表格常用样式

添加表格线，添加到单元格td、th折叠表格线调整表头、文字、表格居中使用伪类选择器设置样式

HTML代码
<!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>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <table>
        <caption>课程表</caption>
        <thead>
            <tr>
                <th></th>
                <th>周x</th>
                <th>周x</th>
                <th>周x</th>
                <th>周x</th>
                <th>周x</th>
                <th>周x</th>
                <th>周x</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="4">上午</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
            </tr>
            <tr>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
            </tr>
            <tr>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
            </tr>
            <tr>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td colspan="8">中午</td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td rowspan="2">下午</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
            </tr>
            <tr>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
                <td>课程</td>
            </tr>
        </tbody>        
        <tfoot>
            <tr>
                <td>备注</td>
                <td colspan="7"></td>
            </tr>
        </tfoot>
    </table>
</body>
</html>
test.css代码
/* 添加单元格表格线，添加到td、th级别。 */
table th,
table td{
    border: 1px solid #000;
}
/* 折叠表格线 */
table{
    border-collapse: collapse;
    /* 表格（块级元素）水平居中 */
    margin: auto;
    /* 文本水平居中 */
    text-align: center;
}
/* 调整标题 */
caption{
    /* 调整表标题字体大小 */
    font-size: 1.2em;
    /* 调整与表主体的距离 */
    margin-bottom: 0.6em;
}
table thead{
    background-color: lightblue;
}
/* 使用位置类伪类选择器进行样式设置 */
table tbody:not(tbody:nth-of-type(2)) tr:first-of-type td:first-of-type{
    background-color: lightgreen;
}

调整后的效果入下：

三、class方式引入字体图标

基础HTML代码
<!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> 
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <div>
        <span class="iconfont icon-jingdong myicon"></span>
    </div>    
</body>
</html>
test.css代码
/* 导入官方库 */
@import 'font_icon/iconfont.css';
/* 设置图标样式 */
.myicon{
    /* 可以把文字图标当普通文字一样设置样式 */
    font-size: 100px;
    color: green;
    box-shadow: 2px 2px 2px yellow;
    border: 10px solid coral;
}

引用效果如下：

四、媒体查询（PC优先）

媒体：手机/pad/pc等的屏幕，打印机都是媒体查询：获取媒体当前状态。布局的前提：用户在一个宽度/高度受限，高度/宽度随用户内容增长的空间进行布局。高度/宽度必须固定一个。

媒体查询PC优先，即先从最大屏开始匹配

HTML代码
<!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> 
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <button class="btn small">btn1</button>
    <button class="btn middle">btn2</button>
    <button class="btn large">btn3</button> 
</body>
</html>
test.css代码
用html根元素伪类设置
:root{
    font-size: 16px;
}
.btn{
    background-color: seagreen;
    color: white;
    border: none;
    outline: none;
}
.btn:hover{
    cursor: pointer;
    opacity: 0.1;
    transition: 0.3s;
}
.small{
    font-size: 1.2rem;
}
.middle{
    font-size: 1.6rem;
}
.large{
    font-size: 2rem;
}
@media (min-width: 1000px){
    :root{
        font-size: 256px;
    }
}
@media (min-width: 500px) and (max-width:999px){
    :root{
        font-size: 128px;
    }
}
@media (min-width: 250px) and (max-width:499px){
    :root{
        font-size: 64px;
    }
}
@media (min-width: 125px) and (max-width:249px){
    :root{
        font-size: 32px;
    }
}

效果描述：

当屏幕宽度大于1000px时，html的font-size被修改为256px，三个按钮使用了rem的相对单位，对应大小调整为：

small按钮,
font-size=256*1.2=307.2px
middle按钮,
font-size=256*1.6=409.6px
large按钮,
font-size=256*2=512px

相关推荐

SaaS的续费率为什么那么低？
中国SaaS产业表面风光无限为什么说很难盈利
Code Review有什么好处？
什么是Istio? Istio究竟是干嘛的？
linux mv命令怎么用

阅读 +