交河做网站价格,泰安网站建设步骤,商城网站类建设哪家好,小程序定制一般多少钱1px 不够准确#xff0c;应该说成 1 物理像素 为什么有 1px 这个问题#xff1f;实现 1px 有哪些方法#xff1f;这些方法分别有哪些优缺点#xff1f;开源项目中使用的哪些解决方案#xff1f;如何在项目中处理 1px 的相关问题#xff1f; 基本概念 首先#xff0c;我们… 1px 不够准确应该说成 1 物理像素 为什么有 1px 这个问题实现 1px 有哪些方法这些方法分别有哪些优缺点开源项目中使用的哪些解决方案如何在项目中处理 1px 的相关问题 基本概念 首先我们要了解两个概念一个是像素pixel可以简写为px另外一个是设备像素比DPR 像素 指在由一个数字序列表示的图像中的一个最小单元单位是 px不可再次分割了。设备像素比DPR: 设备像素比 设备像素 / 设备独立像素。
复制代码
下面我来简单解释下几个概念 CSS 像素 (虚拟像素)指的是 CSS 样式代码中使用的逻辑像素在 CSS 规范中长度单位可以分为两类绝对单位以及相对单位。px 是一个相对单位相对的是设备像素。设备像素 (物理像素)指设备能控制显示的最小物理单位意指显示器上一个个的点。从屏幕在工厂生产出的那天起它上面设备像素点就固定不变了和屏幕尺寸大小有关。设备独立像素 (逻辑像素)可以认为是计算机坐标系统中的一个点这个点代表一个可以由程序使用的虚拟像素(比如: CSS 像素)这个点是没有固定大小的越小越清晰然后由相关系统转换为物理像素。 也就是说当逻辑像素是 1pt 时在 DPR 为 2 的 设备上显示为 2px 的物理像素 参考数据
各种类型的 iphone 手机屏幕设备的参数 注这里的缩放因子呢就是 DRP 的值 设计稿对比数据 会有人好奇为什么设计稿上显示是 750x1334 呢这是因为设计稿是显示的物理像素 而我们 css 中的像素是逻辑像素应该为 375x 667在编写代码时要将自定义宽度设置成 375px 那么此时设计稿上的 1px 宽度实际代表的 css 参数应该是 0.5px 对应物理像素 1px那么怎么实现这个物理像素为 1px 呢 实践 归根结底有两种方案一种是利用 css 中的transfromscaleY(0.5)另一种是设置 媒体查询根据不同 DPR 缩放 解决方案一
原理
利用 css 的 伪元素::after transfrom 进行缩放
为什么用伪元素 因为伪元素::after或::before是独立于当前元素可以单独对其缩放而不影响元素本身的缩放 伪元素大多数浏览器默认单引号也可以使用和伪类一样形式而且单引号兼容性ie更好些 实现
div classcell border-1px cell divstyle
.cell {width: 100px;height: 100px;
}
!--全部边框--
.border-1px:after {content: ;position: absolute;box-sizing: border-box;top: 0;left: 0;width: 200%;height: 200%;border: 1px solid #000;border-radius: 4px;-webkit-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: top left;
}!--单边框以上边框为例--
.border-1px-top:before {content: ;position: absolute;top: 0;left: 0;right: 0;border-top: 1px solid red;transform: scaleY(.5);transform-origin: left top;
}
/style解决方案二升级方案一
原理 使用 less 对公共代码方案一封装同时增加媒体查询分别对不同 DPR 的设备进行不同的缩放 .border(borderWidth: 1px; borderStyle: solid; borderColor: lignt-gray-color; borderRadius: 0) {position: relative;:before {content: ;position: absolute;width: 98%;height: 98%;top: 0;left: 0;transform-origin: left top;-webkit-transform-origin: left top;box-sizing: border-box;pointer-events: none;}media (-webkit-min-device-pixel-ratio: 2) {:before {width: 200%;height: 200%;-webkit-transform: scale(.5);}}media (-webkit-min-device-pixel-ratio: 2.5) {:before {width: 250%;height: 250%;-webkit-transform: scale(.4);}}media (-webkit-min-device-pixel-ratio: 2.75) {:before {width: 275%;height: 275%;-webkit-transform: scale(1 / 2.75);}}media (-webkit-min-device-pixel-ratio: 3) {:before {width: 300%;height: 300%;transform: scale(1 / 3);-webkit-transform: scale(1 / 3);}}.border-radius(borderRadius);:before {border-width: borderWidth;border-style: borderStyle;border-color: borderColor;}
}.border-all(borderWidth: 1px; borderStyle: solid; borderColor: lignt-gray-color; borderRadius: 0) {.border(borderWidth; borderStyle; borderColor; borderRadius);
}
其他方案 使用图片兼容性最好灵活行最差不能改变颜色、长度使用 viewport 和 remjs 动态改变 viewport 中 scale 缩放缺点在于不适用于已有的项目例如使用 vh 和 vw 布局的 meta nameviewport idWebViewport
contentinitial-scale1, maximum-scale1,
minimum-scale1, user-scalableno
使用 css 渐变linear-gradient或者box-shadow
上述 3 种方案均有致命缺陷暂不推荐使用
兼容性 最后看一下兼容性如何主要是伪元素、transform:scale 和min-device-pixel-ratio 这几个关键词的兼容性 开源库的解决方案
vant 组件库
使用less写的 .hairline-common() {position: absolute;box-sizing: border-box;content: ;pointer-events: none;
}.hairline(color: border-color) {.hairline-common();top: -50%;right: -50%;bottom: -50%;left: -50%;border: 0 solid color;transform: scale(0.5);
} 也是采用第一种解决方案 ant-design-mobile 组件库
.scale-hairline-common(color, top, right, bottom, left) {content: ;position: absolute;background-color: color;display: block;z-index: 1;top: top;right: right;bottom: bottom;left: left;
}.hairline(direction, color: border-color-base) when (direction top) {border-top: 1PX solid color;html:not([data-scale]) {media (min-resolution: 2dppx) {border-top: none;::before {.scale-hairline-common(color, 0, auto, auto, 0);width: 100%;height: 1PX;transform-origin: 50% 50%;transform: scaleY(0.5);media (min-resolution: 3dppx) {transform: scaleY(0.33);}}}}
}.hairline(direction, color: border-color-base) when (direction right) {border-right: 1PX solid color;html:not([data-scale]) {media (min-resolution: 2dppx) {border-right: none;::after {.scale-hairline-common(color, 0, 0, auto, auto);width: 1PX;height: 100%;background: color;transform-origin: 100% 50%;transform: scaleX(0.5);media (min-resolution: 3dppx) {transform: scaleX(0.33);}}}}
}
.hairline(direction, color: border-color-base) when (direction bottom) {border-bottom: 1PX solid color;html:not([data-scale]) {media (min-resolution: 2dppx) {border-bottom: none;::after {.scale-hairline-common(color, auto, auto, 0, 0);width: 100%;height: 1PX;transform-origin: 50% 100%;transform: scaleY(0.5);media (min-resolution: 3dppx) {transform: scaleY(0.33);}}}}
}.hairline(direction, color: border-color-base) when (direction left) {border-left: 1PX solid color;html:not([data-scale]) {media (min-resolution: 2dppx) {border-left: none;::before {.scale-hairline-common(color, 0, auto, auto, 0);width: 1PX;height: 100%;transform-origin: 100% 50%;transform: scaleX(0.5);media (min-resolution: 3dppx) {transform: scaleX(0.33);}}}}
}.hairline(direction, color: border-color-base, radius: 0) when (direction all) {border: 1PX solid color;border-radius: radius;html:not([data-scale]) {media (min-resolution: 2dppx) {position: relative;border: none;::before {content: ;position: absolute;left: 0;top: 0;width: 200%;height: 200%;border: 1PX solid color;border-radius: radius * 2;transform-origin: 0 0;transform: scale(0.5);box-sizing: border-box;pointer-events: none;// media (min-resolution: 3dppx) {// width: 300%;// height: 300%;// border-radius: radius * 3;// transform: scale(0.33);// }}}}
} 这个值得研究下比 vant 和 第一种解决方案有点不同主要在于处理了 DPR 为 2 和为 3 的两种情况相比来说更加完善。 这里 PX 大写为了防止插件将 px 转成 rem 等单位
