设计稿750rem,设计稿750px

rem与px换算

1、那么12px=0.75rem，10px=0.625rem。

2、rem等于html根元素设定的font-size的px值，假如我们在css里面设定下面的css。

3、vw px rem之间的换算 我们假设psd的设计稿是以1920px为标准的。

4、我一般会设置1rem为1/10屏幕宽度。代码如下 2做页面时 我一般会将设计稿缩小至宽度为320px（切图标时，还是按照原图来切）。在上一步中，1rem为1/10屏幕宽度。因此，px与rem的转化为1px=1/320*10rem。

手机端vue+vant+rem项目适配750px设计稿的配置

vant是按照375px设计稿开发，为单位的，如果配置根字体大小为35，设计稿就无法还原，配置75，vant组件就变小了。

在postcss.config.js中配置插件，在Vue项目的根目录下找到postcss.config.js文件，添加postcss-px-to-viewport插件的配置。

这里以上图为例，因为每个手机屏幕的横向尺寸是固定的。如果使用px，小屏幕的位置可能会失控，导致内容换行混乱。因此，使用rem/rpx单元布局。

在main.js中导入lib-fixible.如果未使用vue的伙伴可以直接在前端中直接使用阿里的CDN，如下：注：此处是postcss-px2rem而不是px2rem-loader，网上很多文章都引用是后者，会导致在配置时候无法成功配置。

我个人在项目中采用的是更复杂的实现方式，可以实现适配DPR大于2的手机屏，并接近100%的还源UI设计稿。具体的适配技术各家大同小异，这里不再细说，我只给出我自己的适配方案。

这次给大家带来怎样进行mpvue小程序项目搭建，进行mpvue小程序项目搭建的注意事项有哪些，下面就是实战案例，一起来看一下。

rem的作用与运用,小程序为什么用rpx为单位

1、开发过小程序的人都知道，小程序的单位是rpx，这是为什么？有什么作用呢，其实它源于rem布局，先来了解下rem的优势与工作原理。

2、rpx是微信小程序中特有的尺寸单位，也是把页面按比例分割达到自适应的效果。规定屏幕宽为750rpx，就是把屏幕宽度分成750部分，根据屏幕宽度动态调整。

3、rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

4、这里以上图为例，因为每一台手机的屏幕横向的大小是固定的，如果使用px则可能在小屏幕出现位置不可控，导致内容换行错乱等问题。故使用rem/rpx单位布局。

微信小程序设计稿的尺寸

1、微信小程序的设计只需要以iPhone6屏幕尺寸750x1334px为视觉稿进行设计即可，因为微信小程序以rpx为css尺寸单位，rpx可以根据屏幕宽度进行自适应，规定屏幕宽度为750rpx，因此在iPhone6设计稿上1px=1rpx，在尺寸换算上就会很简单。

2、这里了解就行，设计稿尺寸375px或750px都没问题。

3、规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。

4、小程序里的尺寸单位叫 rpx，可以根据屏幕宽度进行自适应。在750*1334的设计稿里，1px = 1rpx。如果你心疼你的开发小哥哥，让他少掉点头发，设计稿用 750*1334 的尺寸。

5、以一场专题活动为例，说明设计的图片内容和常规尺寸要求如下：专题页头图（即首页焦点图/轮播图）：尺寸视行业特性而定，如百货类、生鲜类690*230，如服装类530*650。

6、以通用的144*144px大小的小程序logo尺寸为例，logo主体图形的大小建议是144*72%，主体图形需要确保在这个圆形范围内，若图形比较特殊，可以根据视觉感知做大小增减，确保视觉平衡合适即可。

标签：设计750px750rem