Vue -项目创建（rem适配项的设置）

3. 项目rem 配置

####3.1 rem介绍

小米、京东、携程 m.mi.com/m.jd.com/m.ctrp.com

核心原理

 1rem = 当前 html 的fontSize也就是说 : rem是相当于根元素的字体大小// 使用div {width:2rem;height:2rem}// 媒体查询@media (min-width:320px) {html {font-size : 20px}}@media (min-width:640px) {html {font-size : 40px}}

作用 :

保证适配所有的屏幕, 而且几乎完全的还原了设计图,  体验好

rem的痛点

1. 使用rem开发没有px开发爽
2. 需要做不同屏幕的适配 (需要给每个屏幕都设置一个html的fontSize 媒体查询)
3. 开发的时候, 设计图量出来的都是px, 还需要转化为rem单位 (依赖 px2rem)解决办法 : 基于webpack配置rem环境, 变得自动化

3.2. rem的配置 (webpack环境下的配置)

安装包 :

npm i lib-flexiblelib-flexible这个包是阿里开源的一个库, 自动给不同屏幕设置html的fontSize

引入 lib-flexible

// main.js   自动适配所有屏幕
import 'lib-flexible'

打开浏览器就可以看到 html 上的 font-size

他会给每个屏幕都设置一个html的大小, 会把屏幕的宽度大小/10 = 1rem

lib-flexible会自动帮我们设置视口, 所以需要把原来的额视口删除, index.html的viewport

320 * data-dpr = 640 /10 => 64

给一个div设置样式

.one {width:200px;height:200px;
}
// 发现切换没有反应, 因为没有设置为 rem单位

安装第二个库 : 这个包会自动把我们项目中的px转化为rem单位

npm i postcss-px2rem

vue.config.js里面做配置

module.exports = {devServer: {open: true,},// 配置 px 转 rem 的css: {loaderOptions: {css: {},postcss: {plugins: [require('postcss-px2rem')({// rem 的单位  填设计稿的 1/10remUnit: 75,}),],},},},
}//这个值改怎么填
屏幕标准 : 375
设计稿 750   => 量的尺寸 200px  => 实际上100px
设计稿 640   => 量的尺寸 200px  => 实际上117px
设计稿 375   => 量的尺寸 200px  => 实际上200px

Vue -项目创建（rem适配项的设置）相关推荐

vue项目创建步骤和路由router知识点
菜单快捷导航: vue项目创建 vue路由router知识点(路径参数.查询参数.命名路由.嵌套路由.命名视图.hash/history模式) vue导航守卫(全局守卫.单个路由独享.组件级守卫) 1 ...
vue中使用rem适配方案
一.移动端适配常见方案: (1)通过媒体查询的方式即CSS3的meida queries (2)以天猫首页为代表的 flex 弹性布局 (3)以淘宝首页为代表的 rem+viewpor ...
Vue脚手架安装与 Vue项目创建运行、vue项目迁移后运行失败问题
目录 Vue脚手架安装 vue 如何查看vue cli的安装位置 Vue项目创建与运行 1.创建项目 2.运行项目 3.检测运行是否成功项目文件作用介绍快捷安装项目所需依赖命令 npm i Vu ...
vue项目运行自动打开浏览器,默认设置为google浏览器的方法
vue项目运行自动打开浏览器,默认设置为google浏览器. 设置方法就是把google浏览器设置为电脑默认浏览器,具体如下:
Vue脚手架搭建及vue项目创建【详细教程】
目录 Vue脚手架环境安装 Vue项目创建 Vue项目目录结构项目运行流程组件结构 Vue脚手架 Vue脚手架指的是vue-cli,它是一个快速构建**单页面应用程序(SPA)**环境配置的工具 ...
vue项目配置rem移动端适配
一.项目介绍脚手架CLI:@vue/cli Vue版本:2.6.11 移动UI组件库:Vant#2.10.14 CSS预处理器:sass 二.配置lib-flexible插件下载插件 npm i ...
vue|react脚手架rem适配
react适配初始化脚手架 create-react-app adpater_react 安装依赖方案一: yarn add postcss-px2rem customize-cra react- ...
Vue项目pc端适配方案（scss）
前言:vue项目适配可借助于插件lib-flexible 和postcss-px2rem. lib-flexible插件的作用:根据屏幕尺寸不同设置html根标签的字体大小,1rem即等于根标签的字体 ...
Vue入门：Vue项目创建及启动
1. 创建Vue项目存放地址用于存放Vue项目,找个自己处理方便的地方.本人地址:D:\Program Files\Workspace\Vue 2. 创建项目进入cmd窗口进入项目存放地址执行 ...

Vue -项目创建（rem适配项的设置）

3. 项目rem 配置

3.2. rem的配置 (webpack环境下的配置)

Vue -项目创建（rem适配项的设置）相关推荐

最新文章

热门文章