切图网提供专业的微信小程序切图服务，有关于 微信小程序切图需要几倍图，下面和大家讲讲。

小程序切图和手机网站切图一样都是基于2倍图的，另外附带其他你需要知道的一些的小程序切图的知识。

1，小程序切图的宽度以750px为准（可以理解为是以iphone5、6的尺寸作为标准尺寸）

2，小程序切图在做设计的时候基本以750px为准，在做小程序切图的时候，基本按1:1 来做即可

3，小程序切图需要用到单位 rpx

我们开发的项目一般都会有可视化界面，如下图：

我们需要考虑在各个设备上能够正常显示，我们就看看 uni-app 创建的项目，他的响应式是如何处理的？

一、uni-app 是如何实现响应式的？

uni-app 的尺寸单位：

• px：屏幕像素单位。

就目前看来，web的屏幕适配是贯穿整个前端行业的，如常见的PC端，移动端，响应式，小程序等。

PC端

微信小程序 的官方文档

https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/#小程序简介

切图网习惯于在做小程序之前先做成html5+vuejs的形式，因为html5切图是我们比较熟悉的方式，而且有专业的工具 以及浏览器调试也会更加的方便 灵活，效率高，而且html5的方式可以方便预览看效果，方便调整，当html5页面做好确认没问题以后 再转成小程序或者官方出品wepy的方式，这个时候就需要找到html5和小程序之间的微妙不同，需要做以下调整，亲测可用。

一、小程序框架介绍（了解）

小程序框架包含小程序的配置、框架接口、场景值、WXML 和 WXS 等

二、小程序的配置（精通）

小程序的配置分为全局配置、页面配置以及sitemap 配置

1.使用场景：

在公司做的小程序，主要是提供线上购物使用。在购物车列表上，有这样一个场景，即当客人把衣服加购后一段时间，该衣服可能库存紧缺或是下架了，这时，我们需要在购物车项中，告诉客人该衣服已经下架，而不是让他下单结算时，才发现缺货。

因此，我需要做一个功能 ，在购物车上显示缺货样式。比如象如下界面：

#头条创作挑战赛#

本文同步本人掘金平台的文章：https://juejin.cn/post/6986465633114259469

uni-app是啥？

Uni-app 是一个使用Vue.js 开发跨平台应用的前端框架。

对技术人员来说而且：不用学那么多的平台开发技术、研究那么多的前端框架，学会基于vue的uni-app就够了。

对公司而言：更低成本，覆盖更多用户，uni-app 是高效利器。

这个系列的上一篇教程，教大家写了一个最简单的 Hello world 微信小程序。

但是，那只是一个裸页面，并不好看。今天接着往下讲，如何为这个页面添加样式，使它看上去更美观，教大家写出实际可以使用的页面。

所有示例的完整代码，都可以从 GitHub 的代码仓库^[1]下载。

一、总体样式

微信小程序允许在顶层放置一个app.wxss文件，里面采用 CSS 语法设置页面样式。这个文件的设置，对所有页面都有效。