首页 > 其他分享 >css语法

css语法

时间：2023-08-27 20:57:57浏览次数：44  
标签：样式 rpx app 语法 宽度 uni css 页面

CSS 支持

#页面样式与布局

uni-app 的 css 与 web 的 css 基本一致。本文没有讲解 css 的用法。在你了解 web 的 css 的基础之上，本文讲述一些样式相关的注意事项。

uni-app 有 vue 页面和 nvue 页面。vue 页面是 webview 渲染的、app 端的 nvue 页面是原生渲染的。在 nvue 页面里样式比 web 会限制更多，另见nvue 样式专项文档

本文重点介绍 vue 页面的样式注意事项。

#尺寸单位

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

  • px 即屏幕像素
  • rpx 即响应式 px，一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准，750rpx 恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大，但在 App（vue2 不含 nvue） 端和 H5（vue2） 端屏幕宽度达到 960px 时，默认将按照 375px 的屏幕宽度进行计算，具体配置参考：rpx 计算配置 。

vue 页面支持下面这些普通 H5 单位，但在 nvue 里不支持：

  • rem 根字体大小可以通过 page-meta 配置抖音小程序和飞书小程序：屏幕宽度/20、百度小程序：16px、支付宝小程序：50px
  • vh viewpoint height，视窗高度，1vh 等于视窗高度的 1%
  • vw viewpoint width，视窗宽度，1vw 等于视窗宽度的 1%

nvue 还不支持百分比单位。

App 端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px。注意此时不支持 rpx

nvue 中，uni-app 模式（nvue 不同编译模式介绍）可以使用 px 、rpx，表现与 vue 中基本一致，另外启用 dynamicRpx 后可以适配屏幕大小动态变化。weex 模式目前遵循 weex 的单位，它的单位比较特殊：

  • px:，以 750 宽的屏幕为基准动态计算的长度单位，与 vue 页面中的 rpx 理念相同。（一定要注意 weex 模式的 px，和 vue 里的 px 逻辑不一样。）
  • wx：与设备屏幕宽度无关的长度单位，与 vue 页面中的 px 理念相同

下面对 rpx 详细说明：

设计师在提供设计图时，一般只提供一个分辨率的图。

严格按设计图标注的 px 做开发，在不同宽度的手机上界面很容易变形。

而且主要是宽度变形。高度一般因为有滚动条，不容易出问题。由此，引发了较强的动态宽度单位需求。

微信小程序设计了 rpx 解决这个问题。uni-app 在 App 端、H5 端都支持了 rpx，并且可以配置不同屏幕宽度的计算方式，具体参考：rpx 计算配置。

rpx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度 750rpx。

开发者可以通过设计稿基准宽度计算页面元素 rpx 值，设计稿 1px 与框架样式 1rpx 转换公式如下：

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

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

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

举例说明：

  1. 若设计稿宽度为 750px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 750，结果为：100rpx。
  2. 若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 640，结果为：117rpx。
  3. 若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在 uni-app 里面的宽度应该设为：750 * 200 / 375，结果为：400rpx。

Tips

  • 注意 rpx 是和宽度相关的单位，屏幕越宽，该值实际像素越大。如不想根据屏幕宽度缩放，则应该使用 px 单位。
  • 如果开发者在字体或高度中也使用了 rpx ，那么需注意这样的写法意味着随着屏幕变宽，字体会变大、高度会变大。如果你需要固定高度，则应该使用 px 。
  • rpx 不支持动态横竖屏切换计算，使用 rpx 建议锁定屏幕方向
  • 设计师可以用 iPhone6 作为视觉稿的标准。
  • 如果设计稿不是 750px，HBuilderX 提供了自动换算的工具，详见：HBuilderX中自动转换px为upx。
  • App 端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px，不支持 rpx。
  • 早期 uni-app 提供了 upx ，目前已经推荐统一改为 rpx 了，详见

#样式导入

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

示例代码：

<style>
    @import "../../common/uni.css";

    .uni-card {
        box-shadow: none;
    }
</style>
复制代码

#内联样式

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

  • style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
<view :style="{color:color}" />
复制代码
  • class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。
<view class="normal_view" />
复制代码

#选择器

目前支持的选择器有：

选择器 样例 样例描述
.class .intro 选择所有拥有 class="intro" 的组件
#id #firstname 选择拥有 id="firstname" 的组件
element view 选择所有 view 组件
element, element view, checkbox 选择所有文档的 view 组件和所有的 checkbox 组件
::after view::after 在 view 组件后边插入内容，仅 vue 页面生效
::before view::before 在 view 组件前边插入内容，仅 vue 页面生效

注意：

  • 在 uni-app 中不能使用 * 选择器。

  • 微信小程序自定义组件中仅支持 class 选择器

  • page 相当于 body 节点，例如：

    <!-- 设置页面背景颜色，使用 scoped 会导致失效 -- > 
  page {
	background-color: #ccc;
}
    复制代码

#全局样式与局部样式

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

注意：

  • App.vue 中通过 @import 语句可以导入外联样式，一样作用于每一个页面。
  • nvue 页面暂不支持全局样式

#CSS 变量

uni-app 提供内置 CSS 变量

CSS 变量 描述 App 小程序 H5
--status-bar-height 系统状态栏高度 系统状态栏高度、nvue 注意见下 25px 0
--window-top 内容区域距离顶部的距离 0 0 NavigationBar 的高度
--window-bottom 内容区域距离底部的距离 0 0 TabBar 的高度

注意：

  • var(--status-bar-height) 此变量在微信小程序环境为固定 25px，在 App 里为手机实际状态栏高度。
  • 当设置 "navigationStyle":"custom" 取消原生导航栏后，由于窗体为沉浸式，占据了状态栏位置。此时可以使用一个高度为 var(--status-bar-height) 的 view 放在页面顶部，避免页面内容出现在状态栏。
  • 由于在 H5 端，不存在原生导航栏和 tabbar，也是前端 div 模拟。如果设置了一个固定位置的居底 view，在小程序和 App 端是在 tabbar 上方，但在 H5 端会与 tabbar 重叠。此时可使用--window-bottom，不管在哪个端，都是固定在 tabbar 上方。
  • 目前 nvue 在 App 端，还不支持 --status-bar-height变量，替代方案是在页面 onl oad 时通过 uni.getSystemInfoSync().statusBarHeight 获取状态栏高度，然后通过 style 绑定方式给占位 view 设定高度。下方提供了示例代码

代码块

快速书写 css 变量的方法是：在 css 中敲 hei，在候选助手中即可看到 3 个 css 变量。（HBuilderX 1.9.6 以上支持）

示例 1 - 普通页面使用 css 变量：

<template>
	<!-- HBuilderX 2.6.3+ 新增 page-meta, 详情：https://uniapp.dcloud.io/component/page-meta -->
	<page-meta>
		<navigation-bar />
	</page-meta>
	<view>
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view>状态栏下的文字</view>
	</view>
</template>
<style>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
</style>
复制代码 
<template>
	<view>
		<view class="toTop">
			<!-- 这里可以放一个向上箭头，它距离底部tabbar上浮10px-->
		</view>
	</view>
</template>
<style>
	.toTop {
		bottom: calc(var(--window-bottom) + 10px);
	}
</style>
复制代码

示例 2 - nvue 页面获取状态栏高度

<template>
	<view class="content">
		<view :style="{ height: iStatusBarHeight + 'px'}"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				iStatusBarHeight: 0,
			};
		},
		onLoad() {
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		},
	};
</script>
复制代码

#固定值

uni-app 中以下组件的高度是固定的，不可修改：

组件 描述 App H5
NavigationBar 导航栏 44px 44px
TabBar 底部选项卡 HBuilderX 2.3.4 之前为 56px，2.3.4 起和 H5 调为一致，统一为 50px。（但可以自主更改高度） 50px

各小程序平台，包括同小程序平台的 iOS 和 Android 的高度也不一样。

#Flex 布局

为支持跨平台，框架建议使用 Flex 布局，关于 Flex 布局可以参考外部文档A Complete Guide to Flexbox、阮一峰的 flex 教程等。

#背景图片

uni-app 支持使用在 css 里设置背景图片，使用方式与普通 web 项目大体相同，但需要注意以下几点：

  • 支持 base64 格式图片。
  • 支持网络路径图片。
  • 小程序不支持在 css 中使用本地文件，包括本地的背景图和字体文件。需以 base64 方式方可使用。
  • 使用本地路径背景图片需注意：
    1. 为方便开发者，在背景图片小于 40kb 时，uni-app 编译到不支持本地背景图的平台时，会自动将其转化为 base64 格式；
    2. 图片大于等于 40kb，会有性能问题，不建议使用太大的背景图，如开发者必须使用，则需自己将其转换为 base64 格式使用，或将其挪到服务器上，从网络地址引用。
    3. 本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径。
    .test2 {
	background-image: url('~@/static/logo.png');
}
    复制代码

注意

  • 微信小程序不支持相对路径（真机不支持，开发工具支持）

#字体图标

uni-app 支持使用字体图标，使用方式与普通 web 项目相同，需要注意以下几点：

  • 支持 base64 格式字体图标。
  • 支持网络路径字体图标。
  • 小程序不支持在 css 中使用本地文件，包括本地的背景图和字体文件。需以 base64 方式方可使用。
  • 网络路径必须加协议头 https。
  • 从 http://www.iconfont.cn 上拷贝的代码，默认是没加协议头的。
  • 从 http://www.iconfont.cn 上下载的字体文件，都是同名字体（字体名都叫 iconfont，安装字体文件时可以看到），在 nvue 内使用时需要注意，此字体名重复可能会显示不正常，可以使用工具修改。
  • 使用本地路径图标字体需注意：
    1. 为方便开发者，在字体文件小于 40kb 时，uni-app 会自动将其转化为 base64 格式；
    2. 字体文件大于等于 40kb，仍转换为 base64 方式使用的话可能有性能问题，如开发者必须使用，则需自己将其转换为 base64 格式使用，或将其挪到服务器上，从网络地址引用；
    3. 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。
    @font-face {
	font-family: test1-icon;
	src: url('~@/static/iconfont.ttf');
}
    复制代码

nvue中不可直接使用 css 的方式引入字体文件，需要使用以下方式在 js 内引入。nvue 内不支持本地路径引入字体，请使用网络链接或者base64形式。src字段的url的括号内一定要使用单引号。

var domModule = weex.requireModule('dom');
domModule.addRule('fontFace', {
	fontFamily: 'fontFamilyName',
	src: "url('https://...')",
});
复制代码

示例：

<template>
	<view>
		<view>
			<text class="test">&#xe600;</text>
			<text class="test">&#xe687;</text>
			<text class="test">&#xe60b;</text>
		</view>
	</view>
</template>
<style>
	@font-face {
		font-family: 'iconfont';
		src: url('https://at.alicdn.com/t/font_865816_17gjspmmrkti.ttf') format('truetype');
	}
	.test {
		font-family: iconfont;
		margin-left: 20rpx;
	}
</style>

标签：样式,rpx,app,语法,宽度,uni,css,页面
From： https://www.cnblogs.com/full-stack-linux-new/p/17660803.html

相关文章

  • 数据库基本语法四 数据库查询（DQL）
    数据查询语言（DQL）是SQL语言中的一部分，主要用于查询数据库中的数据。DQL允许用户根据特定的条件来检索表中的数据，并且可以包含一些基本的操作和条件。语法结构：SELECT列名称1,列名称2FROM表名称;其中，SELECT指定要检索的列，FROM指定要查询的表，WHERE指定筛选条件。以下是一些......
  • HTML引入CSS的方式
    虽然很简单，但久了不用还是容易忘，暂且记一下：1、html引入css文件之直接在div中使用css样式制作div+css网页<divstyle="border:1pxredsolid;">html引入css文件</div>说明：html引入css文件的这种方法不建议使用，因为会让页面的标签很多，看起来很累赘，体现不了css的优势，当然如果......
  • CSS-02
    选择器选择器可以快速、方便的选择所需要使用的页面元素基本选择器基础选择分三种，分别是：标签选择器、类选择器、id选择器标签选择器标签选择器主要是根据标签的名字进行元素的选择语法：标签名{}例如：div{color:red;font-size:20px;}<divclass="div-cls">昨日头条：国家公祭日</div><d......
  • CSS技术详解
    1CSS特性介绍随着数据中心数据访问量的逐渐增大以及网络可靠性要求越来越高，单台交换机已经无法满足数据中心大数据量访问的要求。为了满足数据中心大数据量转发的需求和网络高可靠性需求，提出了交换机堆叠。CSS是ClusterSwitchSystem的简称，又被称为集***换机系统（简称为CSS或......
  • 列举出css所有的样式选择器
    以下是CSS中常见的各种样式选择器：1.元素选择器：通过HTML元素名称选择元素，如`p`、`div`等。2.类选择器（ClassSelector）：通过`class`属性选择一个或多个具有相同类名的元素，如`.example`。3.ID选择器（IDSelector）：通过`id`属性选择具有唯一标识符的元素，如`#uniqueID`。4.......
  • 记录--一个炫酷的css动画
    这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助最近有一个需求，要我实现一个动画效果，效果如下简单分析了一下效果，是一个3d的效果，首先是一个圆，接着是两段圆环，第三层是一堆小圆环，最里面是一些线上运动，有着渐变色的矩形。第一层的圆环很简单。第二层的圆环其实......
  • mysql 常用脚本语法
    mysql常用脚本语法创建表：CREATETABLEtest_db1.test_table1(idINTauto_incrementNOTNULL,my_namevarchar(100)NOTNULL,memovarchar(100)NULL,CONSTRAINTtest_table1_PKPRIMARYKEY(id))ENGINE=InnoDBDEFAULTCHARSET=utf8mb4COLLATE=ut......
  • 从 Python3.11 新增 SWAP 字节码到基础语法面试题
    点评：典型的送分考验基础的题目，在其他编程语言中可以使用异或运算的方式来实现交换两个变量的值。但是Python中有更为简单明了的Pythonic做法。条件：不允许使用中间变量@目录方法一使用异或（XOR）运算符方法二使用Python的解包特性(元组解包)来交换变量的值元组解包ROT_......
  • css粘性页脚，固定一个页脚
    css粘性页脚，固定一个页脚方案一：<divclass="wrapper"><headerclass="page-header">Thisistheheader</header><articleclass="page-body"><p>Mainpagecontenthere,addmoreifyouwanttose......
  • CSS-01
    CSS样式课程目标1.css引入方式（重点）2.css选择器（重点）3.css盒子模型（重点）4.css3常见效果（重点）级联样式表css概述层叠样式表其实就是对静态页面进行装饰，但是，特别要注意的点是：通常建议表现形式与页面内容分离（例如：人就是内容，穿着打扮就是表现形式）css引入方式行内样式行内样式（将样式直接写在......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99