Taro项目中设置了设计稿尺寸
const config = {
projectName: ‘yida’,
date: ‘2021-12-27’,
//设计稿尺寸是375
designWidth: 375,
deviceRatio: {
640: 2.34 / 2,
750: 1,
828: 1.81 / 2,
375: 2 / 1
},
sourceRoot: ‘src’,
outputRoot: ‘dist’,
plugins: [],
defineConstants: {
},
copy: {
patterns: [
],
options: {
}
},
framework: ‘react’,
mini: {
postcss: {
“postcss-px-scale”: {
“enable”: true,
“config”: {
“scale”: 0.5, // 缩放为 1/2
“units”: “rpx”,
“includes”: [“taro-ui”]
}
},
url: {
enable: true,
config: {
limit: 1024 // 设定转换尺寸上限
}
},
cssModules: {
enable: false, // 默认为 false,如需使用 css modules 功能,则设为 true
config: {
namingPattern: ‘module’, // 转换模式,取值为 global/module
generateScopedName: ‘[name][local][hash:base64:5]’
}
}
}
},
h5: {
publicPath: ‘/’,
staticDirectory: ‘static’,
postcss: {
autoprefixer: {
enable: true,
config: {
“scale”: 0.5, // 缩放为 1/2
“units”: “rpx”,
“includes”: [“taro-ui”]
}
},
cssModules: {
enable: false, // 默认为 false,如需使用 css modules 功能,则设为 true
config: {
namingPattern: ‘module’, // 转换模式,取值为 global/module
generateScopedName: '[name][local]__[hash:base64:5]’
}
}
}
}
}
module.exports = function (merge) {
if (process.env.NODE_ENV === ‘development’) {
return merge({}, config, require(’./dev’))
}
return merge({}, config, require(’./prod’))
}
//如果设置完还会出现taro组件放大情况下主要下载
npm install postcss-px-scale (px值放大/缩小n倍)
注意:该插件依赖postcss.process(css, { from: file }) 或者使用postcss-loader自动注入file信息,请把该插件放置在px2rem类型的插件前执行
Taro项目中设置了设计稿尺寸相关推荐
- 移动端web设计尺寸_移动端H5页面的设计稿尺寸大小规范
当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 那么多手机屏幕尺寸,设计稿 ...
- 移动端h5页面的设计稿尺寸
当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 延伸阅读: 2015年度最 ...
- 在vue项目中设置网站图标
怎么在我们的Vue项目中设置自定义的网站图标: 首先我们需要先制作个ico图标,大小为32*32的,放到static文件夹下,附制作网站,我们把制作好的ico图片改名为:favicon.ico(注:必 ...
- 在uni-app项目中设置背景颜色/微信小程序设置 backgroundColor无效的问题
在DCloud的官方提供的文档中写的方法是这样,如下 但是实际设置了之后,没有作用,然后搜了一下说是因为 backgroundColor 指的窗体背景颜色,而不是页面的背景颜色,即窗体下拉刷新或上拉加 ...
- 如何在vue项目中设置首页
如何在vue项目中设置首页 1.首先创建一个vue为后缀名的文件,最好在新建的文件夹下面创建,如下图所示: 说明:一般我们的主要页面代码都是写在vue 项目中的这个src文件夹下,项目中所会引用到的组 ...
- vue项目中设置网站图标
怎么在vue项目中设置网站图标: 1,先下载个icon图标,favicon.ico,大小为32*32的,放到static文件夹下: static文件是vue项目中用来存放静态资源的文件夹,放到这里的文 ...
- 教你如何在iOS项目中设置各种字体
原文地址为: 教你如何在iOS项目中设置各种字体 在iOS开发中设置字体的方法有很多种,下面为大家介绍比较常用的三种方法 1.使用系统默认提供的字体 系统默认提供的字体主要是指UIFont中提供的字体 ...
- 移动端web设计尺寸_移动端H5页面的设计稿尺寸(上)
由于HTML5和微信内置浏览器的火爆,移动端H5网页越发流行.在设计制作移动端网页的时候,你是否疑惑,这种网站设计稿应该做成的多少屏宽,是否应该跟手机的分辨率一致,还是应该按照iPhone的分辨率来设 ...
- React Native不同设备分辨率适配和设计稿尺寸单位px的适配
React Native中使用的尺寸单位是dp(一种基于屏幕密度的抽象单位.在每英寸160点的显示器上,1dp = 1px),而设计师使用的是px, 这两种尺寸如何换算呢? 官方提供了PixelRat ...
- 移动端H5页面的设计稿尺寸大小规范
请注意:(以下所有讨论内容和规范均将viewport设定为content="width=device-width"的情况下) 也就是我们的H5页面前端代码里面必须包含 <me ...
最新文章
- 人工智能灵魂注入,燃烧你的卡路里——2018,你AI了吗!?
- 学python需要英语基础吗-英语基础一般,如何才能学习C语言编程和Python
- JAVA WEB知识总结之一--responserequest
- [react-router] React-Router 4中<Router>组件有几种类型?
- 话说Python:非主流编程语言
- 苹果cms v10模板 蓝色简洁大气手机端模板
- Thrift初用小结
- 测试人必备实用技能:写出一份好的Bug报告
- w大师pdf转html转换器,W大师PDF转WORD
- PHP+shell实现多线程的方法
- bash脚本之条件判断
- mybatis批量操作
- 强化学习(reinforcement learning)教程(后面是翻译)
- java 从后往前截取_java 字符串截取的实例详解
- c语言用串口读温度值,温度传感器与串口
- mac brew 启动服务时报错“Bootstrap failed: 5: Input/output error”
- U3D学习项目一:2D横版小狐狸闯关游戏(代码部分二)
- linux gtx驱动程序,NVIDIA 430.09 Linux 驱动发布:支持 GTX 1650
- depth是什么意思啊(depth是什么意思啊英语)
- 在SEO优化中如何有效快速提升网站权重与排名的方法