前端-移动端-高清屏下的1px边框-单独解决方式

Lin

Lin

xiaominglin789

1px像素问题的原因:

  • dpr = 物理像素 / css像素 普通屏幕的1px就是物理像素的1px,而Retina屏的1px就不等于1px了,这就造成了在不同设备中1px的实际宽度不一致的问题。

  • 如果需要对这个1px边框效果严格话,使用 pixel-border.css 解决
  • pixel-border.css是一个解决移动端 1px 边框的通用 CSS 工具。使用 transform 的解决方法,仅有几行的源码,使用起来非常方便,是目前发现最好的解决方法。

安装依赖 或 直接link引入

  • 1.npm安装:
npm install pixel-border --save
# yarn
yarn add pixel-border
  • 2.浏览器安装,建议安装压缩后的版本:
<link rel="stylesheet" href="path/to/pixel-border.min.css"><link>
  • 3.使用:
    • 在使用原生的 CSS 边框属性为原素设置边框,只需要在元素上添加一个 pixel-border 或 pixel-border="true" 的属性,并设置元素的 border-style 值即可
<div style="border-style: solid;" pixel-border>单像素边框</div>

nginx-详解

Lin

Lin

xiaominglin789

Nginx

工作图 特点:

- 高并发、高性能
- 模块化
- 热部署、热更新
- 低消耗
- 配置、维护简单

功能:web服务器、代理服务器、tcp/udp代理服务器