From 9e20436e201db536e502d8aadfbeca335b06df82 Mon Sep 17 00:00:00 2001 From: pengshiyu <1940607002@qq.com> Date: Tue, 22 Feb 2022 10:24:11 +0800 Subject: [PATCH] fix --- blog/front-end-combat/demo/base.css | 67 +++++++++++++++++++++++++++++ blog/front-end-combat/index.md | 2 +- blog/front-end-combat/mobile.md | 38 ++++++++++++++++ blog/front-end-combat/practice.md | 25 +++++++++-- doc/c.md | 6 ++- doc/css.md | 3 ++ doc/html.md | 1 + doc/index.md | 28 ++++++++++-- doc/java.md | 2 + doc/javascript.md | 24 ++++++++++- doc/linux.md | 4 +- doc/php.md | 4 +- doc/ruby.md | 5 +++ 13 files changed, 196 insertions(+), 13 deletions(-) create mode 100644 blog/front-end-combat/demo/base.css diff --git a/blog/front-end-combat/demo/base.css b/blog/front-end-combat/demo/base.css new file mode 100644 index 0000000..0442390 --- /dev/null +++ b/blog/front-end-combat/demo/base.css @@ -0,0 +1,67 @@ +/* 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 diff --git a/blog/front-end-combat/index.md b/blog/front-end-combat/index.md index 318a54a..17360e5 100644 --- 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) diff --git a/blog/front-end-combat/mobile.md b/blog/front-end-combat/mobile.md index d63cebd..9c258fe 100644 --- 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 作为单位 diff --git a/blog/front-end-combat/practice.md b/blog/front-end-combat/practice.md index 6e7705d..4aa6300 100644 --- 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{ - // px => rem - width: (50 / @rootSize); +.box { + // px => rem + 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 diff --git a/doc/c.md b/doc/c.md index 18d1aa9..e1a82ea 100644 --- a/doc/c.md +++ b/doc/c.md @@ -1,3 +1,7 @@ # C 语言 -[慕课网-C语言入门](http://www.imooc.com/learn/249) \ No newline at end of file +[慕课网-C语言入门](http://www.imooc.com/learn/249) + +[cplusplus](http://www.cplusplus.com/) + +[mingw](http://www.mingw.org/) \ No newline at end of file diff --git a/doc/css.md b/doc/css.md index b65e5f8..1498a1f 100644 --- 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/) diff --git a/doc/html.md b/doc/html.md index fa024a5..5bef908 100644 --- 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/) diff --git a/doc/index.md b/doc/index.md index bd0f9a1..3bad851 100644 --- 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 +[电脑爱好者](https://www.cfan.com.cn/) diff --git a/doc/java.md b/doc/java.md index b1e7610..85be479 100644 --- 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) diff --git a/doc/javascript.md b/doc/javascript.md index 50bce00..b0bc4e9 100644 --- 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 开发框架 diff --git a/doc/linux.md b/doc/linux.md index b513aac..57a96b0 100644 --- a/doc/linux.md +++ b/doc/linux.md @@ -1,3 +1,5 @@ # Linux -[The Linux Kernel Archives](https://www.kernel.org/) \ No newline at end of file +[The Linux Kernel Archives](https://www.kernel.org/) + +[curl 的用法指南 阮一峰的网络日志](http://www.ruanyifeng.com/blog/2019/09/curl-reference.html) \ No newline at end of file diff --git a/doc/php.md b/doc/php.md index 7cdfd48..882d235 100644 --- 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 +[Twig](https://twig.symfony.com/): is a modern template engine for PHP + +[FastAdmin](https://www.fastadmin.net/): 基于ThinkPHP和Bootstrap的极速后台开发框架 \ No newline at end of file diff --git a/doc/ruby.md b/doc/ruby.md index 99ea45d..718126f 100644 --- a/doc/ruby.md +++ b/doc/ruby.md @@ -1 +1,6 @@ # 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 -- GitLab