Talking about, Bootstrap, responsive website

1 What is a responsive website?

I just entered the company, the project manager gave me a page let me do

　　

I see the first request on the head, what is bootstrap?? I do not know, what is the response type support??? Do not know, to is the last CSS and JS and page separation,

Project manager asked me what I do not know, feel very worried, will not because this kicked me, hehe, but luck is good, the project manager just let me put this knowledge to fill,

What if there is a problem?? Baidu a bit, this is my first thought, and then went to check,

　　

Bootstrap: Front-end frame, some good effect, the inside of the various plug-ins very well, you can directly take to use

I went to bootstrap a few versions of the Chinese network, I do not know which file to do what

　　　

Just look at some of the explanations on the bootstrap Chinese web.

I went inside and looked at it.

There are many explanations, and now I have made a response to the page, we have the opportunity to guide the younger brother a ah

2. Response type

I'm using @media to get the screen width to handle, for example, to turn the screen background color red to less than 800px

① now in HTML add a screen width = device width description

　　　　　　　　<meta name="viewport" content="width=device-width, initial-scale=1">

② in CSS style

@media screen and (max-width:800px) {

body{

background:red;

}

}

Processing when the above represents less than a few pixels

One is less than how many pixels and is greater than how many pixels to perform processing

@media screen (max-width:800px) and {min-width:700px} {

body{

background:red;

}

}

is to get screen pixels by @media, and to handle some effects or layouts when you specify less or greater than a few pixels.

This can be done on different devices by acquiring the screen width of different devices to do the corresponding processing, to achieve different display of multiple devices

Effect to achieve a better user experience.

And in response, in the outermost div plus a

width:50%; min-width:700px;

On the screen to reach the condition of scaling is after, will suddenly zoom, personally feel very good, hehe

　　　　　　

Good as the front-end of the new, I hope you have a lot of attention, this document belongs to personal opinion, do not wash do not spray!!!

Talking about, Bootstrap, responsive website