当前位置:网站首页>A common problem in H5 mobile terminal 1px solution (full version)

A common problem in H5 mobile terminal 1px solution (full version)

2020-11-10 18:26:20 Guanggong Xiaocheng

  On a night of high black wind , Programmer small A I'm happily getting ready to pack up and go home . Now , The mobile phone suddenly vibrated . Small A Subconsciously think of , It must be something bad . Sure enough , It's the design guru who sent the message ...

Design boss : Small A, Why, this 0.5dp(0.5dp=1px) The border is thicker than the actual one

Small A: well , I'm going to have a look at ( It doesn't make sense , I remember clearly 1px Of , It can't be thick , Did I forget )

After reading the code ....

Small A: Design boss , I've written here 1px 了 , He is 1px 了 , I don't believe you , It's a little thicker. Maybe it's a cell phone h5 Will be able to 1px Let's make it rough

Design boss : But a lot of h5 The page also has 1px The border of the

Small A: well , Then I'll do some research ( Big guy talks , Have to keep a low profile , Don't worry about it , There may be another turning point )

After some research ....

Small A Suddenly wake up , Sure enough 1px A lot of people come across , There are also a lot of solutions on the Internet , But it looks messy , I didn't explain the principle , In case we meet again , So what should we do . This is where he has a idea, Why don't you organize yourself , It's also convenient for everyone to remember

1px Principles

Before we talk about principles , Let's talk about a concept first , It's the device pixel ratio DPR(devicePixelRatio) What is it?

DPR = Device pixel / CSS Pixels ( In a certain direction )

This sentence seems very difficult to understand , It can be combined with the following picture (1px In all DPR The display above ), Generally we h5 All the design drafts I got were 750px Of , But if DPR by 2 On the screen , The smallest pixel of a mobile phone is to use 2 * 2px To draw , That's why 1px It's going to be rough .

image

resolvent

There are many solutions , I'm here to help you compare the plans :

programme advantage shortcoming
Use 0.5px Realization The code is simple , Use css that will do IOS And Android Old devices don't support
Use border-image Realization Compatible with all current models It's not convenient to change the color
adopt viewport + rem Realization A set of code , All pages and 0.5px equally , The model is not compatible with
Using pseudo class + transform Realization Compatible with all models Rounded corners are not supported
box-shadow Simulation frame implementation Compatible with all models box-shadow Not in the box model , We need to pay attention to the reservation

The above solutions can be found on the Internet , I only offer two solutions that I often use :

box-shadow

box-shadow Is my most commonly used , In addition to the Android4.4 The following findings are less than 1p Of shadow It can't be displayed , The rest is good

//  Under the frame 
box-shadow: 0 1px #E9E9E9;

//  Full border 
box-shadow: 0 -1px #D9D9D9, 1px 0 #D9D9D9, 0 1px #D9D9D9, -1px 0 #D9D9D9;

//  Others can be seen API Learn more about this API

Using pseudo class + transform Realization

At present, Jingdong's h5 Web pages use pseudo classes + transform Realization

//  The left margin , If you need to change the border position , You can modify elements top,left,right,bottom The value of the can 
&::before {
    position: absolute;
    top: 0;
    left: 0;
    content: '\0020';
    width: 100%;
    height: 1px;
    border-top: 1px solid #E9E9E9;
    transform-origin: 0 0;
    overflow: hidden;
}

@media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49) {
    &::before {
      transform: scaleY(0.5);
    }
}

@media (-webkit-min-device-pixel-ratio: 2.5) {
    &::before {
      transform: scaleY(0.33333);
    }
}

How to deal with other web pages on the market

Reference to the current cutting-edge technology of the East and a treasure page

Finding a treasure is using div+width To implement , Therefore, it is inferred that a treasure should be used through viewport + rem + div Methods

image

A pseudo class is used in the above + transform Realization

image

summary

It's also a good thing that designers are strict sometimes

Reference material :

https://main.m.taobao.com/

https://m.jd.com/

https://juejin.im/post/684490...

https://www.kelede.win/posts/...

版权声明
本文为[Guanggong Xiaocheng]所创,转载请带上原文链接,感谢