uniapp换行符号_uni-app 页面样式与布局

  • Post author:
  • Post category:uniapp


重要说明请删除 app.vue 中的全局样式:

view{display:flex;}

在需要flex的时候使用flex即可。尺寸单位

uni-app框架目前仅支持长度单位 px 和 %。与传统 web 页面不同,px 是相对于基准宽度的单位,已经适配了移动端屏幕,其原理类似于 rem。

PS:uni-app 的基准宽度为 750px。

开发者只需按照设计稿确定框架样式中的 px 值即可。设计稿 1px 与框架样式 1px 转换公式如下:

设计稿 1px / 设计稿基准宽度 = 框架样式1px / 750px

换言之,页面元素宽度在uni-app中的宽度计算公式:

750px * 元素在设计稿中的宽度 / 设计稿基准宽度

举例说明:若设计稿宽度为 640px,元素 A 在设计稿上的宽度为 100px,那么元素 A 在uni-app里面的宽度应该设为:750 * 100 / 640,结果为:117px。

若设计稿宽度为 375px,元素 B 在设计稿上的宽度为 200px,那么元素 B 在uni-app里面的宽度应该设为:750 * 200 / 375,结果为:400px。

样式导入

使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。

示例代码:

@import “../../common/uni.css”;

.uni-card {

box-shadow: none;

}</



版权声明:本文为weixin_39641236原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。