详解基于Vue/React项目的移动端适配方案
前言
本文的目标是通过下文介绍的适配方案，使用vue或react开发移动端及H5的时候，不需要再关心移动设备的大小，只需要按照固定设计稿的px值布局，提升开发效率。
下文给出了本人分别使用create-react-app搭建的react（create-react-app）项目和使用vue-cli 2.x 搭建的vue项目中的 亲测可用 配置方案。
px2rem或postcss-px2rem
- 在移动端中，为了设配不同的设备，通常使用rem来做适配。
- rem是通过根元素进行适配的，网页中的根元素指的是<html>，我们通过设置<html>的字体大小就可以控制 rem 的大小（1rem = 1根元素字体大小）。
- 可见，只要我们根据不同屏幕（使用css媒体查询或js）设定好根元素<html>的字体大小，其他已经使用了rem单位的元素就会自适应显示相应的尺寸。
- 设计稿一般是按照一种特定设备型号（如iphone6）为基础且以px单位来定义样式，为了让设计稿能够通用在不同的设备型号中，则存在着从px到rem的繁琐计算转化过程，因此需要更加科学的方式来使用rem单位。
- px2rem或postcss-px2rem的原理：将css中px编译为rem，配合js根据不同手机型号计算出dpr的值，修改<meta>的viewport值和置<html>的font-size。
项目中的使用
recat项目配置postcss-px2rem
首先，我们使用 react 的脚手架 create-react-app 初始化一个 webpack 项目（前提是已经安装过create-react-app，具体不再阐述）。
create-react-app my-app
暴露webpack配置，即 react-scripts 包：
yarn eject
使用yarn 安装项目所需依赖后，安装 lib-flexible 、 postcss-px2rem 和 postcss-loader：
yarn add postcss-px2rem lib-flexible yarn add postcss-loader --dev
在入口页面 index.html 中设置<meta>标签：
<meta name="viewport" content="width=device-width,inital-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
然后在项目入口文件 index.js 中引入 lib-flexible：
import 'lib-flexible';
接着，在项目config目录下的 webpack.config.js 中引入 postcss-px2rem ：
const px2rem = require('postcss-px2rem')
同时，在 webpack.config.js 的 postcss-loader loader里面添加 ：
{
loader: require.resolve('postcss-loader'),
options: {
/* 省略代码... */
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
px2rem({remUnit: 37.5}), // 添加的内容
/* 省略代码... */
],
sourceMap: isEnvProduction && shouldUseSourceMap,
},
},
最后，使用 yarn start 重启项目，则会发现项目中的postcss-px2rem配置完成。
vue项目配置px2rem
首先，我们使用 vue 的脚手架 vue-cli 初始化一个 webpack 项目（前提是已经安装过vue-cli，具体不再阐述），一些选项根据自己项目需要选择。
vue init webpack my-app
命令执行之后，会在当前目录生成一个以“my-app”命名的项目文件夹。进入项目目录：
cd my-app
使用yarn 安装项目所需依赖后，安装 lib-flexible 和 px2rem-loader：
yarn add lib-flexible yarn add px2rem-loader --dev
在入口页面 index.html 中设置<meta>标签：
<meta name="viewport" content="width=device-width,inital-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
然后在项目入口文件 main.js 中引入 lib-flexible：
import 'lib-flexible/flexible.js';
同时，在项目build目录下的 utils.js 中，将px2rem-loader 添加到cssLoaders中。通过搜索找到 generateLoaders 方法，在这里添加：
exports.cssLoaders = function (options) {
/* 省略代码块 */
const cssLoader = {
/* 省略代码块 */
}
/* 添加的代码块 */
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 37.5 // 基准大小 baseSize，设计稿宽度/10
}
}
/* 添加的代码块 */
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
const loaders = [cssLoader, px2remLoader] // 添加px2remLoader
if (loader) {
/* 省略代码块 */
}
/* 省略代码块 */
}
最后，使用 yarn dev 重启项目，会发现自己设置的px被转为rem 了。
适用情况 & 不适用情况
以上实现转换适用于：
（1）vue 组件中编写的<style></style>下的css。
（2）从 react 项目的 index.js 或者 vue 项目的 main.js 中通过import ‘../../static/css/reset.css'引入css。
（3）在 vue 组件的<script type=”text/ecmascript-6″>import ‘../../static/css/reset.css'</script>中引入css。
另外的情况不适用：
（1）在 vue 组件的<style></style>中通过@import “../../static/css/reset.css (可考虑上面（2）、（3）的形式引入)。
（2）外部样式：<link rel=”stylesheet” href=”static/css/reset.css”>。
（3）元素内部样式：style="height: 417px; width: 550px;"。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
解决vue移动端适配问题
1,先看看网上关于移动端适配讲解 再聊移动端页面适配,rem和vw适配方案! 基础点:rem相对根节点字体的大小.所以不用px; 根字体:字体的大小px; px:你就当成cm(厘米)这样的东西吧: 基准:750设计稿: 这是方案的基础理论,在这个基础上,我们还要搞明白,到底要干一件什么事情! 目标一.手机适配:就是页面上的尺寸,无论高度,还是宽度,还有字体,随屏幕的宽度变化!这里是屏幕宽度!是不是想到了vw,对,就是这个意思:--最大程度在各个尺寸屏幕上还原设计稿 目标二.px转换成rem:一般
-
vue做移动端适配最佳解决方案(亲测有效)
vw 解决方案 1. 安装并配置PostCss插件 复制代码 代码如下: npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S 2. 对 PostCss 进行配置 找到在根目录中的.postcssrc.js,对PostCSS插件进行配置 module.exports = { "plugins":
-
vue 移动端适配方案详解
一.方法一:rem 布局 在主入口:index.html,<head> 标签内添加如下JS 代码:(实现在标准 375px宽度适配下,100px = 1rem.) <script> (function () { // 在标准 375px 适配下,100px = 1rem; var baseFontSize = 100; var baseWidth = 375; var set = function () { var clientWidth = document.documentEl
-
vue项目中使用lib-flexible解决移动端适配的问题解决
第一部分:项目中引入lib-flexible 一.项目中安装lib-flexible $ npm install lib-flexible --save 二.在项目的入口js文件中引入lib-flexible import 'lib-flexible' 通过要以上两步,就完成了在vue项目使用lib-flexible来解决移动端适配了. lib-flexible会自动在html的head中添加一个meta name="viewport"的标签,同时会自动设置html的font-size
-
详解基于Vue/React项目的移动端适配方案
前言 本文的目标是通过下文介绍的适配方案,使用vue或react开发移动端及H5的时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局,提升开发效率. 下文给出了本人分别使用create-react-app搭建的react(create-react-app)项目和使用vue-cli 2.x 搭建的vue项目中的 亲测可用 配置方案. px2rem或postcss-px2rem 在移动端中,为了设配不同的设备,通常使用rem来做适配. rem是通过根元素进行适配的,网页中的根元素指的
-
详解基于Vue cli开发修改外部组件Vant默认样式
前言 在引入外部组件的时候,想要修改默认样式,可以通过class修改,但一般会有权重不够等各种原因,官网其实列出了一套主题定制的方案,通过覆盖配置文件来修改样式,官网地址:主题定制 提示:以下是本篇文章正文内容,下面案例可供参考 一.Less 因为Vant 使用了 Less 对样式进行预处理,并内置了一些样式变量,可以通过替换样式变量即可定制你自己需要的主题. 给你的项目配置less: npm install less --save-dev npm install less-loader --s
-
详解基于vue的服务端渲染框架NUXT
Nuxt 随着现在vue和react的流行,许多网站都做成了SPA,确实提升了用户体验,但SPA也有两个弱点,就是SEO和首屏渲染速度.为了解决单页应用的痛点,基于vue和react的服务端渲染应运而生.由于公司的框架采用的是vue,所以就简单的研究了一下基于vue的服务端渲染框架--NUXT.在vue的官网有关于服务端渲染的详细介绍,而NUXT集成了利用Vue开发服务端渲染的应用所需要的各种配置,也集成了Vue2.vue-router.vuex.vux-meta(管理页面meta信息的),利用
-
详解基于vue的移动web app页面缓存解决方案
现在移动web app越来越热门了,许多公司开始尝试使用angular.react.vue等MVVM框架来开发单页架构的web app.但在开发web app时,如果希望页面的导航体验也接近原生应用,那一般都会遇到这两个问题: 识别前进后退行为 后退时恢复之前的页面 笔者开发了一个基于vue与vue-router的导航库vue-navigation,来帮助开发者来解决这些问题,下面是问题的解决思路. 识别前进后退 先说第一个问题.和原生app不一样,浏览器中主要有这几个限制: 没有提供前进后退的
-
详解基于Vue cli生成的Vue项目的webpack4升级
前面的话 本文将详细介绍从webpack3到webpack4的升级过程 概述 相比于webpack3,webpack4可以零配置运行,打包速度比之前提高了90%,可以直接到ES6的代码进行无用代码剔除,新增的optimization使用简单 在未来,CSS.HTMl和文件都会成为原生模块 [0配置] webpack4 设置了默认值,以便无配置启动项目 entry 默认值是 ./src/ output.path 默认值是 ./dist mode 默认值是 production [模块类型] web
-
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
wc-messagebox 基于 vue 2.0 开发的插件 包含 Alert, Confirm, Toast, Prompt 仿照 iOS 原生UI(样式来源: MUI) 一些想法 刚开始的时候想要用现成的弹窗组件来着, 但是查找一圈没有发现比较合适项目的, 所以才自己开发了一个, 包含 Alert, Comfirm, Toast, Prompt 四种, 并且可以单个引入. Vue 的组件开发实际上比较简单, 有兴趣的可以看下源码实现, 步骤很清晰. 关于样式的问题, 是直接从 MUI(魅族开
-
详解基于Vue+Koa的pm2配置
目前使用的技术栈是:前端Vue.后端Koa.数据库Mongodb. 然而每当起服务的时候,都要 npm start . node ./server/app.js ,还要同时保持这两个窗口一直是开着的,很是麻烦. 而且因为我使用的是koa,也没有使用狼叔写的koa脚手架.是自己基于廖雪峰老师的 Koa框架 改的一个小型mvc.导致没有热更新. 为了简化这种没必要的操作及增加热更新,开始想怎么进行优化.于是选择了 pm2 配置pm2 先安装pm2: npm i pm2 . npm i pm2 -g
-
详解基于Vue，Nginx的前后端不分离部署教程
有小伙伴私信问我vue项目是如何进行前后端不分离打包发布的,那我岂能坐视不管,如此宠粉的我肯定是要给发一篇教程的,话不多说,开始操作 前端假如我们要发布我们的Vue项目,假设我们前端用的是history路由(要发就发个全套的),并且在后端带有一个二级目录,以便于可以在服务器上部署N个项目,在这里后台服务器的话,我用Nginx服务器来给大家模拟,接下来就面对疾风吧: 一.在这里我前端vue项目使用vue cli脚手架进行搭建的,后台使用Nginx,首先是前端配置: 1.前端配置,在这里假如后端访问
-
详解基于Vue的支持数据双向绑定的select组件
今天用Vue做一个小项目时需要用到多个select筛选功能,但是原生的太丑,如果直接写在当前页多个select处理起来又太繁琐,第三方ui又太大,所以就自己写了一个,并上传了GitHub仓库,仓库地址:https://github.com/tuohuang/vue-select 使用方法: 引入组件: import VueSelect from '../components/VueSelect' 注册组件 export default { components: { VueSelect } }
-
详解基于node的前端项目编译时内存溢出问题
前段时间公司有个基于vue的项目在运行npm run build的时候会报内存溢出,今天在某个技术流交群也有位小伙伴基于angular的项目也出现了这个问题,所以查了一些相关的资料总结了一下,下面会详细说明前端三大框架编译时遇到这个问题具体怎么解决.首先看我模拟出的报错内容 具体截图如下 里面有句关键的话,CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory JavaScript堆内存不足,这里说的 JavaS