uniapp - uniapp 中的样式使用

╰+哭是因爲堅強的太久メ 2021-07-26 02:42 946阅读 0赞

### uniapp 中的样式使用 ###

*  一. 尺寸单位
 *  二. 样式导入
 *  三. 内联样式
 *  四. 选择器
 *  五. 全局样式与局部样式

> 在 uni-app 中不能使用 `*` 选择器，`page` 相当于 `body` 节点。  
> 更多详细内容请查看 uniapp 官网： [https://uniapp.dcloud.io/frame?id=%e9%a1%b5%e9%9d%a2%e6%a0%b7%e5%bc%8f%e4%b8%8e%e5%b8%83%e5%b1%80][https_uniapp.dcloud.io_frame_id_e9_a1_b5_e9_9d_a2_e6_a0_b7_e5_bc_8f_e4_b8_8e_e5_b8_83_e5_b1_80]

# 一. 尺寸单位 #

`uni-app` 支持的通用 css 单位，包括 `px`、`rpx`。

*  `px` 即屏幕像素。
 *  `rpx` 即响应式 `px`，一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准，750 rpx 恰好为屏幕宽度。屏幕变宽，`rpx` 实际显示效果会等比放大。

# 二. 样式导入 #

使用 `@import` 语句可以导入外联样式表，`@import` 后跟需要导入的外联样式表的相对路径，用`;`表示语句结束。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center]

# 三. 内联样式 #

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

*  style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 1]
 *  class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 2]

# 四. 选择器 #

支持基本常用的选择器`class`、`id`、`element`等

# 五. 全局样式与局部样式 #

*  定义在 `App.vue` 中的样式为全局样式，作用于每一个页面。
 *  在 `pages` 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 `App.vue` 中相同的选择器。

[https_uniapp.dcloud.io_frame_id_e9_a1_b5_e9_9d_a2_e6_a0_b7_e5_bc_8f_e4_b8_8e_e5_b8_83_e5_b1_80]: https://uniapp.dcloud.io/frame?id=%E9%A1%B5%E9%9D%A2%E6%A0%B7%E5%BC%8F%E4%B8%8E%E5%B8%83%E5%B1%80
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/2012407b708b412f9684a4b06c2c51cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210725/346b463c279e491999462cd03f2447d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210725/07e4ce1e9b5b4267aaec8cbcc418bdf9.png