The following code on the site PC display is normal, but the phone open is not normal, how can improve let him programming under adaptive, bosses thanks

Mobile phone display

 
& lt; style> 
@charset "utf-8"; 
CSS Document/* */

Body {
background-color:#FFFFFF; 
} 

Div. __01 {
margin:0 auto; 
width:960px; 
Height: 1203 px; 
} 

Div. Baihe - 01 _ {
float:left; 
Background: url (baihe_01. PNG); 
width:960px; 
height:110px; 
} 

Div. Baihe - 02 _ {
float:left; 
Background: url (baihe_02. PNG); 
width:960px; 
Height: 361 px; 
} 

Div. Baihe - 03 _ {
float:left; 
Background: url (baihe_03. PNG); 
width:960px; 
Height: 503 px; 
} 

Div. Baihe - 04 _ {
float:left; 
Background: url (baihe_04. PNG); 
width:960px; 
Height: 226 px; 
} 

Div. Baihe - 05 _ {
float:left; 
Background: url (baihe_05. PNG); 
width:960px; 
height:3px; 
} 
& lt;/style> 
& lt; Div id="baihe_ID" & gt; 
& lt; Div & gt; & lt;/div> 
& lt; Div & gt; & lt;/div> 
& lt; Div & gt; & lt;/div> 
& lt; Div & gt; & lt;/div> 
& lt; Div & gt; & lt;/div> 
& lt;/div> 

CodePudding user response:

Two different device resolution
The media query two sets of code

CodePudding user response:

The

reference 1 floor console. The log () response:

two different device resolution
Media query two sets of code

So what do I want to change to normal! ~ ~ ~

CodePudding user response:

refer to the second floor misha design response:

Quote: reference 1 floor console. The log () response:

Two different device resolution
Media query two sets of code

So what do I want to change to normal! ~ ~ ~

In writing a set of adapter handsets resolution CSS code

CodePudding user response:

Went to the novice tutorial to see how to use a CSS media queries

CodePudding user response:

1. According to your writing now, want to apply the mobile end will add style, like this, for example, write your dead width and height under different screen writing again

 
/* * phone end/
@ media (min - width: 480 px) and (Max - width: 767 px) {
Div. _01 {
. 
} 
. 
} 

/* tablets */
@ media (min - width: 768 px) and (Max - width: 979 px) {
Div. _01 {
. 
} 
. 
} 

/* */PC 
@ media (min - width: 980 px) {
Div. _01 {
. 
} 
. 
} 

2. Now the elastic layout, fluid layout is fine, using the grid doesn't have to write every time width

CodePudding user response:

reference 5 floor xiaoxiang dream reply:

1. According to your writing now, will add style to apply mobile terminal, such as the following, write your dead width and height under different screen writing again

 
/* * phone end/
@ media (min - width: 480 px) and (Max - width: 767 px) {
Div. _01 {
. 
} 
. 
} 

/* tablets */
@ media (min - width: 768 px) and (Max - width: 979 px) {
Div. _01 {
. 
} 
. 
} 

/* */PC 
@ media (min - width: 980 px) {
Div. _01 {
. 
} 
. 
} 

2. Now the elastic layout, fluid layout is fine, using the grid doesn't have to write every time dead width

delete, how to write, have a case

CodePudding user response:

Gradually with rem directly as a unit,

CodePudding user response:

I do a lot of this case, the simplest is to use the flex layout, don't need any other external files, but I also want to like do mobile terminal and the PC with the bootstrap adaptive, you can go to take a look at https://www.runoob.com/bootstrap/bootstrap-grid-system.html

CodePudding user response:

A two CSS and HTML when resolution does not invoke different CSS at the same time

CodePudding user response:

The Bootstrap framework of grid layout, flex layout, fluid layout (percentage) layout, media query + rem etc all can be achieved

CodePudding user response:

Rem as the unit

CodePudding user response:

Baidu CSS media queries, according to the different styles of different resolution to write code

CodePudding user response:

reference 3 floor console. The log () response:

Quote: refer to the second floor misha design response:

The

Quote: reference 1 floor console. The log () response:

Two different device resolution
Media query two sets of code

So what do I want to change to normal! ~ ~ ~

Resolution in writing a set of adapter handsets to the CSS code

This is real

CodePudding user response:

reference misha design of the building Lord reply:

the following code on the site PC display is normal, but the phone open is not normal, how can improve let him programming under adaptive, bosses thanks

Mobile phone display

 
& lt; style> 
@charset "utf-8"; 
CSS Document/* */

Body {
background-color:#FFFFFF; 
} 

Div. __01 {
margin:0 auto; 
width:960px; 
Height: 1203 px; 
} 

Div. Baihe - 01 _ {
float:left; 
Background: url (baihe_01. PNG); 
width:960px; 
height:110px; 
} 

Div. Baihe - 02 _ {
float:left; 
Background: url (baihe_02. PNG); 
width:960px; 
Height: 361 px; 
} 

Div. Baihe - 03 _ {
float:left; 
Background: url (baihe_03. PNG); 
nullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnull