边框在网页设计中常常用来分隔不同的内容区域，或者为元素添加视觉效果，但是在响应式设计中，不同屏幕大小的设备展示出来的边框宽度不同，可能会导致设计出现缺陷。本文将介绍如何解决这个问题。
使用相对单位
网页设计通常使用像素（px）作为单位，然而这在响应式设计中会导致边框显示不一致的问题。使用相对单位如 em，rem 或者百分比可以解决这个问题。
- em 指相对于当前元素字体大小的单位。
- rem 指相对于根元素（即 html 元素）字体大小的单位。
- 百分比可以用相对于父元素或者根元素的长度进行计算。如
border: 1px solid 10%;表示边框宽度为 1px，颜色为 10% 的根元素字体颜色。
// javascriptcn.com code example
/* 使用 em 作为边框宽度的单位 */
.border-em {
border: 0.1em solid black;
}
/* 使用 rem 作为边框宽度的单位 */
.border-rem {
border: 0.1rem solid black;
}
/* 使用百分比作为边框宽度和颜色的单位 */
.border-percent {
border: 1px solid 10%;
}使用 CSS3 calc()
CSS3 的 calc() 函数可以在计算长度值时使用加、减、乘、除四种运算符，可以让我们在响应式设计中更好地控制边框宽度。
/* 使用 calc() 控制边框宽度 */
.border-calc {
border: calc(0.1em + 1px) solid black;
}calc() 函数可以进行长度单位之间的运算，这里假设 1px 的边框宽度为常数，使用 calc() 函数计算出边框宽度。这样，无论不同屏幕大小的设备，边框宽度都可以保持一致。
使用 SVG 边框
SVG 可以使用矢量路径来描述边框的样式，使用 SVG 边框可以让边框在不同分辨率或尺寸的设备上呈现相同效果，而且 SVG 边框可以使用一些平时无法使用的效果来增强网站视觉效果。
/* 使用 SVG 边框 */
.border-svg {
border-image: url(border.svg) 10 10 round;
}此处的 border.svg 是一个 SVG 格式的矢量图，10 10 表示图片的边界切割宽度，round 表示图片的外边框为圆角。
结论
在响应式设计中，边框宽度的问题会比较常见，并且有很多方式可以解决，使用相对单位、calc() 函数和 SVG 边框都是很好的选择。在实际项目中，我们应该根据具体情况选择最适合的方案，以达到更好的响应式效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67382a63317fbffedf0e9c5f