[Original] mobile web point 5 pixel secret, mobile web pixel secret

[Original] mobile web point 5 pixel secret, mobile web pixel secret

Recently I chatted with a friend, who confided some unhappy work and said that they always like to compare with others and are tired of living. This is a feeling that most people have experienced it, I often think that my own mentality is not good. In fact, this is human nature. At this time, we should quickly get rid of this state. Think of the transcript of DOTA's 9th God, and the game is also life, A person who understands how to think will keep improving himself. I am not clear about the details. It probably means that a person is once in his life. Happiness is very important. How can people feel happiness, it's really not hard to say. There are two points: "You can make others like you" and "You can unload the mask when you are with a good friend. Hope to help unhappy people ~

Return to today's topic. 5px (0.5px is abbreviated. 5px), you may have heard of it. 9. It is a special image form in app development on the android platform. 5. How to Use css. 5 PX line ~

Directory

• You may not know. 5px
• Does the border attribute not support. 5px?
• Implement. 5px lines
• Implement. 5px rounded border

 

You may not know. 5px

In the mobile web design, the webpage will be rendered as 2px from 1px under the retina display, so the 1 px lines in the visual draft need to be defined as. 5px to be restored to the webpage. In the cartoon at the beginning of the article, a careful designer finds and spits out the rough lines. The reason for the front-end brother is that the border-width of css is not supported. 5 PX, so it is replaced by 1 px, and the final rendering is 2px. This problem is often ignored, resulting in the widespread presence of 2px thick lines in mobile Web pages.

The webpage 1px under retina is rendered as 2px (or even 3px, for example, iPhone 6 Plus). Refer to the article "HD display Principle and Design Scheme".

Example of an incorrect case:-AA collection-Details page button. The frame of the button provided by the visual draft is 1px, and the frame of the button is 2px after reconstruction.

This problem has been optimized. For more information, see.

 

Does the border value not support. 5px?

Some users use boder-width :. after 5px, you cannot see it on the PC or page. 5 PX border (the ios 8 system supports the border-width PX line perfectly), it will be considered that border-width does not support. 5px, isn't it like this? Let's test it first.

First open the link or scan the QR code to experience the demo

Http://1.peunzhang.sinaapp.com/demo/d5px/border.html

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

After the chrome resolution is adjusted, the. 5px border will display the line entries on the PC browser, for example:

The. 5px border displays the egress entries under the iPhone 6 plus, for example:

The. 5px border does not display lines under Samsung galaxy s4 android 5.0.1, for example:

If you are interested in testing and have some surprises, simply sort out the following table:

 

Test result reference

• The border-width value of css supports. 5px. The display status is affected by the screen resolution.
• Ios 8 and winphone 8 devices perform special processing on the HD screen and support displaying border-width:. 5px
• Almost all android models do not support displaying. 5px borders

In addition, this article also tests the height value. The result is the same as border-width. We can also test attributes such as font-size and box-shadow.

Http://1.peunzhang.sinaapp.com/demo/d5px/height.html

 

Implement. 5px lines

There are many methods on the network, such as setting viewport, box-shawdow, border-image, background-image, transform: scale, etc, I will not describe it here (Baidu or Google's "retina 1px border" has an answer). This article only introduces one method that seems to be easy to use, so it has good compatibility and no dependency on images.

Transform: scale (x, y)

Supports defining border or height with css. 5 PX lines cannot be displayed on android devices. Here is a tip. If the line is set to 1px, use transform: scale (x, y) to zoom in to half of the original line and display the line of PX.

<! DOCTYPE html> 
Http://1.peunzhang.sinaapp.com/demo/d5px/height-scale.html

 
Implement. 5px rounded border
The. 5px border looks amazing. Thanks to the method provided by Uncle lan.
Principle: first define the rounded border of 1 px, then stretch the content width and height to 2 times the parent level (the Border thickness remains unchanged), and then use transform: scale (0.5) scale to 0.5 times of the original

<! DOCTYPE html> 
Http://1.peunzhang.sinaapp.com/demo/d5px/border-radius.html

If you open it in chrome, you will find that the scaled line will cause the border color to become lighter, but you can rest assured to use it, because the color of most mobile devices (relatively high-end) is normal.
 
I hope there will always be a lover in the world after an article written before the Chinese Valentine's Day