To achieve high-definition adaptation, you need to use pictures of multiple sizes. For example, if the design draft has a width of 640, then under ip6 and ip6 plus, the 100% width will be enlarged. If it is adapted to ip6, a 750px width design draft will be designed. You can use media query @media to load different images,
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
What is the actual size of the image, and on what device does it appear blurry?
Generally use images that are twice the width and height of the device
It depends on the size of your design draft. If the pictures are made according to the design draft, there will generally be no blurring problems
To achieve high-definition adaptation, you need to use pictures of multiple sizes.
For example, if the design draft has a width of 640, then under ip6 and ip6 plus, the 100% width will be enlarged. If it is adapted to ip6, a 750px width design draft will be designed.
You can use media query @media to load different images,
Use @media and set different percentage sizes under different resolutions to solve the problem