You should know about H5 development knowledge - CSS

HTML5 is different from PC Web development. In the last article, we learned how to develop H5 about HTML. Now, we will learn how to develop H5 about CSS.

One pixel border

The 1px problem will only appear on the Retina hd screen, since the hd screen uses multiple physical pixels to display one CSS pixel, such as iphone6, since the DPR is 2, 1css pixel will be displayed with two physical pixels, so it looks like the 1px line will be extremely wide.

There are many solutions to the 1px problem, such as background images, shadows, zooming and so on. The only solution I have used before is zooming. The idea is to fix the border and make the whole element bigger and then smaller.

.one-pixel {
  position: relative;
  width: 100px;
  height: 80px;
  &::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid #333;
    width: 200%;
    height: 200%;
    transform: scale(0.5);
    transform-origin: left top;
  }
}

border-bottom: 0.5px solid #333;

Horizontal and Vertical detection

The style for landscape or portrait can be set using the @media query below

// Vertical
@media all and (orientation: portrait) {
}
// Horizontal
@media all and (orientation: landscape) {
}

Make the iPhone scroll more smoothly

.container {
  -webkit-overflow-scrolling: touch;
}

Disable selection

Sometimes we do not want others to long press to save the picture, we can use the following style, let the user long press the picture invalid.

.img {
  pointer-events: none;
  user-select: none;
  -webkit-touch-callout: none;
}

Beautify placeholder

When we need to change the color of the placeholder we can use the following style.

input::-webkit-input-placeholder {
  color: red;
}

Text overflows ellipses

When we need to display more text with ellipses, we can use the following style. In fact, this is a common style for both PC and mobile.

To use this style, note that the element must be either a block-level element, or an inline block-level element with the specified width，eg: display: inline-block

Single line ellipses

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Multiple lines ellipses

.ellipsis-two {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

One pixel border​

Horizontal and Vertical detection​

Make the iPhone scroll more smoothly​

Disable selection​

Beautify placeholder​

Text overflows ellipses​

Single line ellipses​

Multiple lines ellipses​

Further reading​