This is the fourth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

The 1PX problem is a common problem in mobile web pages. This paper summarizes some 1PX methods to solve mobile Web and the corresponding API introduction

border-image

The border-image CSS property allows an image to be drawn on the border of an element

grammar

border-image: image-source image-height image-width image-repeat
Copy the code

Set 1 px

.border-top {
  border-width: 1px;
  border-image: url('xxx') 2 repeat;
}
Copy the code

When using border-image, it replaces the border style set by the border-style property. Although the specification requires that the border style be present when using border-image, some browsers may not implement this.

In particular, if border-image-source (which can be set to border-image-source or border-image shorthand) is none or the image cannot be displayed, border-style will be applied

Advantages: Good compatibility

Cons: Poor flexibility; images need to be replaced with each change

linear-gradient

Use a gradient of 1px, 50% black, 50% transparent

.border-top {
  background: linear-gradient(1deg, black, black 50%, transparent 50%) top left / 100% 1px no-repeat;
}
Copy the code

Advantages: simple implementation, color control

Disadvantages: Unable to achieve rounded corners, compatibility issues (now compatibility issues can be ignored)

box-shadow

The box-shadow attribute is used to add a shadow effect to the frame of an element. You can set multiple shadow effects on the same element, separated by commas. The values you can set for this property include the X-axis offset, Y-axis offset, blur radius, spread radius, and color of the shadow.

When using box-shadow, note that different numbers of attribute values have different meanings

  • If only two attribute values exist, they are treated asofferset-xandofferset-y
  • If there are three attribute values, the first two are usedofferset-xandofferset-y, and the third value asblur-radius
  • If four attribute values exist, the fourth will be usedspread-radius
.border-top {
  box-shadow: 0px -1px 1px -1px rgb(0 0 0 / 50%);
}
Copy the code

Advantages: simple implementation, color control

Cons: Color control is tricky, with shadow strokes

Pseudo-element + transfrom

If transfrom is used to scale the DOM directly, all elements within the DOM will be scaled, affecting the layout structure and font size. This problem can be avoided by using pseudo-element traversal, because pseudo-elements ::after or ::before are independent of the current element and can be scaled independently without affecting the element itself

.border-top {
  position: relative;
}

.border-top::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-top: 1px solid # 000;
  transform: scaleY(.5);
  transform-origin: left top;
}
Copy the code

Because there are a variety of DPR devices in the market, the above code is not very compatible, so it needs to be used with media query and scaled for different DPR devices

@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border-top::after { 
        /* omit irrelevant code */
        transform: scaleY(.5); }}@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border-top::after { 
        /* omit irrelevant code */
        transform: scaleY(1 / 3); }}Copy the code