泰安做网站优化,上海seo服务公司,中国建设官方网站登录,wordpress 开关 边栏 选择 模板1. 图标素材#xff08;iconfont简介#xff09;
制作字体图标的工具有很多#xff0c;推荐使用#xff1a;iconfont-阿里巴巴矢量图标库。
注册账户 创建项目 可以根据项目自定义 class 前缀 上传图标到项目 生成链接#xff0c;复制 css 代码#xff0c;在项目中使用…1. 图标素材iconfont简介
制作字体图标的工具有很多推荐使用iconfont-阿里巴巴矢量图标库。
注册账户 创建项目 可以根据项目自定义 class 前缀 上传图标到项目 生成链接复制 css 代码在项目中使用。 2. Vant 组件库 Vant 是有赞商城前端开发团队开发的一个基于 Vue.js 的移动端组件库它提供了非常丰富的移动端功能组件简单易用。 官方文档 GitHub 仓库
下面是在 Vant 官网中列出的一些优点 60 高质量组件 90% 单元测试覆盖率 完善的中英文文档和示例 支持按需引入 支持主题定制 支持国际化 支持 TS 支持 SSR 项目中主要使用 Vant 作为核心组件库下面根据官方文档将 Vant 导入项目中。
将 Vant 引入项目一共有四种方式 方式一自动按需引入组件 和方式二一样都是按需引入但是加载更方便一些需要额外配置插件 优点打包体积小 缺点每个组件在使用之前都需要手动加载注册 方式二手动按需引入组件 在不使用插件的情况下可以手动引入需要的组件 优点打包体积小 缺点每个组件在使用之前都需要手动加载注册 方式三导入所有组件 Vant 支持一次性导入所有组件引入所有组件会增加代码包体积因此不推荐这种做法 优点导入一次使用所有 缺点打包体积大 方式四通过 CDN 引入 使用 Vant 最简单的方法是直接在 html 文件中引入 CDN 链接之后你可以通过全局变量vant访问到所有组件。 优点适合一些演示、示例项目一个 html 文件就可以跑起来 缺点不适合在模块化系统中使用
3. 移动端 REM 适配 Vant 中的样式默认使用 px 作为单位如果需要使用 rem 单位推荐使用以下两个工具 postcss-pxtorem 是一款 postcss 插件用于将单位转化为 rem lib-flexible 用于设置 rem 基准值
下面我们分别将这两个工具配置到项目中完成 REM 适配。
3.1 使用 lib-flexible 动态设置 REM 基准值html 标签的字体大小
安装
yarn add amfe-flexible
或者npm i amfe-flexible
然后在 main.js 中加载执行该模块 3.2 使用 postcss-pxtorem 将 px 转为 rem
安装
# yarn add -D postcss-pxtorem
# -D 是 --save-dev 的简写
npm install postcss-pxtorem -D
然后在项目根目录中创建 postcssrc.config.js 文件
参考vant官方文档如下。 配置完毕重新启动服务刷新浏览器页面审查元素的样式查看是否已将 px 转换为 rem。
需要注意的是 该插件不能转换行内样式中的 px例如 div stylewidth: 200px;/div
3.3 关于 postcssrc.config.js 配置文件
PostCSS.config.js 是 PostCSS 的配置文件。
1PostCSS 介绍
PostCSS 是一个处理 CSS 的处理工具本身功能比较单一它主要负责解析 CSS 代码再交由插件来进行处理它的插件体系非常强大所能进行的操作是多种多样的例如 Autoprefixer 插件可以实现自动添加浏览器相关的声明前缀 PostCSS Preset Env 插件可以让你使用更新的 CSS 语法特性并实现向下兼容 postcss-pxtorem 可以实现将 px 转换为 rem ...
目前 PostCSS 已经有 200 多个功能各异的插件。开发人员也可以根据项目的需要开发出自己的 PostCSS 插件。
PostCSS 一般不单独使用而是与已有的构建工具进行集成。
Vue CLI 默认集成了 PostCSS并且默认开启了 autoprefixer 插件。
Vue CLI 内部使用了 PostCSS。
你可以通过 psotCSS.config.js 或任何 postcss-load-config 支持的配置源来配置 PostCSS。也可以通过 vue.config.js 中的 css.loaderOptions.postcss 配置 postcss-loader。
我们默认开启了 autoprefixer。如果要配置目标浏览器可使用 package.json 的 browserslist 字段。
2Autoprefixer 插件的配置 autoprefixer 是一个自动添加浏览器前缀的 PostCss 插件browsers 用来配置兼容的浏览器版本信息但是写在这里的话会引起编译器警告。
3postcss-pxtorem 插件的配置 rootValue表示根元素字体大小它会根据根元素大小进行单位转换 propList 用来设定可以从 px 转为 rem 的属性 例如 * 就是所有属性都要转换width 就是仅转换 width 属性
rootValue 应该如何设置呢 如果你使用的是基于 lib-flexable 的 REM 适配方案则应该设置为你的设计稿的十分之一。 例如设计稿是 750 宽则应该设置为 75。
大多数设计稿的原型都是以 iphone6 为原型iphone6 设备的宽是 750我们的设计稿也是这样。
但是 Vant 建议设置为 37.5为什么呢 因为 Vant 是基于 375 写的所以如果你设置为 75 的话Vant 的样式就小了一半。所以如果设置为 37.5 的话Vant 的样式是没有问题的但是我们在测量设计稿的时候都必须除 2 才能使用否则就会变得很大。
通过查阅文档我们可以看到 rootValue 支持两种参数类型 数字固定值 函数动态计算返回 postcss-pxtorem 处理每个 CSS 文件的时候都会来调用这个函数 它会把被处理的 CSS 文件相关的信息通过参数传递给该函数
所以修改配置如下 假设设计稿宽是750px的情况下在写 css 样式的时候就可以量多少写多少而不用再去除以2。
