Writing in the front

We all know that page layouts are divided into static layouts and responsive layouts. Why are responsive layouts so popular? Because in the past, we used several sets of code to realize the page layout problem between different terminals. For example, suppose we make an APP or web application, then we have to face the problem of what terminal users use to access? If it’s a PC, we need to write it in a 960px-1204px layout, but what about if the user is using an iPad? 768-1024px, how about using a cell phone? What if you have an ipadmini or a pro or an air? When these problems all appear, we will find that our previous solutions to the problem can no longer meet the requirements of reality, what to do? Responsive layouts appear! So today we are not going to talk about how to implement responsive layout, when I conclude, I will write a detailed tutorial, today we will briefly talk about responsive layout image processing issues.

Schematic diagram

Let’s take a relatively large picture and a relatively small picture as an example. First, a relatively large picture, I use a bird’s eye view of my company’s address (I am in Binjiang, Hangzhou, like to make friends, if you are close to me, I will treat you, haha!) :

\

Let’s use a smaller image:

\

Let me start by saying how do we normally deal with it

We usually write a div or other element, and when we want to use an image as a background, we say something like this:

CSS source code:

.test1{
			height: 40rem;
			width: 30rem;
			background-image: url(img/slide3.png);
	}
Copy the code

H5 source code:

<div class="test1"></div>
Copy the code

Right? That’s the most common way to do it. What happens if you don’t do anything?

\

Picture deformation, of course, there are many times when the picture will appear distortion, so based on these problems, how can we deal with it simply:

First let’s do a few simple examples: implement an effect like this:

\

The mobile side achieves this effect:

\

Ok, to achieve this is basically to meet our needs, can be spread according to the size of their own definition at the same time the picture is not deformed, we look at the source code:

CSS source code:

div img{max-width: 100%;height: auto; }Copy the code

H5 source code:

<div id="" style="width: 5rem; height: 100%;">
			<img src="img/slide3.png" >
		</div>
		<div id="" style="width: 20rem; height: 100%;">
			<img src="img/slide3.png" >
		</div>
		<div id="" style="width: 35rem; height: 100%;">
			<img src="img/slide3.png" >
		</div>
		<div id="" style="width: 40rem; height: 40rem;">
			<img src="img/slide3.png" >
		</div>
Copy the code

Someone read the source code will say, this is not playing people? In fact, it is not, the simplest adaptation is such, this is also the simplest way to deal with, someone said, sometimes we need to be a LOGO is full is also ok, logo processing can be like this:

Suppose this is a logo:

\

It’s easy to do this:

CSS source code:

.logo{ display:block;
				width:100%;
				height:40px;
				text-indent:55rem;
				background-image: url(img/slide3.png);
				background-repeat:no-repeat;
				background-size:100% 100%;
        }
Copy the code

H5 source

<div class="logo" style="width: 7rem;"></div>
Copy the code

Here’s a quick explanation:

Background-size is a new cSS3 property that sets the size of the background image. There are two optional values: the first value specifies the width of the background image, and the second value specifies the height of the background image. If only one value is specified, the other value defaults to auto. background-size:cover; Background-size :contain; background-size:contain; Scale down the image to fit the size of the elementCopy the code

Matters needing attention

Here are a few things to pay attention to when using:

The first:

If your code looks like this:

<div id="" style="width: 5rem; height: 4rem;">
			<img src="img/slide3.png" >
		</div>
		<div id="" style="width: 20rem; height: 15rem;">
			<img src="img/slide3.png" >
		</div>
		<div id="" style="width: 35rem; height: 20rem;">
			<img src="img/slide3.png" >
		</div>
		<div id="" style="width: 40rem; height: 40rem;">
			<img src="img/slide3.png" >
		</div>
Copy the code

The effect would look like this:

\

You can see that the difference is that the space in the middle is bigger. Why is that? Because when we use the specific value + REM, it will display the layout space as big as that, so we have already set height to auto in the style, what does that mean? Is why CSS to ensure that the image will not be deformed, but also not distortion, can only scale the image, then scale means that there are some places will not appear the image, so can only be blank to fill! So how do you solve this problem? We can either not set the height, or we can set the height as a percentage!

The second:

When we use a smaller image, when we set a larger width, the image cannot be fully filled. For example:

<div id="" style="width: 5rem; height: 100%;">
			<img src="img/slide1.jpg" >
		</div>
		<div id="" style="width: 20rem; height: 100%;">
			<img src="img/slide1.jpg" >
		</div>
		<div id="" style="width: 35rem; height: 100%;">
			<img src="img/slide1.jpg" >
		</div>
		<div id="" style="width: 70rem; height: 40rem;">
			<img src="img/slide1.jpg" >
		</div>
Copy the code

Effect:

\

This is the previous smaller picture. Seriously, we can find that the width of our last picture is the same as the previous one, so it is not the same when we set it, we wrote the width of 70rem, why did this happen? Because when we set a value wider than the width of the original picture, the picture will appear distortion, in order to avoid such a situation, so it will show the size of the original picture, and not change very much!

Finally, for the use of REM we can take a look at this person’s blog:

How to use REM \

For details on the size of different terminals, check out this website:

Display of different terminal screen sizes \

Ok, today I wrote in a hurry, I may write some not very clear, what do not understand you can directly introduce the blogger QQ contact me, or directly scan my business card contact me, can help I try to help! Progress together!

Thanks for reading \

My business card:

\

\