建立网站纯文字版本,免费软件你懂我意思正能量,竞价托管就选微竞价,网页翻译脚本前言
您是否注意到 1px 边框在移动设备上有时会显得比预期的要粗#xff1f;这种不一致源于移动屏幕的像素密度不同。
在 Web 开发中#xff0c;我们使用 CSS 来设置页面样式。但是#xff0c;CSS 中的 1px 并不总是转换为设备上的物理 1px。这种差异就是我们的“1px 边框…前言
您是否注意到 1px 边框在移动设备上有时会显得比预期的要粗这种不一致源于移动屏幕的像素密度不同。
在 Web 开发中我们使用 CSS 来设置页面样式。但是CSS 中的 1px 并不总是转换为设备上的物理 1px。这种差异就是我们的“1px 边框问题”产生的原因。
罪魁祸首像素密度
每个设备都拥有特定的像素密度由 devicePixelRatio 测量它告诉我们物理像素与设备独立像素之间的比率。
devicePixelRatio 物理像素 / 独立像素
今天我就来跟你分享8 个久经考验的解决方案 。探索解决方案我们要重点关注像素比大于或等于 2 的情况。
1. 0.5px 边框一个简单的解决方案
此方法涉及在设备像素比为 2 或更高时有条件地应用 0.5px 边框。
// Check if devicePixelRatio exists and is greater than or equal to 2
if(window.devicePixelRatio devicePixelRatio2){// Create a temporary div element for testingvar testElem document.createElement(div);// Apply a 0.5px transparent border to the test elementtestElem.style.border .5px solid transparent;// Append the test element to the bodydocument.body.appendChild(testElem);// Check if the rendered height is 1px (meaning 0.5px border works)if(testElem.offsetHeight 1){// If yes, add the hairlines class to the HTML elementdocument.querySelector(html).classList.add(hairlines);}// Remove the test elementdocument.body.removeChild(testElem);
}
// Place the above script inline. If its inside a function,
// wrap it in $(document).ready(function(){}) to ensure it runs after the DOM is ready.// Default border style
div{border: 1px solid #bbb;
}
// Apply 0.5px border when hairlines class is present
.hairlines div {border-width: 0.5px;
}
2. 边框图像完美的边框
使用专门制作的边框图像是一种有效的方法。以下是创建底部边框的方法
.border-bottom-1px {// Set other border widths to 0border-width: 0 0 1px 0;// Apply the border-image – ‘linenew.png’ // (assuming you have an image for this)border-image: url(linenew.png) 0 0 2 0 stretch;// For webkit browsers-webkit-border-image: url(linenew.png) 0 0 2 0 stretch;
}
解释 我们只在底部设置边框border-width0 0 1px 0。 使用的图像“linenew.png”假定为 2px 高。 图像顶部 1px 是透明的底部 1px 包含实际边框颜色。
3. Background-Image背景技巧
与 border-image 类似此方法利用预先准备的图像作为边框。
.backround-image-1px{// Set the background image, repeating it along the x-axis and positioning it at the left bottombackground: url(../img/line.png) repeat-x left bottom;// Set the background size for Webkit browsers-webkit-background-size: 100% 1px;// Set the background size (1px height for the border effect)background-size: 100% 1px;
}
注意事项 更改颜色需要替换图像。 圆角可能会显得模糊需要额外的样式。
4. 多背景渐变边框的错觉
我们可以使用渐变背景来模仿边框的外观。渐变的一半显示所需的颜色而另一半保持透明。
.background-gradient-1px{// Create a multi-background with linear gradients for each sidebackground:line-gradient(180deg, black, black 50%, transparent 50%) top left / 100% 1px no-repeat,line-gradient(90deg, black, black 50%, transparent 50%) top right / 1px 100% no-repeat,line-gradient(0, black, black 50%, transparent 50%) bottom right / 100% 1px no-repeat,line-gradient(-90deg, black, black 50%, transparent 50%) bottom left / 1px 100% no-repeat;}/* Alternatively, use an older syntax for Webkit browsers*/
.background-gradient-1px{// Apply a linear gradient from top to bottombackground: -webkit-gradient(linear, left top, left bottom, color-step(.5, transparent), // Transparent at 50%color-step(.5, #c8c7cc), // Color starts at 50%to(#c8c7cc)) // End colorleft bottom repeat-x; // Set the background sizebackground-size: 100% 1px;
}
5. Box-Shadow跳出框框
让我们利用 CSS 阴影来创建令人信服的边框效果。
.box-shadow-1px {// Apply an inset box shadow – the negative spread simulates a thin borderbox-shadow: inset 0px -1px 1px -1px #c8c7cc;
}
6. 视口 Rem动态二重奏
调整视口的 rem 基值有助于在不同设备上实现一致的 1px 边框。请记住使用此技术修改旧项目可能需要进行重大调整。
优点适用于各种布局的适应性解决方案。
缺点对于遗留项目来说可能具有挑战性。
// For a device pixel ratio of 1, set the viewport as follows:
meta nameviewport contentinitial-scale1, maximum-scale1, minimum-scale1, user-scalableno// For a device pixel ratio of 2
meta nameviewport contentinitial-scale0.5, maximum-scale0.5, minimum-scale0.5, user-scalableno
// For a device pixel ratio of 3
meta nameviewport contentinitial-scale0.333333, maximum-scale0.333333, minimum-scale0.333333, user-scalableno!DOCTYPE html
html
headmeta charsetUTF-8 /meta nameviewportcontentwidthdevice-width,initial-scale1,user-scalableno/titleremviewport/title style typetext/css* {margin: 0;padding: 0;}#box {width: 8rem;height: 8rem;border: 1px solid #000;}
/style
/head
bodydiv idbox/divscript typetext/javascript// Get the device pixel ratiovar dpr window.devicePixelRatio; // Example: 2 on a Retina display console.log(dpr, dpr);// Calculate the inverse scale var scale 1 / dpr; // Get the initial viewport width – this might be inaccurate due to the dprvar width document.documentElement.clientWidth; // Example: 375 on an iPhone X// Adjust the viewport meta tag to counteract the device pixel ratiovar metaNode document.querySelector(meta[nameviewport]);metaNode.setAttribute(content, widthdevice-width,initial-scale scale ,user-scalableno);// Recalculate the width after viewport adjustmentvar width document.documentElement.clientWidth; // Now, it should be closer to 750// Dynamically set the base font size using rem unitsvar styleN document.createElement(style);styleN.innerHTML html{font-size: width / 16 px !important;}; document.head.appendChild(styleN);
/script
/body
/html
7. 伪元素 变换传统项目英雄
这种方法对现有项目非常方便。我们删除原始边框并利用伪元素制作 1px 边框将其缩小以获得像素完美的外观
.scale-1px {position: relative;border: none; // Remove any default borders
}.scale-1px:after {content: ;position: absolute;bottom: 0;background: #000; // Set the desired border colorwidth: 100%;height: 1px; transform: scale(0.5); // Scale down to 0.5 to achieve a thinner bordertransform-origin: 0 0;
}
.scale-1px-top {border: none;position: relative;
}
.scale-1px-top:before {content: ;position: absolute;display: block;top: 0;left: 0;width: 200%; // Stretch to cover potential scaling issuesheight: 1px;border-top: 1px solid #E7E7E7;-webkit-transform: scale(0.5, 0.5);transform: scale(0.5, 0.5);-webkit-transform-origin: 0 0;transform-origin: 0 0;
}
.scale-1px-bottom {border: none;position: relative;
}
.scale-1px-bottom:before {content: ;position: absolute;display: block;bottom: -1px; // Adjust position to avoid overlapping contentleft: 0;width: 200%; height: 1px;border-bottom: 1px solid #ccc; -webkit-transform: scale(0.5, 0.5);transform: scale(0.5, 0.5); -webkit-transform-origin: 0 0;transform-origin: 0 0;
}
.borderRadius-1px { border-radius: .16rem; border: none;position: relative;
}
.borderRadius-1px:after { content: ;position: absolute;top: 0;left: 0;border: 1px solid #d1d1d1;-webkit-box-sizing: border-box;box-sizing: border-box;width: 200%; // Ensure the pseudo-element covers the entire elementheight: 200%;-webkit-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: left top; transform-origin: left top;border-radius: .16rem;
}
8. SVG绘制线条
我们也可以使用 SVG 直接绘制 1px 线条。
svg width100% height1 styleposition: absolute; bottom: 0; left: 0;line x10 y10 x21000 y20 stylestroke:#E5E5E5; stroke-width:1 /
/svg
关于优联前端 武汉优联前端科技有限公司由一批从事前端10余年的专业人才创办是一家致力于H5前端技术研究的科技创新型公司为合作伙伴提供专业高效的前端解决方案合作伙伴遍布中国及东南亚地区行业涵盖广告教育 医疗餐饮等。有效的解决了合作伙伴的前端技术难题节约了成本实现合作共赢。可进行Web前端微信小程序、小游戏2D/3D游戏动画交互与UI广告设计等各种技术研发。
