Uni-App - 页面样式与布局

简介: Uni-App - 页面样式与布局

重要说明

请删除 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后跟需要导入的外联样式表的相对路径,用;表示语句结束。

示例代码:

<style>
    @import "../../common/uni.css";
    .uni-card {
        box-shadow: none;
    }
</style>

内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度

class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上.,样式类名之间用空格分隔。

选择器

目前支持的选择器有:

.class .intro 选择所有拥有 class="intro" 的组件

#id #firstname 选择拥有 id="firstname" 的组件

element view 选择所有 view 组件

element, element view, checkbox 选择所有文档的 view 组件和所有的 checkbox 组件

::after view::after 在 view 组件后边插入内容,仅微信小程序和5+App生效

::before view::before 在 view 组件前边插入内容,仅微信小程序和5+App生效

全局样式与局部样式

定义在 App.vue 中的样式为全局样式,作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 App.vue 中相同的选择器。 注意: App.vue 中通过 @import 语句可以导入外联样式,一样作用于每一个页面。

Flex布局

为支持跨平台,框架建议使用Flex布局,关于Flex布局可以参考外部文档A Complete Guide to Flexbox等。

目录
相关文章
|
2月前
|
存储 移动开发 JavaScript
uni-app页面数据传参方式
uni-app页面数据传参方式
55 4
|
9月前
|
JavaScript
vue3在App.vue写的全局组件让指定页面不显示
vue3在App.vue写的全局组件让指定页面不显示
|
13天前
|
C++
深入理解 uni-app 页面生命周期(三):onHide vs onUnload
深入理解 uni-app 页面生命周期(三):onHide vs onUnload
|
1月前
uni-app 22发布朋友圈页面
uni-app 22发布朋友圈页面
17 0
uni-app 22发布朋友圈页面
|
1月前
|
前端开发
uni-app 4.14~4.23首页消息页面开发
uni-app 4.14~4.23首页消息页面开发
16 1
|
4月前
|
XML Java Android开发
Android Studio App开发之实现简单的启动引导页ViewPager(附源码 实现App的欢迎页面)
Android Studio App开发之实现简单的启动引导页ViewPager(附源码 实现App的欢迎页面)
83 1
|
4月前
|
Android开发
Android Studio APP开发入门之活动Activity中启停活动页面的讲解及实战(附源码,包括Activity的启动结束、生命周期、跳转等)
Android Studio APP开发入门之活动Activity中启停活动页面的讲解及实战(附源码,包括Activity的启动结束、生命周期、跳转等)
41 0
|
4月前
|
移动开发 小程序
微信小程序web-view嵌入uni-app H5页面,通过H5页面传参给小程序进行转发分享页面,并通过点击转发出来的卡片,定向打开对应H5路径
微信小程序web-view嵌入uni-app H5页面,通过H5页面传参给小程序进行转发分享页面,并通过点击转发出来的卡片,定向打开对应H5路径
|
5月前
|
JSON 前端开发 API
uni-app学习笔记-uni.request请求和渲染页面(九)
uni-app学习笔记-uni.request请求和渲染页面(九)
38 1
|
5月前
|
移动开发 小程序 Android开发
uniapp使用webview将页面转换成图片支持h5、app、小程序
uniapp使用webview将页面转换成图片支持h5、app、小程序