一文搞懂弹性盒子flex布局
什么是flex布局 flex布局又称为弹性盒子模型，它有自己的一套属性，效率高，学习成本低，兼容性强！ 弹性盒子模型实现 HTML 页面布局是与方向无关的。不类似于块级布局侧重垂直方向，内联布局侧重水平方向。 弹性盒子模型主要适用于 HTML 页面的组件以及小规模的布局，而并不适用于大规模的布局，否则会影响 HTML 页面性能。 名词定义 伸缩容器（flex container）：包裹伸缩项目的父元素。 伸缩项目（flex item）：伸缩容器的每个子元素。 轴（axis）：每个弹性盒子模型拥有两个轴。 主轴（main axis）：伸缩项目沿其一次排列的轴被称为主轴。 侧轴（cross axis）：垂直于主轴的轴被称为侧轴。 方向（direction）：伸缩容器的主轴由主轴起点和主轴终点，侧轴由侧轴起点和侧轴终点描述伸缩项目排列的方向。 尺寸（dimension）：根据伸缩容器的主轴和侧轴，伸缩项目的宽度和高度。 对应主轴的称为主轴尺寸。 对应侧轴的称为侧轴尺寸。 定义弹性盒子 弹性盒子是css3新增的属性，因此弹性盒子模型及其属性存在浏览器兼容问题。具 ...
HTML5中audio与video
音频 HTML5中提供的音频API标签为<audio></audio>，使用示例如： 1<audio src="野狼disco.m4a" controls></audio> 兼容写法 1234567<audio controls> <source src="resource/audio/OUTPUT.mp3" type='audio/mpeg'> <source src="resource/audio/OUTPUT.aac" type='audio/aac; codecs="aac"'> <source src="resource/audio/OUTPUT.ogg" type='audio/ogg; codecs="vorbis"'> 您的浏览器不支持，<a href=" ...
三、移动端轮播图的实现
布局 1234567891011121314151617181920<div id="app"> <div id="swiper-container"> <!-- 幻灯片的结构 --> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="./img/1.jpg"></div> <div class="swiper-slide"><img src="./img/2.jpg"></div> <div class="swiper-slide"><img src="./img/3.jpg"></div> <div class ...
四、Webpack其他补充
多页面打包 使用glob插件并通过 1yarn add glob html-webpack-plugin -D 配置 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758/** * @description: * @author: 小康 * @url: https://xiaokang.me * @Date: 2021-01-02 17:18:46 * @LastEditTime: 2021-01-02 17:18:46 * @LastEditors: 小康 */const glob = require('glob')const path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')const setMPA = () => { const entr ...
三、Webpack优化配置
性能优化 性能优化包含开发环境优化和生产环境优化。 开发环境 优化打包构建速度 优化代码调试 生产环境 优化打包构建速度 优化代码运行的性能 开发环境 HMR 即热更新：一个模块发生变化，只会重新打包这一个模块。 在devServer中开启 1234567891011{ devServer: { contentBase: resolve(__dirname, 'build'), compress: true, port: 3000, open: true, // 开启HMR功能 // 当修改了webpack配置，新配置要想生效，必须重新webpack服务 hot: true }} 样式文件 样式文件可以使用热更新，因为style-loader内部实现了 js文件 默认不使用HMR功能，需要手动修改支持HMR。且只能处理非入口文件。 12345678if (module.hot) & ...
二、Webpack进阶玩法
说明 由于webpack5正式版刚发布不久，仍有插件不支持webpack5，因此此文以webpack4为例进行撰写。 webpack@4.44.1 webpack-cli@3.3.12 提取CSS成单独文件 安装插件 1yarn add mini-css-extract-plugin -D 配置文件：将MiniCssExtractPlugin.loader替换曾经的style-loader 123456789101112131415161718192021222324252627282930313233343536/** * @description: * @author: 小康 * @url: https://xiaokang.me * @Date: 2020-12-31 19:32:48 * @LastEditTime: 2020-12-31 19:32:48 * @LastEditors: 小康 */const { resolve } = require('path')const HtmlWebpackPlugin = requir ...
一、Webpack简单使用
webpack五个核心概念 Entry 入口(Entry)指示webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。 output 输出(Output)指示webpack 打包后的资源bundles 输出到哪里去，以及如何命名。 loader Loader 让webpack 能够去处理那些非JavaScript 文件(webpack 自身只理解JavaScript) plugins 插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。 mode 模式(Mode)指示webpack 使用相应模式的配置。 选项 描述 特点 development 会将DefinePlugin中process.env.NODE_ENV的值设置为development。启用NamedChunksPlugin和NamedModulesPlugin。 能让代码本地调试运行的环境 production 会将DefinePlugin中process.env.NODE_ENV的值设置为production。 ...
二、移动端的适配问题
尺寸适配 只需要将viewport width等于设计稿的宽度即可。 1<meta name='viewport' content='width=750,user-scalable=no'> less与rem适配 less文件 123456@font-size: 设计稿的宽度 / 10rem;#box{ width: 200/@font-size; height: 100/@font-size;} 使用js做根元素的调整 12345document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';window.onresize = function () { document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'p ...
一、移动端的事件
视口控制 1234<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scaleable=no, maximum-scale=1.0, minimum-scale=1.0" /> 事件 123456789101112131415var box = document.querySelector('#box')// 元素上触摸开始时触发box.addEventListener('touchstart', function () { box.style.backgroundColor = 'red'})// 元素上触摸移动时触发box.addEventListener('touchmove', function () { box.style.backgroundColor = 'yell ...
Gulp4简单使用
简介 gulp是前端自动化打包构建工具，所谓打包可以理解为把文件压缩, 整合, 移动, 混淆。gulp是一种基于流的打包构建工具。 文档：https://www.gulpjs.com.cn/docs/api/concepts/ 使用gulp，首先要全局安装gulp，全局安装只是可以使用其命令 123456# 安装npm install --global gulp# 卸载npm uninstall --global gulp# 查看版本gulp -v 也可以局部安装，通过scripts运行。 常用API task() 创建一个基于流的任务 123gulp.task('htmlHandler', function () { // 找到 html 源文件, 进行压缩, 打包, 放入指定目录}) src() 找到源文件 1234567891011121314// 找到指定一个文件gulp.src('./a/b.html')// 找到指定目录下, 指定后缀的文件gulp.src('./a/*.html ...
