问题
I have a few divs on my code all of them positioned correctly how i want it. The only problem is that they do not re size when i shrink the page. I want to be able to re size them according to the web browsers size. I do not know exactly how to do it and im worried it might mess up their correct top & left position. All of my divs are currently set as absolute positioning.
回答1:
Set their sizes to percent values rather than pixels (I asume that's what you're using)
回答2:
Set all divs with percent values.
Or
You can use 'media rules' of css3:
@media screen and (max-width: 300px) {
.div-a {
background-color: lightblue;
}
}
回答3:
You have basically 3 options
- Bootstrap (http://getbootstrap.com/)
- Use percent values instead of pixels
- Use vh (view height) and vw (view width). Here's an example: http://jsfiddle.net/7m55nur1/
Note that width: 75vw; keeps the div width at 75% of the web browser. Same as margin-left: 12.5vw which keeps the margin on the left at 12.5% of the browser size.
回答4:
I figured it out, basically what i did what get the width (lets say it's 300 pixels) and figure out the percent of the page width (in my case is 1900 pixels). The result would be 15.789473684210526% putting that exact value worked just fine! As accurate as a pixel. I used this tool:
http://www.onlineconversion.com/percentcalc.htm
Thank you all for your replies!
来源：https://stackoverflow.com/questions/32216470/css-div-re-sizing-according-to-web-browser