H5开发中的单位设计转换问题分析
2021-04-02 本文已影响0人
小源子2016
引出问题
- 设计标一个50px,为什么我们需要除以2后，写成25px呢?
- 为什么在移动端开发过程中，我的红米手机分辨率达到了2400x1080,但是安装设计的750尺寸下写的像素看起来大小也合适呢，不应该会变得很小很小吗
- em和rem是用来做什么的?
物理像素和逻辑像素
-
pt: html css中的使用的单位像素px: 实际上指的是逻辑像素pt
-
px: photoshop测量中的但是实际上指的是物理像素, 物理像素即表示的是一个点, 大小固定
-
iphone6中一个单位的逻辑像素包含2个物理像素
-
浏览器上展示的iphone6为375 * 667 实际上指的是逻辑像素为375 * 667
-
一般移动端的设计图纸一般是给的是750*1334, 是因为一个逻辑像素pt包含两个物理像素px
-
UI设计师通过ps软件测量的是物理像素点，我认为就是真实的物理电子点
-
UI 设计图纸750*1334自然也是指的是物理像素的概念...
-
UI设计标注某个控件50px,自然也是物理像素，转换为逻辑像素就是25px,这就是为什么要除以2的原因
-
虽然我的红米2400 * 1080，实际上逻辑分辨率是393*873，所以用iphone6的逻辑分辨率差不多，所以也适用于 iphone6下的逻辑像素大小
-
在我的红米下，虽然我的手机物理分辨率更大，但是一个逻辑像素明显会对应出更多的物理像素，所以不至于按照iphone6写的逻辑像素变得非常小
-
以上px写法只是适合移动端手机
em和rem
- em是相对长度单位。相对于当前对象内文本的字体尺寸,如果父节点
1.2em,子节点1.2em,实际就是1.2*1.2了 - rem是使得em只相当于根节点的font-size
<title></title>
<script>function rem() {var w = document.documentElement.getBoundingClientRect().width;document.querySelector('html').style.fontSize = w * 100 / 750 + 'px'}rem();window.onresize = rem;</script>
</head>
<body>
<div id="root"></div>
<script>
})
</script>
- 上面的fontSize在iphone6下也就是50px=1rem
@function rem($px) {
@return $px / 100 + rem
};
- 这个转换是针对UI设计师标注的像素转换为rem,UI 标注了例如x个px(物理像素)，那么要转换为逻辑像素就是x/2;再转换为rem,就是x/2/50=x/100
css写法
.container {
background: red;
width: rem(750);
image.png
- 在750物理像素设计图纸下(iphone6)，逻辑像素是375，所以1rem=
375*100/750;rem(750)=7.5rem=475px
px转换转换为rem
- 我们平时是按照iphone6来对标的，适合手机，对大屏差异比较大(大屏逻辑分辨率查询百度"我的分辨率"，得出1080*1920)，所以用手机的px,看起来自然会比较小
在大屏上需要通过rem来避免字体过小 - 安装依赖
npm install lib-flexible postcss-px2rem-exclude -D
- confige-override.js增加,适应px2rem后，需要注意
- 1rem始终=37.5px,原来html设置的没有用了
- 注意1px不要转换，否则可能看不到了，可以把px写成大写的PX，避免转换
- 注意删除html的font-size,否则会出现先放大后缩小的异常情况
addPostcssPlugins([
require("postcss-import")({}),
require("postcss-url")({}),
require("postcss-preset-env")({}), // 可以使用 css 未来的特性 postcss-cssnext 已弃用
require("postcss-px2rem-exclude")({
// remUnit 等于 设计稿宽度 375除以10 37.5
remUnit: 37.5,//转换时候37.5px转为1rem,1rem=37.5px，.html的font_size不再是比例
//remUnit: 50,//转换时候50px转为1rem,1rem还是等于37.5px,.html的font_size不再是比例
exclude: /node_modules/i
})
]),
- 入口增加
import "lib-flexible";
- rem转换修改
x/2,然后x/2/37.5,于是就是x/75
@function rem($px) {
@return $px / 75 + rem
};
- 注意，内联样式插件不会自动修改,所以增加方法转换
//传入的px已经是UI给的物理像素/2后的逻辑像素，37.5个逻辑像素=1rem
export const px2rem = (px: number) => {
return px/37.5+'rem'
}
- 如果需要第三方组件也能够转换，去掉exclude
exclude: /node_modules/i
