fix

9e20436e · 彭世瑜 · 12638d2a · 9e20436e · 9e20436e · 9e20436e
13 changed file
--- a/blog/front-end-combat/demo/base.css
+++ b/blog/front-end-combat/demo/base.css
+/* base.css */
+/* 部分代码参考reset.css */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+}
+body, html {
+    height: 100%
+}
+body{
+   font-family: Helvetica Neue,Tahoma,Arial,PingFangSC-Regular,Hiragino Sans GB,Microsoft Yahei,sans-serif;
+   line-height: 1;
+   font-size: 16px;
+   color: #222;
+   text-rendering: optimizeLegibility;
+   -webkit-text-size-adjust: 100%;
+   -webkit-font-smoothing: antialiased;
+   -webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+a {
+    color: inherit;
+    cursor: default;
+    text-decoration: none
+}
+img{
+    width: 100%;
+    height: 100%;
+    vertical-align: middle;
+}
+ol, ul{
+    list-style: none
+}
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+/* 单行文本溢出 */
+.ellipsis-1{
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+/* 多行文本溢出 */
+.ellipsis-2{
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
\ No newline at end of file
--- a/blog/front-end-combat/index.md
+++ b/blog/front-end-combat/index.md
@@ -13,7 +13,7 @@
 4. [动画 animation](blog/front-end-combat/animation.md)
-5. [移动端网页适配](blog/front-end-combat/mobile.md)
+5. [移动端网页适配](blog/front-end-combat/mobile.md): rem、vw/wh、媒体查询
 6. [Flex 布局](blog/front-end-combat/flex.md)

--- a/blog/front-end-combat/mobile.md
+++ b/blog/front-end-combat/mobile.md
@@ -128,3 +128,41 @@ github: [https://github.com/amfe/lib-flexible](https://github.com/amfe/lib-flexi
 [](demo/flexible.js.html ':include :type=code')
 [](demo/flexible.js.html ':include height=120')
+## 长度单位：vw/vh
+- 相对单位
+- 相对视口的尺寸计算结果
+含义
+- vw: viewport width
+- vh: viewport height
+换算方式
+```
+1vw = 1/100视口宽度
+1vh = 1/100视口高度
+vw单位的尺寸 = px单位数值 / ( 1 / 100 * 视口宽度)
+```
+例如：
+```
+357px宽的设备
+1vw = 357px / 100 = 3.57px
+```
+```css
+// index.less
+// 375的设计稿：68 * 29
+.box {
+  width: (68 / 3.75vw);
+  height: (29 / 3.75vw);
+}
+```
+统一使用 vw 或者 vh 作为单位
--- a/blog/front-end-combat/practice.md
+++ b/blog/front-end-combat/practice.md
@@ -15,12 +15,31 @@ index.html
 ## 移动适配
+1、less 中使用 rem
 ```css
 // 根字号基量 基于375px的设计图
 @rootSize: 37.5rem;
-.box{
+.box {
-    // px => rem
+  // px => rem
-    width: (50 / @rootSize);
+  width: (50 / @rootSize);
+}
+```
+2、less 中使用 vw
+```css
+/* 根字号基量 基于375px的设计图 */
+@vw: 3.75vw;
+.box: {
+  width: (80 / @vw);
 }
 ```
+base.css:
+[](demo/base.css ':include :type=code')
+https://www.bilibili.com/video/BV1xq4y1q7jZ?p=150&spm_id_from=pageDriver
--- a/doc/c.md
+++ b/doc/c.md
 # C 语言
 [慕课网-C语言入门](http://www.imooc.com/learn/249)
\ No newline at end of file
+[cplusplus](http://www.cplusplus.com/)
+[mingw](http://www.mingw.org/)
\ No newline at end of file
--- a/doc/css.md
+++ b/doc/css.md
@@ -26,6 +26,9 @@
 [Iconfont](https://www.iconfont.cn/) 阿里巴巴矢量图标库
+[Iconbox](https://arco.design/iconbox/libs) 字节跳动
 ## 第三方库
 [CSS Tools: Reset CSS](https://meyerweb.com/eric/tools/css/reset/)

--- a/doc/html.md
+++ b/doc/html.md
@@ -10,6 +10,7 @@
 - [前端开发必备！Emmet 使用手册](https://www.w3cplus.com/tools/emmet-cheat-sheet.html)
 ## 博客站点
 - [峰华前端工程师(张旭乾)](https://zxuqian.cn/)

--- a/doc/index.md
+++ b/doc/index.md
@@ -34,15 +34,35 @@
 Logo：https://www.logoly.pro/
-docsify：https://docsify.js.org/
+[docsify](https://docsify.js.org/)：快速帮你生成文档网站
+[Prism](https://prismjs.com/) Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind.
 [QRcode.show](https://qrcode.show/) : Generate QR code easily for free - QR Code Generation as a Service
-[姬长信API](https://api.isoyu.com/) 一个基于多种编程语言开源免费不限制提供生活常用,出行服务,开发工具,金融服务,通讯服务和公益大数据的平台.
+[姬长信 API](https://api.isoyu.com/) 一个基于多种编程语言开源免费不限制提供生活常用,出行服务,开发工具,金融服务,通讯服务和公益大数据的平台.
 [starchart.cc](https://starchart.cc/) Plot your repository stars over time.
-[Cmder](https://cmder.net/): Windows下的终端工具 Portable console emulator for Windows
+[Cmder](https://cmder.net/): Windows 下的终端工具 Portable console emulator for Windows
+[在线工具 tool.lu ](https://tool.lu/)
+- [favicon 在线制作](https://tool.lu/favicon/)
+[multiavatar 虚拟头像生成](https://multiavatar.com/)
+[Faker API](https://fakerapi.it/it): a collection of completely free APIs that helps web developers and web designers generate fake data in a fast and easy way. No registration is required. No tokens, no authentication.
+[DownGit](https://zhoudaxiaa.gitee.io/downgit/): 创建 GitHub 资源下载链接
+[Nestopia](http://nestopia.sourceforge.net/): Nintendo NES Emulator
+[玩的嗨-vip视频在线解析](https://tv.wandhi.com/go.html)
+[Hoppscotch](https://hoppscotch.io/): Postwoman
+- github: [https://github.com/hoppscotch/hoppscotch](https://github.com/hoppscotch/hoppscotch)
 ## 学习资料：
@@ -54,4 +74,4 @@ https://www.bilibili.com/video/BV1Kr4y1i7ru
 ## 网站
 [电脑爱好者](https://www.cfan.com.cn/)
\ No newline at end of file
--- a/doc/java.md
+++ b/doc/java.md
@@ -6,6 +6,8 @@
 [Spring Boot 指南](https://snailclimb.gitee.io/springboot-guide/)
+[Java 教程 | 菜鸟教程](https://www.runoob.com/java/java-tutorial.html)
 ## JavaFX
 [JavaFX 快速入门](https://www.yiibai.com/javafx/javafx-tutorial-for-beginners.html)

--- a/doc/javascript.md
+++ b/doc/javascript.md
@@ -8,8 +8,6 @@
 2021-12-23 [PubSubJS：用 JavaScript 编写的基于主题的发布/订阅库](https://pengshiyu.blog.csdn.net/article/details/122100104)
-[BootCDN](https://www.bootcdn.cn/): 稳定、快速、免费的前端开源项目 CDN 加速服务
 [http://www.json.org/](http://www.json.org/)
 [https://jekyllthemes.io/](https://jekyllthemes.io/)
@@ -18,6 +16,8 @@
 [https://www.ecma-international.org/](https://www.ecma-international.org/)
+[vue-element-admin](https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/) 是一个后台前端解决方案，它基于 vue 和 element-ui 实现。
 ## 第三方库
 [vue.js](https://cn.vuejs.org/v2/guide/)
@@ -50,8 +50,28 @@
 [html2canvas](http://html2canvas.hertzen.com/): Screenshots with JavaScript
+[Uni API](https://universal-api.js.org/): 小程序容器和 Web 容器的跨端 API 解决方案
+[Pinia](https://pinia.vuejs.org/): The Vue Store that you will enjoy using
+[Animate.css](https://animate.style/): Just-add-water CSS animations
+## CDN
+[BootCDN](https://www.bootcdn.cn/): 稳定、快速、免费的前端开源项目 CDN 加速服务
+[jsDelivr](https://www.jsdelivr.com/): A free CDN for Open Source
+fast, reliable, and automated
+[UNPKG](https://unpkg.com/): a fast, global content delivery network for everything on npm.
+[cdnjs](https://cdnjs.com/):Simple. Fast. Reliable.
+Content delivery at its finest.
 ## Node.js
 https://npm.devtool.tech/
 [ionic 教程](https://www.runoob.com/ionic/ionic-tutorial.html): 一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )
+[Express 中文网](https://www.expressjs.com.cn/): 基于 Node.js 平台，快速、开放、极简的 Web 开发框架
--- a/doc/linux.md
+++ b/doc/linux.md
 # Linux
 [The Linux Kernel Archives](https://www.kernel.org/)
\ No newline at end of file
+[curl 的用法指南 阮一峰的网络日志](http://www.ruanyifeng.com/blog/2019/09/curl-reference.html)
\ No newline at end of file
--- a/doc/php.md
+++ b/doc/php.md
@@ -41,4 +41,6 @@
 [Swoole](https://wiki.swoole.com/)：使用 C++ 语言编写的基于异步事件驱动和协程的并行网络通信引擎，为 PHP 提供协程、高性能网络编程支持
 [Twig](https://twig.symfony.com/):  is a modern template engine for PHP
\ No newline at end of file
+[FastAdmin](https://www.fastadmin.net/): 基于ThinkPHP和Bootstrap的极速后台开发框架
\ No newline at end of file
--- a/doc/ruby.md
+++ b/doc/ruby.md
 # Ruby
+[Ruby 程序设计语言官方网站](http://www.ruby-lang.org/zh_cn/): 一门开源的动态编程语言，注重简洁和效率。Ruby 的句法优雅，读起来自然，写起来舒适。
+[Jekyll themes — a curated directory](https://jekyllthemes.io/) Find the best theme for your next project from the most comprehensive,
+supportive and active Jekyll themes and templates website.
\ No newline at end of file