MENU service case
Website construction website design Beijing website construction high-end website production company Shangpin China
We create by embracing change
360 ° brand value__
simplified Chinese character
Simplified Chinese English

Shangpin China Joins Hands with Beisheng Internet to Create a New Chapter in Website Construction

Type: Shangpin Dynamic Learn more

How to solve the problem that responsive website images cannot be adapted?

Source: Shangpin China | Type: website encyclopedia | Time: August 28, 2018
With the change of science and technology, the popularity of mobile devices, and more and more mobile devices of different sizes, we see the dawn and urgent demand for the popularity of responsive websites. However, responsive websites have a problem that must be solved: How to fit the pictures in the website to the response. A large picture is too unscientific if the PC side, tablet side and mobile side are all the same size. First, the mobile traffic occupies too much and the download speed is slow. Secondly, the image size will become blurred after large-scale compression.
If the picture exists in the background mode, it is easy to solve this problem. You can use media query to set different pictures for display terminals of different sizes. It is more complicated to solve the problem if it is a picture inserted in the web page.
1、 Apply the srcset attribute
In the srcset, different pictures are displayed according to the media query conditions. They are almost the same as the above, with different expressions. 1x represents the display multiple of the display pixel density.
Normally, I implement it by combining the two. The latest versions of all major browsers basically support it, but the IE series does not support it, which makes us feel very headache.
The more serious problem is that QQ browser uses IE as its core, and WeChat browser does not support it. WeChat has a very high usage rate in China. In addition, the WeChat official website of WeChat public platform is a common demand of customers. The final solution is to use Picturefill, which has a very good effect.
2、 Use picture element
In the wave of pursuing responsive website construction, I hope you don't forget the user experience. Only when all elements of the website can meet the responsive standard, can it be a truly responsive website.
Information source Shangpin China: Responsive Web Site Creation
Source Statement: This article is original or edited by Shangpin China's editors. If it needs to be reproduced, please indicate that it is from Shangpin China. The above contents (including pictures and words) are from the Internet. If there is any infringement, please contact us in time (010-60259772).
TAG label:

What if your website can increase the number of conversions and improve customer satisfaction?

Make an appointment with a professional consultant to communicate!

* Shangpin professional consultant will contact you as soon as possible

Disclaimer

Thank you very much for visiting our website. Please read all the terms of this statement carefully before you use this website.

1. Part of the content of this site comes from the network, and the copyright of some articles and pictures involved belongs to the original author. The reprint of this site is for everyone to learn and exchange, and should not be used for any commercial activities.

2. This website does not assume any form of loss or injury caused by users to themselves and others due to the use of these resources.

3. For issues not covered in this statement, please refer to relevant national laws and regulations. In case of conflict between this statement and national laws and regulations, the national laws and regulations shall prevail.

4. If it infringes your legitimate rights and interests, please contact us in time, and we will delete the relevant content at the first time!

Contact: 010-60259772
E-mail: [email protected]

Communicate with professional consultants now!

  • National Service Hotline

    400-700-4979

  • Beijing Service Hotline

    010-60259772

Please be assured to fill in the information protection
Online consultation

Disclaimer

Thank you very much for visiting our website. Please read all the terms of this statement carefully before you use this website.

1. Part of the content of this site comes from the network, and the copyright of some articles and pictures involved belongs to the original author. The reprint of this site is for everyone to learn and exchange, and should not be used for any commercial activities.

2. This website does not assume any form of loss or injury caused by users to themselves and others due to the use of these resources.

3. For issues not covered in this statement, please refer to relevant national laws and regulations. In case of conflict between this statement and national laws and regulations, the national laws and regulations shall prevail.

4. If it infringes your legitimate rights and interests, please contact us in time, and we will delete the relevant content at the first time!

Contact: 010-60259772
E-mail: [email protected]