如何调整内容以自动适合屏幕尺寸？

Question

I have an requirement that an application(HTML, CSS and Javascript) should adjust automatically to screen window size - from laptops, to desktops to tablets. Does anyone know how can this be done?

Answer 1

You need to study Responsive Design. But I'll tell you the big key: media queries.

With CSS like this

@media only screen and (max-width: 500px) {
  #mydiv {
    width: 80%;
  }
}

@media only screen and (min-width: 501px) {
  #mydiv {
    width: 50%;
  }
}

you can do all you need. In fact, for some screen sizes you can set #menu1 to display:none, and #menu2 to display:block, and thereby show entirely different layouts dynamically based on the screen size.

Try this link for a very minimal example you can play with http://www.w3schools.com/css/tryit.asp?filename=tryresponsive_breakpoints