Using onresize to enable the div to adapt to the screen size _ javascript skills

Source: Internet
Author: User
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
}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.