1Px 线加粗触发器
做联通项目时，往往是根据设计图纸
要设置元素节点的大小和样式，有时候按照设计图写下来的样式还是不尽如人意的，即使表面上看起来和设计稿一样，但是没有设计稿的感觉，而且莫名其妙有山寨的氛围，UI审查也经常认为分界线或者边界线太粗， 要薄一点，再看代码，已经是1px了，为什么还这么厚？
要了解问题的原因，您必须首先了解几个概念：
是显示器（手机屏幕）上最小的数学显示单位（像素粒度），每个设备像素在操作系统的调度下都有自己的颜色值和色温值。例如，iPhone6上有750*1334个数学像素粒子。
（2） 与密度无关的像素
与设备无关的像素 （
也称为与密度无关的像素）可以被认为是计算机坐标系中的一个点，它表示可以被程序使用的虚拟像素（例如.CSS像素），有时也称为逻辑像素。然后由相关系统将其转换为化学像素。因此，化学像素和与设备无关的像素之间存在一定的对应关系，这就是要说的设备像素比。（3） 设备像素比
（设备像素比）称为 DPR设备像素
比率（简称 DPR）定义了化学像素和与设备无关的像素之间的对应关系。其值可以通过以下公式获得：
设备像素比 （dpr） = 化学像素 /
逻辑像素 （px） // 在某个方向，x 方向或 y 方向，右图 DPR = 2
知道了
设备的像素比，我们就知道了1px线变粗的原因。简单来说，手机的屏码率越来越高，同等尺寸的手机，实际的化学图像质数更多。由于不同的联通设备具有不同的像素密度，因此我们写入的 1px 等于该联通设备在不同联通设备上的 1px。如今，在做联通开发时，通常会加一句话：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
这句话将本页视口的长度定义为设备长度，初始和最大缩放值均为1，严禁用户缩放。
视口的设置和屏幕化学比特率是按比例列而不是相同的，连接的窗口对象有一个 devicePixelRatio 属性，该属性表示设备化学像素和 CSS 像素的比例，而在视网膜屏幕的 iPhone 上，这个值是 2 或 3，用 CSS 写的 1px 宽度映射到化学像素上的 2px 或 3px。通过设置视口，可以更改 CSS 中渲染 1px 的化学像素数，设置不同的视口，但实际上 1px 的腰线看起来并不一致。
1px线加粗的解决方案是伪类+比例
这些技术的原理是去除原始元素的边框，并且
然后用：之前或之后：重做边框，原元素的相对定位，新做的边框绝对，定位采用变换的比例将腰线高度降低一半，新边框相当于0.5px。代码如下：
.scale{
position: relative;
border:none;
}
.scale:after{
content: '';
position: absolute;
bottom: 0;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
使用灵活的.js
后面已经说过，1px加粗的原因是设置视口长度
总的来说，如果视口长度可以设置为设备的实际化学长度，则 CSS 中的 1px 不等于实际的 1px 长度。灵活.js的原理是，首先获取设备缩放比例devicePixelRatio，然后根据缩放比例动态设置视口的值，这样无论哪个设备，1px始终代表1个设备像素，即设备的最小像素。
//devicePixelRatio=2时，输出meta如下
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
//devicePixelRatio=3时，输出meta如下
<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">
使用元视口控件
原理如上。代码如下：
//1px像素线条
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
//0.5像素线条
<meta name="viewport" content="width=device-width,initial-scale=0.5,user-scalable=0">
使用框阴影模拟边框
借助CSS进行阴影处理，实现了0.5px的效果。代码如下：
.box-shadow-1px {
box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}
使用边框图像
首先，你需要制作一条0.5像素的腰线作为腰围的背景图像。代码如下：
p{
border-width: 0 0 1px 0;
border-image: imageUrl 2 0 round;
}
借助背景渐变线性渐变借助线性渐变
借助背景图像渐变css 线条，从彩色到透明，默认方向是从上到下，从0度到50%的局部颜色是边框颜色，然后颜色的下半部分是透明的。之后，将背景长度设置为100%，高度为1pxcss 线条，然后删除重复，因此彩色边框为0.5px。代码如下：
.bg_border {
background-image: linear-gradient(0deg,black 50%,transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
}
大多数后端甚至全栈开发人员都可以编写CSS代码。但并不是每个人都可以修补每个CSS错误或实现设计，而无需复杂的HTML代码或在不需要的地方依赖JavaScript。
专业的CSS开发人员关心代码的细节，喜欢创建布局和组件，即使是最复杂的布局和组件，但知道如何解决每个问题或错误。
CSS编码标准
在编写任何代码之前，通常需要有一些基本的编码规则并遵守编码标准，这对于项目的可维护性和可伸缩性至关重要。
选择要在整个项目中使用的命名约定。尽快完善命名约定可以帮助开发人员构建更好、更有条理的代码。通过阅读HTML代码，它还可以帮助参与项目的每个人了解组件结构以及组件和元素之间的关系。
确定如何处理 CSS 中的缩进、选择器类型、速记属性和单位。例如，如果编码标准建议使用rem单位，则应防止使用像素单位。每个人都有不同的写作/编码风格，但作为一名专业人士，你必须能够采用，更重要的是，理解每个概念。
CSS设计和实现
在将设计转换为代码之前，您应该花时间了解每个页面、布局和组件。如果可能，请分析每个页面，创建页面和组件的列表，并尝试查找模式。
如果您注意到某个组件出现在更多页面上，则应识别其周围环境并尝试将其视为单独的组件。如果存在类似的组件（如卡片或列表），则可能存在相同组件的变体。通过这些方式，您可以重用HTML代码，并且只编写少量CSS代码以使其看起来有所更改。
尝试在其他区域（例如排版和宽度）中查找模式也是一个好主意。有时，这会导致在整个项目中使用帮助程序类css打印，而不是在单个页面中使用。
组织您的 CSS 代码
开发人员应该组织他们的代码并为每个人创建一个有意义的结构。使用 CSS 处理器等工具时，开发人员应记录生成编译代码的过程。
如有必要，开发人员可以创建样式手册。样式手册可用作创建新页面或决定如何处理现有页面时的参考。样式手册可以包含调色板、排版规则、编码标准，甚至是静态页面。没有限制，不仅是预算和您的想象力。
生产中的 CSS 代码编码CSS
意味着处理跨浏览器问题，错误，动画，过渡css打印，响应和复制样式，专门的CSS开发人员知道（或至少应该知道）如何在考虑每个错误，浏览器和环境的情况下构建代码。
使用现代方式是一种方式，但也不应忽视支持较旧的浏览器并尊重用户设置（例如降低运动）。
CSS 开发人员还编写 HTML 和 JavaScript 代码来加载字体、提取键 CSS、使用延迟和异步 JavaScript 加载，并提供响应式图像。CSS 开发人员是
后端开发人员，其基本职责是提供高性能、易于维护和可扩展的 CSS 代码。
发表评论