Resizing content with different screen sizes?
Question
I am trying to make a single page website. I have a different container for each section which has a height of 100vh so the container resizes for different screens but the content does not which makes the website go all awry on small screens. How do I make the content resize as well with the container.
2 answers
solution1
0 2016-05-28 03:53:36
Maybe this can help
<HTML>
<HEAD>
<style>
.resizer{
min-width:700px;
margin-left:10px;
overflow:hidden;
}
</style>
</HEAD>
<BODY>
<div class='resizer'>
YOUR CONTENT goes here
</div>
</BODY>
</HTML>
You may also want to look at CSS: Auto resize div to fit container width
solution2
0 2016-05-28 03:54:04
The easiest thing you could do is go for a HTML5 responsive framework such as Bootstrap or use CSS media queries like shown here (or see below for quick example). Other than that it would probably involve javascript with similar end result to the aforementioned two ways.
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.