基于Vue/React项目的移动端适配方案

时间: 2019-11-06阅读: 63标签: 适配

本文的目标是通过下文介绍的适配方案,使用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)元素内部样式:。

文章同步发布: https://www.geek-share.com/detail/2784034817.html


吐血推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入...

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入...

3.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

4.休闲娱乐: 网页游戏入口... H5游戏入口... 绝地求生首次打折降价了点此访问

链接: http://www.fly63.com/article/detial/6288

React Native之图片/宽高/字体平台适配

为了提高代码的兼容性,我们有时需要判断当前系统的平台,然后做一些适配。比如,我们在使用 StatusBar 做导航栏的时候,在 iOS 平台下根视图的位置默认情况下是占据状态栏的位置的,我们通常希望状态栏下面能显示一个导航栏

移动端兼容适配的分析

网站适配的终端可以用js或媒体查询的方式获取,分配对应的样式。布局上采用相对单位,百分比和flex的弹性方式。对移动端的特殊性进行适配,如1px问题,默认样式等。

em与rem之间的区别以及移动设备中的rem适配方案

em与rem之间的区别:共同点:它们都是像素单位,它们都是相对单位。不同点:em大小是基于父元素的字体大小,rem大小是基于根元素(html)的字体的大小

IphoneX底部适配

判断是否是IPhoneX手机;增加fix-iphonex-bottom样式,如果想更改IPhoneX底部34像素的背景颜色怎么办呢?增加iphone-footer-bg样式

移动端前端适配方案总汇

关于移动端适配的技术方案主要有以下四种:(1)通过媒体查询的方式即CSS3的meida queries(2)以天猫首页为代表的 flex 弹性布局(3)以淘宝首页为代表的 rem+viewport缩放(4)rem 方式

Web 端屏幕适配方案

像素 :像素是屏幕显示最小的单位。设备像素 :设备像素又称物理像素(physical pixel),设备能控制显示的最小单位,我们可以把这些像素看作成显示器上一个个的点。 iPhone5 的物理像素是 640 X 1136

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全