![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
#author("2022-12-17T10:21:41+08:00","default:Admin","Admin") #author("2022-12-17T10:38:40+08:00","default:Admin","Admin") [[uni-app]] &color(red){※前提条件：vue3 的uniapp开发}; #contents #codeprettify{{ XXX }} * em [#e10ae594] 相对长度单位。 - em的值并不是固定的 - em会继承父级元素的字体大小 相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 &color(red){注意};：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。 所以我们在写CSS的时候，需要注意： + body选择器中声明Font-size=62.5%； + 将你的原来的px数值除以10，然后换上em作为单位； + 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。 也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。 * rem(root em) [#g8de6c51] 默认根字体大小为 屏幕宽度/20（微信小程序、头条小程序、App、H5） 使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。 这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。 * vh(viewpoint height) [#vc443de0] 视窗高度，1vh等于视窗高度的1% * 视口单位（ Viewport units ) [#zc66a47b] * vh(viewpoint height) [#b91ae8da] ** vh(viewpoint weight) [#vc443de0] 视窗宽度，1vh等于视窗宽度的1% ** wh(viewpoint height) [#b91ae8da] 视窗高度，1vh等于视窗高度的1% ** vmin [#k6bd77c4] 选取 vw 和 vh 中最小的那个 ** vmax [#p8eb20c1] 选取 vw 和 vh 中最大的那个 * px(Pixel) [#odf158af] 屏幕像素 * rpx [#n9892006] 响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。 App端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px，不支持 rpx。 微信小程序设计了 rpx 解决这个问题，uni-app 在 App 端、H5 端都支持了 rpx。 rpx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度 750rpx。 开发者可以通过设计稿基准宽度计算页面元素 rpx 值，设计稿 1px 与框架样式 1rpx 转换公式如下： 设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx 换言之，页面元素宽度在 uni-app 中的宽度计算公式： 750 * 元素在设计稿中的宽度 / 设计稿基准宽度 举例说明： - 若设计稿宽度为 750px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 750，结果为：100rpx。 - 若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 640，结果为：117rpx。 - 若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在 uni-app 里面的宽度应该设为：750 * 200 / 375，结果为：400rpx。 #hr(); Comment： #comment_kcaptcha
