demo链接
1、样式统一
为了达到共用一套样式，采用px2rem-loader和px2rpx-loader进行代码的打包，细节如下：

  • 由于UI设计图是在蓝湖上标注，宽度750，选择像素 PX
  • 样式中直接写px，在小程序端会转化成rpx，在H5端会转化成rem

2、参数配置
在px2rem-loader中配置如下

1
2
3
 
options: {
  remUnit: 75
}

在px2rpx-loader中配置如下

大专栏  mpvue框架的小程序和H5同时开发gutter"> 
1
2
3
4
 
options: {
  baseDpr: 1,
    rpxUnit: 1
}

3、注意事项
由于在px2rem-loader中，所有px均转化成rem，故在使用1px时会将1转化成一个很小的rem小数，可能会造成样式失效，故可以使用 /* no */ ，表示不进行转化

1
 
border: 1px solid #ca150f; /* no */

mpvue框架的小程序和H5同时开发的更多相关文章

  1. 基于 mpvue 框架的小程序选择控件，支持单列，多列，联动

    最近在学着写mpvue小程序,在做选择控件时候遇到了点问题,按照微信小程序方法picker,很不方便! 在网上搜到一个很好用的组件下面给大家分享: 组件说明文档链接:https://go.ctolib ...

  2. mpvue体验微信小程序开发

    微信小程序 https://developers.weixin.qq.com/miniprogram/introduction/index.html?t=18082114 微信小程序是一种全新的连接用 ...

  3. Taro 多端开发的正确姿势：打造三端统一的网易严选（小程序、H5、React Native）

    笔者所在的趣店 FED 早在去年 10 月份就已全面使用 Taro 框架开发小程序(当时版本为 1.1.0-beta.4),至今也上线了 2 个微信小程序.2 个支付宝小程序. 之所以选用 Taro, ...

  4. 用 React 编写的基于Taro + Dva构建的适配不同端（微信小程序、H5、React-Native 等）的时装衣橱

    前言 Taro 是一套遵循 React 语法规范的 多端开发 解决方案.现如今市面上端的形态多种多样,Web.React-Native.微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表 ...

  5. 从0到1构建适配不同端（微信小程序、H5、React-Native 等）的taro + dva应用

    从0到1构建适配不同端(微信小程序.H5.React-Native 等)的taro + dva应用 写在前面 Taro 是一套遵循 React 语法规范的 多端开发 解决方案.现如今市面上端的形态多种 ...

  6. 承接微信小程序外包 H5外包就找北京动点软件开发团队

    承接小程序外包 微信小程序外包 H5外包 就找北京动点软件 长年承接微信小程序.微信公众号开发 全职的H5开发团队,开发过几十款微信小程序公众号案例 欢迎来电咨询,索取案例! QQ:372900288 ...

  7. 承接小程序外包 微信小程序外包 H5外包 就找北京动点软件

    承接小程序外包 微信小程序外包 H5外包 就找北京动点软件 长年承接微信小程序.微信公众号开发 全职的H5开发团队,开发过几十款微信小程序公众号案例 欢迎来电咨询 QQ:372900288 微信:li ...

  8. 小程序和H5互调

    小程序跳H5页面 https://blog.csdn.net/mytljp/article/details/81030687(copy) H5页面跳小程序 https://blog.csdn.net/ ...

  9. 小程序与h5的相互跳转

    1, 小程序跳h5 <web-view src="https://zgl.seamo.cn/zglh5/kjzjlist1.html"></web-view> ...

随机推荐

  1. 可塑性|Exosomes

    五流解释 肿瘤发源于不同组织如果不从各种组织出发,则不能有正确的解决方法. Hallmarks of cancer LncRNAs操作流 Exosomes ,它的基本故事是平衡流,但是具体内涵是操作流 ...

  2. css块级元素

    <CSS权威指南>中文字显示:任何不是块级元素的可见元素都是内联元素.其表现的特性是“行布局”形式,这里的“行布局”的意思就是说其表现形式始终以行进行显示.比如,我们设定一个内联元素bor ...

  3. header() 被用来发送自定义的 HTTP 报文

    header() 被用来发送自定义的 HTTP 报文.关于HTTP报文的更多信息请参考» HTTP/1.1 specification. 请注意一点header()必须在任何实际输出之前调用,不管是普 ...

  4. java学习——内部类（二）

    使用内部类 内部类一共有三种使用方法: 1.在外部类中使用内部类 在外部类中使用内部类,与平常使用内部类没有区别,可以直接通过内部类的类名来定义变量,通过new调用内部类的构造方法来创建实例. 唯一的 ...

  5. JS—DOM操作

    节点分为三类: 1.元素节点:标签<div></div> 2.文本节点:标签内的纯文本. 3.属性节点:标签内的属性,id或class 查找元素: getElementById ...

  6. 关于本人:-D（必读）

    关于本人 本人目前从事iOS开发,但心中也有一个全栈的梦想,希望与大家共勉! 关于博客内容 自己会不时分享一些iOS方面的技术点.总结的一些经验及工具类.还有学习其他语言过程中的笔记.技术.总结及心得 ...

  7. 13.docker 网络 docker NameSpace (networkNamespace)

    一. 案例 1.创建一个 container docker run -d --name test1 busybox /bin/sh -c "while true; do sleep 3600 ...

  8. JS 判断移动端与PC端

    js判断移动端与pc端   这里介绍下使用device.js插件来判断移动端设备 地址:https://github.com/matthewhudson/device.js 示例: 1 2 3 4 5 ...

  9. requset请求处理与BeanUtils封装

    HTTP: 概念:Hyper Text Transfer Protocol 超文本传输协议 传输协议:定义了,客户端和服务器端通信时,发送数据的格式 特点: 基于TCP/IP的高级协议 默认端口号:8 ...

  10. zabbix自定义添加主机

    1.安装zabbix-agent [root@web01 ~]# rpm -ivh https://mirrors.tuna.tsinghua.edu.cn/zabbix/zabbix/3.4/rhe ...