Javascript uses onresize to enable the div to adapt the Code with the screen size. When we center p, there are two methods: Fixed left and right width, that is, absolute pixel positioning; the other method is to use percentages for relative positioning. in either of the two methods, absolute positioning cannot allow p to adapt to the screen, but with percentages, however, if the percentage is used, there will be a new problem.
When this statement is deleted, the percentage of the top statement will expire. However, when this statement is deleted, everything is normal and it is not clear why the standard statement is so inconvenient.
To solve this problem, I use the following method to implement p adaptive.
First, I use absolute positioning. First, set the left and right margins of p. Add two events to the body,
Getwah () is used to obtain the screen size and each margin of p, and calculate their difference.
The Code is as follows:
Var height, width, width_cha1, width_cha2;
Function getwah ()
{
If(document.doc umentElement & document.doc umentElement. clientWidth)
{D_width = document.doc umentElement. clientWidth ;}
Else if (document. body)
{D_width = document. body. clientWidth ;}
Width = parseInt (d_width );
Width_cha1 = width-parseInt (document. getElementById ("backi"). style. left)
Width_cha2 = width-parseInt (document. getElementById ("massage_box"). style. left)
}
When the screen size changes (onresize), the test () function is triggered. This function is used to reset the p margin based on the difference between the screen and the margin obtained previously, in this way, the margin of p will also change after the size of the Party's screen is changed, so that p can be adaptive as the screen size changes.
The Code is as follows:
Function test ()
{
If(document.doc umentElement & document.doc umentElement. clientWidth)
{D_width = document.doc umentElement. clientWidth ;}
Else if (document. body)
{D_width = document. body. clientWidth ;}
Var now_left1 = parseInt (d_width)-width_cha1;
Var now_left2 = parseInt (d_width)-width_cha2;
Document. getElementById ("backi"). style. left = now_left1
Document. getElementById ("massage_box"). style. left = now_left2
}