Skip to main content

You should know about H5 development knowledge - CSS

Β· 3 min read

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;

Further reading​

You should know about H5 development knowledge - HTML

You should know about H5 development knowledge - JavaScript