"Original" mobile Web point 5 pixels secret

Recently chatting with a friend, friends confide in the work of some unhappy, said that they always like to compare with others, live more tired, this feeling most people experienced, often feel that their mentality is not good, it is not, this is human nature, at this time should quickly get rid of this state, think of DotA big 9 God's record, the game is life , understand the life of thinking will continue to promote their own progress, detailed I do not know, the approximate meaning is this: people This life time, happiness is very important, how people feel happy, it is really not difficult, there are two points, one is "you can let others like you", and the other is "with good friends you can remove the mask", It's what it's like. Hope to give unhappy classmates to find a glimmer of help ~

Back to today's theme. 5PX (0.5px abbreviated to. 5px), as you may have heard. 9, it is a special image form in the development of Android platform application software, the. 5 of this article refers to how to use CSS implementation. 5PX Lines ~

Directory

• You may not know that. 5px
• The border property does not support. 5px?
• Implement the. 5px Line
• Achieve a rounded border of. 5px

You may not know that. 5px

In mobile web design, the retina display under the screen will be 1px will be rendered as 2px, then the visual version of 1PX lines to restore the page needs to be defined as CSS. 5px. In the comics at the beginning of the article, the careful designer finds the thick lines and spits out the grooves, The reason for the front-end is because the CSS Border-width does not support the. 5px, so the 1px to replace, the final rendering of a thick, 2px, this problem is often overlooked, resulting in mobile Web pages generally exist in the thick lines of 2px.

The page 1px under Retina is rendered as 2px (even 3px, for example, iphone 6 Plus), and can be referenced in the article "principle and design of HD display"

Error case demonstration:-AA Collection-Details page button, visual manuscript the button border is 1px, the frame after the reconstruction of the button is 2px.

This issue has been optimized and how to implement please look down.

The border value is not supported. 5px

Some students use boder-width:.5px, in the PC or page page can not see. 5px border (iOS 8 system has perfectly supported Border-width value 0.5px lines), Would think that Border-width does not support. 5px, isn't that so, let's do an experiment first.

First open the link or scan QR code, experience Demo

Http://peunzhang.github.io/demo/d5px/border.html

It can be seen that the. 5px border does not display lines on the Chrome browser, such as:

After the chrome resolution is adjusted, the. 5px border displays lines on the PC browser, such as:

The. 5px border shows lines in the iphone 6 Plus, such as:

The. 5px border does not display lines under the Samsung Galaxy S4 Android 5.0.1, such as:

Other equipment is not one by one, interested please test, there are surprises, simple collation of the following forms:

Test Results Reference

• The border-width value of CSS supports. 5px, display status affected by screen resolution
• iOS 8 and Winphone 8 devices have special handling of the HD screen and support display border-width:.5px
• Android almost all models do not support the display. 5px border

In addition, this paper also made a test of height value, the result is the same as border-width, we can also test font-size, Box-shadow and other properties.

Http://peunzhang.github.io/demo/d5px/height.html

Implement the. 5px Line

There are many methods on the network, such as setting up Viewport,box-shawdow,border-image,background-image,transform:scale and so on, here do not introduce (Baidu or google "Retina 1px border" has the answer) , this article only introduces one kind of method which feels more useful, the compatibility is good, and secondly does not depend on the picture.

Transform:scale (x, y)

Through the CSS support to define border or height for. 5px large lines, on Android devices can not be displayed, here is a small trick, the result is set to 1px, and then by Transform:scale (x, y) to scale the line half of the original, can display 0.5px of lines.

<! DOCTYPE html>
Http://peunzhang.github.io/demo/d5px/height-scale.html
Achieve a rounded border of. 5px
The. 5px border looks magical, thanks here for the method provided by Lan Shu.
Principle: Define a rounded border of 1px, then stretch the content to twice times the width and height of the parent (the border thickness is unchanged), then use Transform:scale (0.5) to scale to the original 0.5 times times
<! DOCTYPE html>
Http://1.peunzhang.sinaapp.com/demo/d5px/border-radius.html
If you open it in chrome, you'll find that scaling the line will cause the border color to be lighter, but you can rest assured that the color of most mobile devices (relatively high-end) is normal.
In an article before the Tanabata, may the world lovers finally become dependents?
"Original" mobile Web point 5 pixels secret