文章

发布于

[Vue 原生JS] flex布局最后一行元素左对齐

在开发过程中使用flex布局经常会遇到最后一行不满足个数导致布局混乱的问题如下：
Screenshot_20211007_044538.png

可以看到因为使用了 justify-content: space-between; 确实实现了平均分配但是最后一行我们希望他靠左对齐并且还拥有间距这时怎么办？
这里我们可以计算出差多少能填满该行，以达到效果。
具体算法如下：
列数减去(数据长度)余列数 即：col-(serveData.length)%col
演算一下，假设服务端有18条数据 前端dom结构5列1行即：
5-18= -13
-13%5= 2
至此我们计算出了还差多少元素填满，我们使用vue的话可以直接新增一个循环，向后追加空元素。
我们还需考虑到服务器返回的数据正好满足前端列数的填充终止追加。

<li style="background: none" v-for="(item,index) in 5-(serveData.length)%5" :key="index" v-if="(serveData.length)%5 > 0"></li>


按照这个思路原生js代码如下：

其实更好的解决方案是使用grid布局，因为不会产生额外的dom。

但是在微信小程序中或者uniapp对都卿点flex布局，所以还是需要掌握。

不想要额外的dom结构并且还使用flex可以自己按照上面的思路封装一个方法，取出最后一排元素不进行flex布局，改为传统的内联块配合边距。

发布于

光速入门HTML

HTML基础

本文内容过多推荐使用typora阅读器打开文档，获取更优质的阅读体验。
文档下载
配套Demo
[TOC]

HTML是什么

超文本标记语言（英语：Hyper Text Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。

HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。HTML的语言形式为尖括号包围的HTML元素（如<html>），浏览器使用HTML标签和脚本来诠释网页内容，但不会将它们显示在页面上。

HTML可以嵌入如JavaScript的脚本语言，它们会影响HTML网页的行为。网页浏览器也可以引用层叠样式表（CSS）来定义文本和其它元素的外观与布局。维护HTML和CSS标准的组织万维网联盟（W3C）鼓励人们使用CSS替代一些用于表现的HTML元素。

引用自维基百科

HTML文档结构

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HELLO WORLD</title>
</head>
<body>

</body>
</html>

首先要明白html文档是以标签组合编写的标签又分为单闭合标签以及双闭合标签，以上面的Demo meta等，单独存在的就是单闭合标签,成对出现的则是多闭合标签例如 html head body等。 但请注意 !doctype 声明不属于 HTML 标签他是一条指令告诉浏览器编写页面使用的HTML版本。

doctype

<!doctype html>

<!DOCTYPE>声明必须位于 HTML5 文档中的第一行，也就是位于html标签之前。该标签告知浏览器文档所使用的 HTML 规范。

虽然在本文档中所提及的代码均是HTML4规范但是这里依然使用了HTML5的声明，其原因是文档标准可以向下兼容。而且HTML4的文档声明又吃臭又长即：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

这只是其中一种，还有两种不展开了也没必要。

html

<html lang="zh-CN">
    ...
</html>

此元素可告知浏览器其自身是一个 HTML 文档。

<html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部 head 和主体 body。

lang="zh-CN"用法为标签属性与属性值，也就是html可以定义语言属性告知浏览器您的网站主体内容是什么语言编写（有的浏览器会检测本地语言与网页语言定义不一致会触发翻译功能 例如chrome浏览器）。

/2021/09/22/zA5g2JbRQkYZFHy.png图像异常

/2021/09/22/A54rfDaTN2uUz8n.png图像异常

其中 lang 是属性 zh-CN 为属性值，即为中文。

ISO 语言代码

HTML ISO 国家/地区代码参考手册

head

<head>
    <meta charset="UTF-8">
    <title>HELLO WORLD</title>
</head>

head中一般是进行声明或者引用的地方，例如声明网页的字符集合，网站标题，引入css、js等（当然js最好放置到文档末端以防止js载入阻塞影响网页视图）。

可以这么抽象理解 head里的内容就是一个人的姓名 年龄 血型等虽然不能直接识别出来，但事实上是存在且起作用的。

meta

<head>
    <meta charset="UTF-8">
    ...
</head>

<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词，字符集设定等。

<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

在以上demo中使用了 charset属性设置文档字符集为 UTF-8 不设定字符集可能会导致文本异常出现乱码，所以必须声明。

关于meta其他属性用法

关于字符集

title

<head>
    <title>HELLO WORLD</title>
    ...
</head>

title标签定义了网页在浏览器中tab标签上的文本

body

body中包含网页中所有可见元素。

如果head是人的抽象属性body则是一个人的具体属性例如 性别 头发长度 眼睛大小等。

<body>
    ...
</body>

文本级标签

指在网页中显示文本作用的标签

标题标签

HTML中可以定义6种不同程度的标题标签 他们的默认文本的大小，粗细都不一致，例如：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>标题标签使用</title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
</html>

段落标签

p标签全称paragraph译为段落

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>段落标签</title>
</head>
<body>
    <p>我是一个段落可以帮助你给内容分段～</p>
    <p>哦,楼上你我确实分段了！</p>
</body>
</html>

与标题标签组合demo：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>段落标签</title>
</head>
<body>
    <h1>赤壁赋</h1>
    <h3>【作者】苏轼 </h3>
    <p>
        壬戌之秋，七月既望，苏子与客泛舟游于赤壁之下。清风徐来，水波不兴。举酒属客，诵明月之诗，歌窈窕之章。少焉，月出于东山之上，徘徊于斗
        牛之间。白露横江，水光接天。纵一苇之所如，凌万顷之茫然。浩浩乎如冯虚御风，而不知其所止；飘飘乎如遗世独立，羽化而登仙。
    </p>
    <p>
        于是饮酒乐甚，扣舷而歌之。歌曰：“桂棹兮兰桨，击空明兮溯流光。渺渺兮予怀，望美人兮天一方。”客有吹洞箫者，倚歌而和之。其声呜呜然，
        如怨如慕，如泣如诉，余音袅袅，不绝如缕。舞幽壑之潜蛟，泣孤舟之嫠妇。
    </p>
    <p>
        苏子愀然，正襟危坐而问客曰：“何为其然也？”客曰：“月明星稀，乌鹊南飞，此非曹孟德之诗乎？西望夏口，东望武昌，山川相缪，郁乎苍苍，
        此非孟德之困于周郎者乎？方其破荆州，下江陵，顺流而东也，舳舻千里，旌旗蔽空，酾酒临江，横槊赋诗，固一世之雄也，而今安在哉？况吾与子
        渔樵于江渚之上，侣鱼虾而友麋鹿，驾一叶之扁舟，举匏樽以相属。寄蜉蝣于天地，渺沧海之一粟。哀吾生之须臾，羡长江之无穷。挟飞仙以遨游，
        抱明月而长终。知不可乎骤得，托遗响于悲风。”
    </p>
    <p>
        苏子曰：“客亦知夫水与月乎？逝者如斯，而未尝往也；盈虚者如彼，而卒莫消长也。盖将自其变者而观之，则天地曾不能以一瞬；自其不变者而观
        之，则物与我皆无尽也，而又何羡乎!且夫天地之间，物各有主,苟非吾之所有，虽一毫而莫取。惟江上之清风，与山间之明月，耳得之而为声，目遇
        之而成色，取之无禁，用之不竭，是造物者之无尽藏也，而吾与子之所共适。”
    </p>
    <p>
        客喜而笑，洗盏更酌。肴核既尽，杯盘狼籍。相与枕藉乎舟中，不知东方之既白。
    </p>
</body>
</html>

注意代码中的换行并不会让网页视图中文本换行，这是html的一个空白折叠特性导致的。

空白折叠

在源代码中的连续空白字符（空格、换行、制表符tab），在页面显示时，会被折叠为一个空格。

在<pre>标签中中的内容不会出现空白折叠，会按照源码中的格式显示到页面上，一般用来显示代码。

demo：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>段落标签</title>
</head>
<body>
    <h1>赤壁赋</h1>
    <h3>【作者】苏轼 </h3>
    <pre>
壬戌之秋，七月既望，苏子与客泛舟游于赤壁之下。清风徐来，水波不兴。举酒属客，诵明月之诗，歌窈窕之章。少焉，月出于东山之上，徘徊于斗牛之间。白露横江，水光接天。纵一苇之所如，凌万顷之茫然。浩浩乎如冯虚御风，而不知其所止；飘飘乎如遗世独立，羽化而登仙。
于是饮酒乐甚，扣舷而歌之。歌曰：“桂棹兮兰桨，击空明兮溯流光。渺渺兮予怀，望美人兮天一方。”客有吹洞箫者，倚歌而和之。其声呜呜然，如怨如慕，如泣如诉，余音袅袅，不绝如缕。舞幽壑之潜蛟，泣孤舟之嫠妇。
苏子愀然，正襟危坐而问客曰：“何为其然也？”客曰：“月明星稀，乌鹊南飞，此非曹孟德之诗乎？西望夏口，东望武昌，山川相缪，郁乎苍苍，此非孟德之困于周郎者乎？方其破荆州，下江陵，顺流而东也，舳舻千里，旌旗蔽空，酾酒临江，横槊赋诗，固一世之雄也，而今安在哉？况吾与子渔樵于江渚之上，侣鱼虾而友麋鹿，驾一叶之扁舟，举匏樽以相属。寄蜉蝣于天地，渺沧海之一粟。哀吾生之须臾，羡长江之无穷。挟飞仙以遨游，抱明月而长终。知不可乎骤得，托遗响于悲风。”
苏子曰：“客亦知夫水与月乎？逝者如斯，而未尝往也；盈虚者如彼，而卒莫消长也。盖将自其变者而观之，则天地曾不能以一瞬；自其不变者而观之，则物与我皆无尽也，而又何羡乎!且夫天地之间，物各有主,苟非吾之所有，虽一毫而莫取。惟江上之清风，与山间之明月，耳得之而为声，目遇之而成色，取之无禁，用之不竭，是造物者之无尽藏也，而吾与子之所共适。”客喜而笑，洗盏更酌。肴核既尽，杯盘狼籍。相与枕藉乎舟中，不知东方之既白。
    </pre>
</body>
</html>

这种方法会在网页中按照源码内容缩进空格等展示，但是这种方法会破坏文档结构使其难以维护，并不推荐用来展示常规文本内容！

如果想要在内容中插入连续多个空格可以使用转移字符，例如：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>段落标签</title>
</head>
<body>
    <p>芙兰   达</p>
</body>
</html>

这里的    就是一个转义字符 指代空格，更多[转义字符](## 转移字符)在下边有提到。

span标签

span 标签被用来组合文档中的行内元素。

<p>壬戌之秋，<span>七月既望</span>，苏子与客泛舟游于赤壁之下。</p>

如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此，上例中的 span 元素仍然为 p 元素增加了额外的结构。

我们可以给span单独设置样式，达到重点的效果。（这一部分使用到了内联css）

<p>壬戌之秋，<span style="color:red">七月既望</span>，苏子与客泛舟游于赤壁之下。</p>

强调标签

在网页中想突出某几个字可以使用强调标签。em表示强调 strong表示更强烈的强调，多用于关键词提醒，价格等。

strong

<p>推理根本没有什么高低，更没有什么胜负。这是因为……<strong>因为真相永远只有一个！</strong></p>

被strong包裹起来的部分加粗了。

em

<p>推理根本没有什么高低，更没有什么胜负。这是因为……<strong>因为真相永远只有一个！</strong>  ----<em>江户川柯南</em></p>

被em包裹起来的部分变成斜体了。

图像标签

<!--相对路径-->
<img src="./img/bgc3.jpg" alt="图像载入失败">
<!--绝对路径-->
<img src="file:///home/f_picacho/Code/HTML/demo/img/bgc3.jpg" alt="图像载入失败">
<!--网络路径-->
<img src="https://th.bing.com/th/id/OIP.FC3KxFuGel1fFAh-2HHMhQHaEo?pid=ImgDet&rs=1" alt="图像载入失败">

关于html中路径用法在下方关于路径中有提到。

src 属性填写图像地址 alt属性则为读取图像失败后提示文本。

其他常用属性例如 width height 调整图像宽高。

超链接标签

a标签 即anchnro锚点，指的是一个位置到另外一个位置的跳转关系，多用于跳转至其他网站或者页面或本页面特定位置。

基本使用

<a href="https://baidu.com">百度一下</a>

在 a 标签内使用 href 属性指定要跳转的协议以及地址。

在上面这个案例当中 https 是访问协议其他的还有例如 http: ftp: file: javascript:等等...

后面的部分则是执行结果渲染的页面。在基本使用中简单的理解成，跳转的位置即可。

使用 target 属性，使页面在浏览器中新的页面打开。

<a href="https://baidu.com" target="_blank">百度一下</a>

使用锚点在页面中跳转

要想看出效果得先撑高页面高度，这里直接使用css。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>超链接使用</title>
</head>
<body>
    <a href="#koko">页面内跳转</a>
    <div style="height: 3000px"></div>
    <p id="koko">我在这里～</p>
    <div style="height: 3000px"></div>
</body>
</html>

要跳转的目标首先帮顶一个 id 属性，其次在 a 标签内 href 属性内填写 #id 即可。

使用协议让超链接进行不同的行为

使用不同的协议可以使a标签表现不同的行为，例如发送邮件，拨打电话，下载文件等等...

<a href="mailto:[email protected]">发送邮件</a>
<a href="tel:18888888888">拨打电话</a>

排版级标签

指在网页中帮助布局排版的标签

换行/分割标签

br换行，hr分割

br

br可以指定内容进行换行，不会产生空白折叠现象。

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>换行与分割标签使用</title>
</head>
<body>
    <h1>月下独酌四首·其一</h1>
    <h3>李白</h3>
    <p>
        花间一壶酒，独酌无相亲。<br>
        举杯邀明月，对影成三人。<br>
        月既不解饮，影徒随我身。<br>
        暂伴月将影，行乐须及春。<br>
        我歌月徘徊，我舞影零乱。<br>
        醒时相交欢，醉后各分散。<br>
        永结无情游，相期邈云汉。
    </p>
</body>
</html>

br在想要换行的位置添加即可换行，但请注意 br 是一个单闭合标签。

hr

hr标签可以插入一个分割线，区分上下文或布局。

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>换行与分割标签使用</title>
</head>
<body>
    <h1>月下独酌四首·其一</h1>
    <h3>李白</h3>
    <hr>
    <p>
        花间一壶酒，独酌无相亲。<br>
        举杯邀明月，对影成三人。<br>
        月既不解饮，影徒随我身。<br>
        暂伴月将影，行乐须及春。<br>
        我歌月徘徊，我舞影零乱。<br>
        醒时相交欢，醉后各分散。<br>
        永结无情游，相期邈云汉。
    </p>
</body>
</html>

列表标签

HTML支持有序列表、无序列表、定义列表三种，在开发过程中多用于内容展示或排版。

无序列表

无序列表会在列表项前追加一个实心圆圈。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>列表标签使用</title>
</head>
<body>
    <!--无序列表-->
    <h1>2020十大傻雕新闻</h1>
    <ul>
        <li>一大仙在公安局“跳大神” 对周围人发功说：“你今晚必死无疑”</li>
        <li>广西两男子为博领导赏识，多次挖领导祖坟盗尸骨，说是想等领导找不到时拿出来“邀功”</li>
        <li>男子爬到山顶举起手杖 指天大喊:赐予我力量吧 结果被雷劈了</li>
        <li>男子与情人同居2年卷走15万 把钱全都上交老婆称是工资</li>
        <li>江苏男子连偷三晚玉米 没工具纯靠手捧了2400多趟 总共偷走1200余斤</li>
        <li>女子女扮男装 与2任女友同居5年 诈骗100多万元</li>
        <li>小偷夜晚入室盗窃 想学影视剧用“手刀”敲晕主人 结果给人打醒了</li>
        <li>男子嫌上次关押时间短 没学会缝纫技术 遂再次盗窃回去学技术</li>
        <li>安徽一女子 因家里人多厕所不够用 偷走移动公厕</li>
        <li>“强迫症”犯人被判9年8个月 当庭上诉要求判十年整</li>
    </ul>
</body>
</html>

使用 ul 定义无序列表，内嵌套 li 定义列表项目。

有序列表

有序列表会根据代码自上而下的顺序自动追加顺序数字，从1开始。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>列表标签使用</title>
</head>
<body>
    <!--有序列表-->
    <h1>2020十大傻雕新闻</h1>
    <ol>
        <li>一大仙在公安局“跳大神” 对周围人发功说：“你今晚必死无疑”</li>
        <li>广西两男子为博领导赏识，多次挖领导祖坟盗尸骨，说是想等领导找不到时拿出来“邀功”</li>
        <li>男子爬到山顶举起手杖 指天大喊:赐予我力量吧 结果被雷劈了</li>
        <li>男子与情人同居2年卷走15万 把钱全都上交老婆称是工资</li>
        <li>江苏男子连偷三晚玉米 没工具纯靠手捧了2400多趟 总共偷走1200余斤</li>
        <li>女子女扮男装 与2任女友同居5年 诈骗100多万元</li>
        <li>小偷夜晚入室盗窃 想学影视剧用“手刀”敲晕主人 结果给人打醒了</li>
        <li>男子嫌上次关押时间短 没学会缝纫技术 遂再次盗窃回去学技术</li>
        <li>安徽一女子 因家里人多厕所不够用 偷走移动公厕</li>
        <li>“强迫症”犯人被判9年8个月 当庭上诉要求判十年整</li>
    </ol>
</body>
</html>

使用 ol 定义无序列表，内嵌套 li 定义列表项目。

定义列表

定义列表就相对抽象一点，dl声明一个定义列表，内嵌套 dt 定义列表中的项目 dd 描述列表中的项目。

一个定义列表可以嵌套多组列表项和项目。

例如下图的苹果官网的footer部分就使用了定义列表（实际上是lable实现的，但是定义列表或者table标签结合css也可以达到同样的效果）。

/2021/09/23/jq2avJKO4T3P17y.png图像异常

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>列表标签使用</title>
</head>
<body>
    <!--定义列表-->
    <dl>
        <dt>选购及了解</dt>
        <dd>Mac</dd>
        <dd>iPad</dd>
        <dd>iPhone</dd>
        <dd>Watch</dd>
        <dd>Music</dd>
        <dd>AirPods</dd>
        <dd>HomePod mini</dd>
        <dd>iPod touch</dd>
        <dd>AirTag</dd>
    </dl>
</body>
</html>

表格标签

在hrml中想要实现类似于excel表格效果或者更为复杂的表格例如淘宝的购买清单，可以使用 table 标签

Screenshot_20210923_125954.png

一个完整的表格需要四部分组成分别是 table tr th td

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表格标签使用</title>
</head>
<body>
    <table>
        <tr>
            <th>产品名称</th>
            <th>品牌</th>
            <th>数量</th>
            <th>入库时间</th>
        </tr>
        <tr>
            <td>电视机</td>
            <td>海尔</td>
            <td>500</td>
            <td>2021-10-1</td>
        </tr>
        <tr>
            <td>手机</td>
            <td>三星</td>
            <td>600</td>
            <td>2021-10-1</td>
        </tr>
        <tr>
            <td>自行车</td>
            <td>上海</td>
            <td>1000</td>
            <td>2021-10-1</td>
        </tr>
    </table>
</body>
</html>

table声明一个表格 tr 指每一行的内容 th 表示单元格表头 td表示单元项目。

表格属性

我们也可以使用table标签属性 border添加表格边框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title border="1">表格标签使用</title>
</head>
<body>
    <table>
        ...
    </table>
</body>
</html>

但是请注意 border 熟悉已被web标准弃用，并且推荐使用css方式添加。虽然已经被弃用，但是一些浏览器仍然可以使用该属性，可以但不推荐 相关链接。

使用 cellspacing 熟悉定义边框间距。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title border="1" cellspacing="0">表格标签使用</title>
</head>
<body>
    <table>
        ...
    </table>
</body>
</html>

同样这个属性也被弃用了，并且推荐使用css方式修改，相关链接。

1px表格实现

上面的两个熟悉确实是把两条线的边框变成一条线了，但是实际上我们是通过调整两条边框之间的间距实现的，事实上边框是2px很不美观。

要实现1px边框必须借助css，这里就简单的写一些css。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表格标签使用</title>
    <style>
        table{
            background: red;
        }
        table tr,td{
            background: #fff;
        }
    </style>
</head>
<body>
    <table border="0" cellspacing="1">
        <tr>
            <th>产品名称</th>
            <th>品牌</th>
            <th>数量</th>
            <th>入库时间</th>
        </tr>
        <tr>
            <td>电视机</td>
            <td>海尔</td>
            <td>500</td>
            <td>2021-10-1</td>
        </tr>
        <tr>
            <td>手机</td>
            <td>三星</td>
            <td>600</td>
            <td>2021-10-1</td>
        </tr>
        <tr>
            <td>自行车</td>
            <td>上海</td>
            <td>1000</td>
            <td>2021-10-1</td>
        </tr>
    </table>
</body>
</html>

相比之前的demo我们在 head 中添加了一个 style 标签用于编写该页面的样式表，随后使用 border cellspacing 两个属性调整边框大小以及间距，最后在css中添加背景色。感觉上出现了1px的边框 实际上是边距+背景色的实现效果。关于css这里不过多展开。

表格标题

使用 caption 标签为你的表格添加标题。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表格标签使用</title>
</head>
<body>
    <table>
        <caption>商品列表</caption>
        <tr>
            <th>产品名称</th>
            <th>品牌</th>
            <th>数量</th>
            <th>入库时间</th>
        </tr>
        <tr>
            <td>电视机</td>
            <td>海尔</td>
            <td>500</td>
            <td>2021-10-1</td>
        </tr>
        <tr>
            <td>手机</td>
            <td>三星</td>
            <td>600</td>
            <td>2021-10-1</td>
        </tr>
        <tr>
            <td>自行车</td>
            <td>上海</td>
            <td>1000</td>
            <td>2021-10-1</td>
        </tr>
    </table>
</body>
</html>

合并行列

使用 colspan 进行列合并 使用 rowspan 进行行合并

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表格标签使用</title>
</head>
<body>
    <table border="0" cellspacing="1">
        <caption>商品清单</caption>
        <tr>
            <th>产品名称</th>
            <th>品牌</th>
            <th colspan="2">数量和入库时间</th>
        </tr>
        <tr>
            <td>电视机</td>
            <td>海尔</td>
            <td>500</td>
            <td>2021-10-1</td>
        </tr>
        <tr>
            <td>手机</td>
            <td rowspan="2">三星</td>
            <td>600</td>
            <td>2021-10-1</td>
        </tr>
        <tr>
            <td>自行车</td>
            <td>1000</td>
            <td>2021-10-1</td>
        </tr>
    </table>
</body>
</html>

两个属性的属性值均为合并的单元格数量。

表单标签

表单通常用户将前台数据发送至后端进行操作，需要一些服务器相关知识，这里不过多展开。这里只介绍相关展示控件为后续铺路。

使用form标签声明一块表单域，在表单域中使用表单组件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单使用</title>
</head>
<body>
    <form action="">
        表单控件 例如输入框 单选框 复选框...
    </form>
</body>
</html>

注意 form标签有两个常用属性分别是 action 指你要把这些数据提交到哪里。

method指的是请求方式，通常就两种请求方式 GET 和 POST。

将数据以post的方式提交至bilibili就像如下：

<form action="https://www.bilibili.com/" method="POST">
    <input type="text">
    <input type="submit" value="立即注册">
</form>

在form表单中使用input标签定义一个表单项，使用value制定项目类型。例如上方的demo,分别是一个文本输入框text和表单提交按钮submit。

根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

输入框

输入框常用于搜集用户输入信息，例如账户密码等等....

<form action="https://www.bilibili.com/" method="POST">
    <!-- 普通文本输入框 -->
    <input type="text" placeholder="请输入用户名">
    <!-- 密码输入框 -->
    <input type="password" placeholder="请输入密码">
</form>

placeholder是输入值为空时的提示，placeholder中的内容不会被提交至服务器。

单选框

常用于在一定规定范围内单选选择，例如性别，血型等..

<form action="https://www.bilibili.com/" method="POST">
    <div>
        男：<input type="radio" name="sex">
        女：<input type="radio" name="sex">
     </div>
     <input type="submit" value="立即注册">
</form>

需要注意 必须给radio组件设置name属性设置相同属性值才能产生互斥效果。

上面的demo使用了div标签辅助布局将两个单选框归类以方便后期维护排版。

复选框

常用于在一定规定范围内多选，例如“选出你最喜欢的几个作品” "兴趣爱好"等等...

<form action="https://www.bilibili.com/" method="POST">
    ...
    <div>
        抽烟 <input type="checkbox">
        喝酒 <input type="checkbox">
        烫头 <input type="checkbox">
        上网 <input type="checkbox">
        姑娘 <input type="checkbox">
    </div>
    ...
</form>

下拉列表

常用于在一定范围内选择且数据量大不方便展示时，例如地区选择。

<form action="https://www.bilibili.com/" method="POST">
    ...
    <select>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>牡丹江</option>
    </select>
    ...
</form>

下拉列表是一个独立的标签 并不是input的一个属性需要注意。select声明列表框，option声明列表项。

可以在select上添加multiple="multiple" 属性实现多选。

多行文本输入

常用于大量文本输入，例如文章编辑，个人介绍等等...

<form action="https://www.bilibili.com/" method="POST">
    ...
    <textarea cols="30" rows="10"></textarea>
    ...
</form>

textarea标签定义一个文本域，输入内容可以自动换行，自行放大缩小。

可以使用cols rows指定默认的宽高

formButton

在表单中有两种按钮可以使用 分别是type=submit的提交行为按钮，另外一种就是 type=resect 的重置表单行为按钮。

<form action="https://www.bilibili.com/" method="POST">
    ...
    <input type="submit" value="立即注册">
    <input type="reset" value="重置">
    ...
</form>

使用value可以指定按钮文本。

lable标签应用

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

label 标签的for 属性应当与相关元素的 id 属性相同。

<form action="https://www.bilibili.com/" method="POST">
    ...
    <label for="name">用户名</label>
    <input type="text" placeholder="请输入用户名" id="name"> <br>
    <label for="pwd">密码</label>
    <input type="password" placeholder="请输入密码" id="pwd">
    ...
</form>

完整表单

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单使用</title>
</head>
<body>
    <form action="https://www.bilibili.com/" method="POST">
        <label for="name">用户名</label>
        <input type="text" placeholder="请输入用户名" id="name"> <br>
        <label for="pwd">密码</label>
        <input type="password" placeholder="请输入密码" id="pwd"> <br>
        <div>
            男：<input type="radio" name="sex">
            女：<input type="radio" name="sex">
        </div>
        <div>
            抽烟 <input type="checkbox">
            喝酒 <input type="checkbox">
            烫头 <input type="checkbox">
            上网 <input type="checkbox">
            姑娘 <input type="checkbox">
        </div>
        <div>
            <span>地区</span>
            <select>
                <option>北京</option>
                <option>上海</option>
                <option>广州</option>
                <option>牡丹江</option>
            </select>
        </div>
        <textarea cols="30" rows="10"></textarea>

    </form>
</body>
</html>

容器标签

div标签没有直接的视觉效果，他的主要作用是进行“分类”，可以把文档内容分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

在之前的表单demo中有使用过。

转移字符

在段落一节中我们使用过转意字符去解决html中无法输入连续的空格问题。转义字符有很多，但是不用完全记住，只需要记住几个常用的就好，剩余的用到了再查询。

在 HTML 中，某些字符是预留的。

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用转义字符（character entities）。

引用自 w3school

！但请注意转义字符对大小写敏感，例如 &COPy; 就是一个错误写法。

常用转义字符

字符 十进制 转义字符
" " "
& & &
< < <
> > >
不断开空格(non-breaking space)    
版权声明 © ©

全部转义字符对照表

关于路径

相对路径与绝对路径

关于语义化

标签语义化即“什么情况下使用此标签合理”

举个例子：?

网页中文章标题可以使用标题标签 即h1~h6标签，文章段落放置到p标签内，文章中使用强调语气尽量使用em或者strong标签等等...

当然H5（HTML5）标准引入了更多语义化标签，这里不过多展开，以上标签配合CSS足够使用。

说了这么多语义化，他到底有什么好处？

  • 更容易被搜索引擎收录
  • 更容易让屏幕阅读器读出网页内容
  • 更易于开发者后期维护

标签的作用

  • 使网站结构更加清晰
  • 网站制作的基石
  • 被搜索引擎收录

题外话

Q：为什么不介绍H5标签？

A：本文档仅帮助新手快速入门，H5标签虽然不多也不复杂，但是想用好H5标签多半需要JS去操作，例如媒体标签虽然是“开箱及用”但是真正的企业项目大多数都要用js封装重新操作一遍，以维持不同浏览器下的样式或迁就业务逻辑等。还有绘图标签canvas等，没有js基础根本玩不了，徒增学习压力，没必要。至于H5的文章会写但不是现在。

Q：没有编程基础或者不是相关专业是不是学起来很难？

A：并没有 我艺术生大学专业数字媒体虽然也有前端网页制作的课程但是讲的很浅，说实话真的不如再寝室自己学，事实上我大部分都是在寝室自学。课上内容作为入门确实可以，但是进阶还是得靠自己。假如课堂上没有相关课程可以自己去网上搜索教程入门这里我推荐一个up主 小马哥_老师 我的文档内容也多半来源于这位老师的课程。

Q：既然有视频了我为什么要看文档or写文档？

A：确实新手入门看视频是最好的选择，因为我觉得编程这个东西入门和精通很难，但是会确实是很简单的。没有一个人引导你入门，自己找方向是很困难的。至于文档是提升的手断，毕竟看视频获取信息速度慢，而且身为一个程序员也得锻炼自己看文档的能力，包括我现在总结写出来的文档，都是锻炼提升的过程。

Q：关于更新频率

A：H4的内容很少大概一天就能完事，但是css js的内容会很多，不可能一天之内更新出来。但是博客和公众号会保持一天一更的频率更新，会定期分享一些代码片段。

结束

作者：F_picacho

校验：F_picacho

团队：登阳自行车研发中心

首发于：F_picachoの领域

同步发表：登阳自行车研发中心微信公众号

感谢：刘建伟老师、小马哥老师、白菜、洋洋洋、Web-Tian、此刻你不在。对我在技术之路上的指导。

​ 《某科学的超电磁炮》、《精灵宝可梦》系列动画陪伴我无聊的时光。

发布于

vsftpd配置虚拟用户的一次踩坑

在配置完虚拟用户后虚拟用户一直登陆不上。
查看/var/log/secure一直为空(因为之前产生的日志太多玩删除了该文件并touch一个了新)。
现在知道删除/var/log/secure后要重启rsyslog服务才会重新记录日志。
systemctl restart vsftpd.service
最后翻/var/log/secure日志破案,把其中一个user打成了uesr

Dec 29 19:18:56 MasterNode vsftpd: pam_userdb(vsftpd:auth): user_lookup: could not open database `/etc/vsftpd/vuesr': No such file or directory
Dec 29 19:18:56 MasterNode vsftpd: pam_unix(vsftpd:auth): check pass; user unknown
Dec 29 19:18:56 MasterNode vsftpd: pam_unix(vsftpd:auth): authentication failure; logname= uid=0 euid=0 tty=ftp ruser=down42 rhost=MasterNode

我是傻逼...

发布于

vueCli3下移动端响应式解决方案

vueCli3下移动端响应式解决方案

flexible

  • 主要是用来响应式改变根元素的字体大小
  • 安装命令 npm install lib-flexible --save
  • 在main.js里面导入命令import 'lib-flexible'

要把index.html里面的<meta name='viewport'>标签删除;因为会自动添加

postcss-plugin-px2rem配置内容解释

  • 将px转换成rem
  • 安装命令 npm i --save postcss-plugin-px2rem
  • 在根目录创建一个名为vue.config.js的文件写入
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-plugin-px2rem")({
            rootValue: 37.5, //换算基数，1rem相当于10px,值为37.5时,1rem为20px,淘宝的flex默认为1rem为10px
            exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)\/如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
            mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
            minPixelValue: 3,
          }),
        ],
      },
    },
  },
};

！注意 某些元素不想进行转换可以直接写行内或者使用Px PX绕过postcss-plugin-px2rem

发布于

vue3 使用teleport(传送门)组件实现一个模态框

vue3 使用teleport(传送门)组件实现一个模态框

vue3的teleport功能类似于react的Portals，portals提供了一种将子节点渲染到存在于父组件以外都dom节点解决方案，vue3的teleport与react的Portals功能类似，且更加好用。

在vue2下 要实现类似功能需要通过portal-vue库去实现。

我们为什么需要Teleport

teleport是一种能将我们的模板移动到DOM中Vue App之外的技术，有点类似多啦A梦的“传送门”

使用场景：像modals，toast等这样的元素，很多情况下我们将它完全和我们的Vue应用DOM完全剥离，管理起来相反会方便许多

原因在于如果我们嵌套在Vue某个组件内部，那么处理组件的定位、z-index和样式就会变得很困难

另外，像modals，toats等这样的元素需要使用到Vue组件状态的值我们可能需要将状态放入到Vuex中同一管理，而teleport可以直接使用组件的data或prpos。然后在Vue应用范围之外渲染它。

以上引用自Gopal1 Vue 3 任意传送门——Teleport

修改了“另外，想modals.....然后在Vue应用范围之外渲染它”

使用Teleport实现一个模态框Deom

新建一个模态框组件 ./src/components/modal.vue
注意 在Vue3中拥有Fragments特特性可以允许组件存在多个根，所以一下模板写法是合法的。

<template>
  <button @click="modalOpen = true">开启模态框</button>
  <teleport to="body">
    <div v-if="modalOpen" class="modal">
      <div>
        我是一个模态框
        <button @click="modalOpen = false">关闭模态框</button>
      </div>
    </div>
  </teleport>
</template>

<script>
export default {
  data() {
    return {
      modalOpen: false,
    };
  },
};
</script>

注意 teleport是Vue3中的一个全局组件你可以在任意地方使用

其中的to属性是要把组件下内容挂载到哪里去，参数是一个选择器 我这里就直接挂载到body标签下<teleport to="body"> teleport标签内是你要“传送的内容” 我们可以直接使用模板下的data状态对模态框的显示进行操作。

随后追加上css

<style scopde>
.modal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.modal div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: white;
  width: 300px;
  height: 300px;
  padding: 5px;
}
</style>

然后你就可以在任意组件使用我们的模态框了但是注意

！如果你是使用Vite构建的项目在引入组件时必须携带组件后缀，让Vite知道该如何处理这个文件

import Modal from "./modal.vue";

然后就可以使用了。

发布于

vue多国语言方案

Vue国际化实现方案

原文地址：此刻_你不在

  1. 安装vue-i18n
npm i vue-i18n -S
  1. 在src/main.js中 实例化/注册`vue-i18n
...
import VueI18n from "vue-i18n"; // 引入组件

Vue.use(VueI18n); //注册组件

const i18n = new VueI18n({
  locale: "zh", //语言标识 默认语言
    // CommonJS规范引入语言文件
  messages: { 
    zh: require("@/assets/lang/zh"),
    en: require("@/assets/lang/en"),
  },
});

new Vue({
  i18n, //在Vue实例上挂在组件
  render: (h) => h(App),
}).$mount("#app");
  1. 在src/assets目录下创建语言包lang并且创建语言文件
assets  
└─lang
        en.js
        zh.js

生成 tree 视图: tree -I "node_modules|dist" (tree.exe)
assets/lang/zh.js

module.exports = {
  classical: {
    title: "木兰诗",
    content: `唧唧复唧唧，木兰当户织。不闻机杼声，唯闻女叹息。`
  },
};

assets/lang/en.js

module.exports = {
  classical: {
    title: "Mulan Poetry",
    content: `Haw and haw, Magnolia weaving. I don't hear the sound of the loom, but I hear the sigh of the girl.
  },
};

至此 一切准备工作准备完毕，接下来让我们使用它。

在任意组件中可以使用

this.$t('classical.title');

获取当前语言配置版本的文本，在模板中使用{{$t('classical.title')}} 也能达到效果，且更直接。

语言配置切换

methods: {
  chooseLang(langType) {
    this.$i18n.locale = langType;
},

langType参数为src/main.jsmessages的key

附录：各国语言简写

Countries and Regions 国家或地区 *国际域名缩写*
Angola 安哥拉 AO
Afghanistan 阿富汗 AF
Albania 阿尔巴尼亚 AL
Algeria 阿尔及利亚 DZ
Andorra 安道尔共和国 AD
Anguilla 安圭拉岛 AI
Antigua and Barbuda 安提瓜和巴布达 AG
Argentina 阿根廷 AR
Armenia 亚美尼亚 AM
Ascension 阿森松
Australia 澳大利亚 AU
Austria 奥地利 AT
Azerbaijan 阿塞拜疆 AZ
Bahamas 巴哈马 BS
Bahrain 巴林 BH
Bangladesh 孟加拉国 BD
Barbados 巴巴多斯 BB
Belarus 白俄罗斯 BY
Belgium 比利时 BE
Belize 伯利兹 BZ
Benin 贝宁 BJ
Bermuda Is. 百慕大群岛 BM
Bolivia 玻利维亚 BO
Botswana 博茨瓦纳 BW
Brazil 巴西 BR
Brunei 文莱 BN
Bulgaria 保加利亚 BG
Burkina-faso 布基纳法索 BF
Burma 缅甸 MM
Burundi 布隆迪 BI
Cameroon 喀麦隆 CM
Canada 加拿大 CA
Cayman Is. 开曼群岛
Central African Republic 中非共和国 CF
Chad 乍得 TD
Chile 智利 CL
China 中国 CN
Colombia 哥伦比亚 CO
Congo 刚果 CG
Cook Is. 库克群岛 CK
Costa Rica 哥斯达黎加 CR
Cuba 古巴 CU
Cyprus 塞浦路斯 CY
Czech Republic 捷克 CZ
Denmark 丹麦 DK
Djibouti 吉布提 DJ
Dominica Rep. 多米尼加共和国 DO
Ecuador 厄瓜多尔 EC
Egypt 埃及 EG
EI Salvador 萨尔瓦多 SV
Estonia 爱沙尼亚 EE
Ethiopia 埃塞俄比亚 ET
Fiji 斐济 FJ
Finland 芬兰 FI
France 法国 FR
French Guiana 法属圭亚那 GF
Gabon 加蓬 GA
Gambia 冈比亚 GM
Georgia 格鲁吉亚 GE
Germany 德国 DE
Ghana 加纳 GH
Gibraltar 直布罗陀 GI
Greece 希腊 GR
Grenada 格林纳达 GD
Guam 关岛 GU
Guatemala 危地马拉 GT
Guinea 几内亚 GN
Guyana 圭亚那 GY
Haiti 海地 HT
Honduras 洪都拉斯 HN
Hongkong 香港 HK
Hungary 匈牙利 HU
Iceland 冰岛 IS
India 印度 IN
Indonesia 印度尼西亚 ID
Iran 伊朗 IR
Iraq 伊拉克 IQ
Ireland 爱尔兰 IE
Israel 以色列 IL
Italy 意大利 IT
Ivory Coast 科特迪瓦
Jamaica 牙买加 JM
Japan 日本 JP
Jordan 约旦 JO
Kampuchea (Cambodia ) 柬埔寨 KH
Kazakstan 哈萨克斯坦 KZ
Kenya 肯尼亚 KE
Korea 韩国 KR
Kuwait 科威特 KW
Kyrgyzstan 吉尔吉斯坦 KG
Laos 老挝 LA
Latvia 拉脱维亚 LV
Lebanon 黎巴嫩 LB
Lesotho 莱索托 LS
Liberia 利比里亚 LR
Libya 利比亚 LY
Liechtenstein 列支敦士登 LI
Lithuania 立陶宛 LT
Luxembourg 卢森堡 LU
Macao 澳门 MO
Madagascar 马达加斯加 MG
Malawi 马拉维 MW
Malaysia 马来西亚 MY
Maldives 马尔代夫 MV
Mali 马里 ML
Malta 马耳他 MT
Mariana Is 马里亚那群岛
Martinique 马提尼克
Mauritius 毛里求斯 MU
Mexico 墨西哥 MX
Moldova, Republic of 摩尔多瓦 MD
Monaco 摩纳哥 MC
Mongolia 蒙古 MN
Montserrat Is 蒙特塞拉特岛 MS
Morocco 摩洛哥 MA
Mozambique 莫桑比克 MZ
Namibia 纳米比亚 NA
Nauru 瑙鲁 NR
Nepal 尼泊尔 NP
Netheriands Antilles 荷属安的列斯
Netherlands 荷兰 NL
New Zealand 新西兰 NZ
Nicaragua 尼加拉瓜 NI
Niger 尼日尔 NE
Nigeria 尼日利亚 NG
North Korea 朝鲜 KP
Norway 挪威 NO
Oman 阿曼 OM
Pakistan 巴基斯坦 PK
Panama 巴拿马 PA
Papua New Cuinea 巴布亚新几内亚 PG
Paraguay 巴拉圭 PY
Peru 秘鲁 PE
Philippines 菲律宾 PH
Poland 波兰 PL
French Polynesia 法属玻利尼西亚 PF
Portugal 葡萄牙 PT
Puerto Rico 波多黎各 PR
Qatar 卡塔尔 QA
Reunion 留尼旺
Romania 罗马尼亚 RO
Russia 俄罗斯 RU
Saint Lueia 圣卢西亚 LC
Saint Vincent 圣文森特岛 VC
Samoa Eastern 东萨摩亚(美)
Samoa Western 西萨摩亚
San Marino 圣马力诺 SM
Sao Tome and Principe 圣多美和普林西比 ST
Saudi Arabia 沙特阿拉伯 SA
Senegal 塞内加尔 SN
Seychelles 塞舌尔 SC
Sierra Leone 塞拉利昂 SL
Singapore 新加坡 SG
Slovakia 斯洛伐克 SK
Slovenia 斯洛文尼亚 SI
Solomon Is 所罗门群岛 SB
Somali 索马里 SO
South Africa 南非 ZA
Spain 西班牙 ES
Sri Lanka 斯里兰卡 LK
St.Lucia 圣卢西亚 LC
St.Vincent 圣文森特 VC
Sudan 苏丹 SD
Suriname 苏里南 SR
Swaziland 斯威士兰 SZ
Sweden 瑞典 SE
Switzerland 瑞士 CH
Syria 叙利亚 SY
Taiwan 台湾省 TW
Tajikstan 塔吉克斯坦 TJ
Tanzania 坦桑尼亚 TZ
Thailand 泰国 TH
Togo 多哥 TG
Tonga 汤加 TO
Trinidad and Tobago 特立尼达和多巴哥 TT
Tunisia 突尼斯 TN
Turkey 土耳其 TR
Turkmenistan 土库曼斯坦 TM
Uganda 乌干达 UG
Ukraine 乌克兰 UA
United Arab Emirates 阿拉伯联合酋长国 AE
United Kiongdom 英国 GB
United States of America 美国 US
Uruguay 乌拉圭 UY
Uzbekistan 乌兹别克斯坦 UZ
Venezuela 委内瑞拉 VE
Vietnam 越南 VN
Yemen 也门 YE
Yugoslavia 南斯拉夫 YU
Zimbabwe 津巴布韦 ZW
Zaire 扎伊尔 ZR
Zambia 赞比亚 ZM
发布于

vueCli3下pc多分辨率自适应解决方案

！注意仅为适应各种分辨率屏幕，不包含平板以及移动设备。单纯做移动设备响应适配请移步到flexible+px2rem 解决方案

vueCli3下自适应解决方案

postcss-plugin-px2rem

  • 将css中px转换为rem
  • 安装命令 npm i -S postcss-plugin-px2rem
  • 项目根目录下新建 vue.config.js 配置文件
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-plugin-px2rem")({
            rootValue: 192, //设计稿宽度/10
            exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)\/如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
            // unitPrecision: 5, //允许REM单位增长到的十进制数字。
            //propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
            // propBlackList: [], //黑名单
            // selectorBlackList: [], //要忽略并保留为px的选择器
            // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
            // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
            // mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
            // minPixelValue: 3, //设置要替换的最小像素值(3px会被转rem)。 默认 0
          }),
        ],
      },
    },
  },
};
  • 在src目录下新建rem.js文件
export function setRemInit() {
  // postcss-px2rem的内容
  // 基准大小
  const baseSize = 192;
  // 设置 rem 函数
  function setRem() {
    // 当前页面宽度相对于 1920 px(设计稿尺寸)的缩放比例，可根据自己需要修改。
    const scale = document.documentElement.clientWidth / 1920;
    // 设置页面根节点字体大小
    document.documentElement.style.fontSize = `${baseSize * scale}px`;
  }
  // 初始化
  setRem();
  // 改变窗口大小时重新设置 rem
  window.addEventListener("resize", setRem);
}

在main.js中引用rem.js


import { setRemInit } from '../src/rem';

setRemInit(); *//进行初始化立即运行*
发布于

vscode安装JetBrainsMono字体

已经弃用webstrom大半年了，使用vscode的过程非常愉快。但是我还是忘不了jb家的JetBrainsMono字体，所以今天给vscode也整一个。

  1. 下载字体文件 官网下载
  2. 打开压缩包进入 /ttf文件夹，将所有字体进行安装
  3. 打开vscode 快捷键Ctrl+，搜索settings.json进行编辑
  4. 添加
"editor.fontFamily": "JetBrains Mono",
"editor.fontLigatures": true

完事 手动滑稽