长度单位
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
[[uni-app]]
&color(red){※前提条件：vue3 的uniapp开发};
#contents
#codeprettify{{
XXX
}}
* em [#e10ae594]
相对长度单位。
- em的值并不是固定的
- em会继承父级元素的字体大小
相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺...
&color(red){注意};：任意浏览器的默认字体高都是16px。所有...
所以我们在写CSS的时候，需要注意：
+ body选择器中声明Font-size=62.5%；
+ 将你的原来的px数值除以10，然后换上em作为单位；
+ 重新计算那些被放大的字体的em数值。避免字体大小的重复声...
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明...
* rem(root em) [#g8de6c51]
默认根字体大小为 屏幕宽度/20（微信小程序、头条小程序、App...
使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是...
这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可...
* 视口单位（ Viewport units ) [#zc66a47b]
** 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宽的屏幕...
App端，在 pages.json 里的 titleNView 或页面里写的 plus ap...
微信小程序设计了 rpx 解决这个问题，uni-app 在 App 端、H5 ...
rpx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。u...
开发者可以通过设计稿基准宽度计算页面元素 rpx 值，设计稿 1...
设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx
换言之，页面元素宽度在 uni-app 中的宽度计算公式：
750 * 元素在设计稿中的宽度 / 设计稿基准宽度
举例说明：
- 若设计稿宽度为 750px，元素 A 在设计稿上的宽度为 100px，...
- 若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，...
- 若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，...
#hr();
Comment：
#comment_kcaptcha
終了行:
[[uni-app]]
&color(red){※前提条件：vue3 的uniapp开发};
#contents
#codeprettify{{
XXX
}}
* em [#e10ae594]
相对长度单位。
- em的值并不是固定的
- em会继承父级元素的字体大小
相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺...
&color(red){注意};：任意浏览器的默认字体高都是16px。所有...
所以我们在写CSS的时候，需要注意：
+ body选择器中声明Font-size=62.5%；
+ 将你的原来的px数值除以10，然后换上em作为单位；
+ 重新计算那些被放大的字体的em数值。避免字体大小的重复声...
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明...
* rem(root em) [#g8de6c51]
默认根字体大小为 屏幕宽度/20（微信小程序、头条小程序、App...
使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是...
这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可...
* 视口单位（ Viewport units ) [#zc66a47b]
** 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宽的屏幕...
App端，在 pages.json 里的 titleNView 或页面里写的 plus ap...
微信小程序设计了 rpx 解决这个问题，uni-app 在 App 端、H5 ...
rpx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。u...
开发者可以通过设计稿基准宽度计算页面元素 rpx 值，设计稿 1...
设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx
换言之，页面元素宽度在 uni-app 中的宽度计算公式：
750 * 元素在设计稿中的宽度 / 设计稿基准宽度
举例说明：
- 若设计稿宽度为 750px，元素 A 在设计稿上的宽度为 100px，...
- 若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，...
- 若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，...
#hr();
Comment：
#comment_kcaptcha
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
