How Do Make My Website Resize Automatically When the Screen Resolution Changes

Auto resize content to fit screen based on monitor resolution

I think the best way to handle this would be to use the VW and VH properties, or convert every height parameter to percentages so that everything (even the fonts) resize, when changing the scale of the window. If you do proceed with adding even height in percentages then make sure to have the body and all the underlaying children set with a specific height.

For example setting everything on a percentage in height will result into the following: https://jsfiddle.net/y1kbz5r0/2/ (further edits to the height and what not is required).

Alternatively you could also work with media queries to enlarge certain sizes everything above 1080px in height, like:

@media screen and (min-height:1080px){
    //CSS code here
}

Edit: Further changes to the MediaQuery and with usage of VH can be seen here: https://jsfiddle.net/y1kbz5r0/4/

I hope this will provide you with enough information to proceed with this. If not feel free to ask for further information.

Edit: Worked out version as per your requirements:

<!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta name="robots" content="noindex, nofollow"><meta name="googlebot" content="noindex, nofollow"><link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css"><style type="text/css">html,body{ height:100%; width:100%}body{ background-color:#5C67B6; margin:auto; position:relative; padding-top:10%;}header{ margin:auto; padding:2vh 0; text-align:center; color:#fff;}.container{ margin:auto; height:70%;}.card-deck{ margin:auto;}.card{ margin:1rem; min-width:20rem!important; width:30vw; font-size:1.2em}.card-inverse{ background-color:#333;  border-color:#333;}.buybutton{text-align:center!important}@media screen and (min-height:1000px){ body{  font-size:1.7vh } h2{font-size:3vh} h3{font-size:2.6vh} h4{font-size:2.2vh} .card,.card-inverse{  width:33vw!important; } .container{  display:flex;  height:auto;  width:100%;  margin:auto;  align-items:center;  justify-content:center; } .card-block{  padding:1.6vh; } .card-deck{  border-spacing:1.75vh 0; } .list-group-item{  padding:1vh 1.65vh; }}</style></head><body> <header>  <h2>Premium Offers</h2>  <h4>Choose your Plan</h4> </header><!--Container--> <div class="container">  <div class="card-deck">   <!--Card One-->   <div class="card">    <div class="card-block">     <h3 class="card-title">Turbo</h3>     <p class="card-text">If Turbo isn't enough for you,      <br> you can upgrade to Turbo Plus.      <br>      <br>If you want to <strong>ALWAYS</strong> be ahead of competing servers, this is for you.</p>    </div>    <div class="card-inverse">     <ul class="list-group list-group-flush">      <li class="list-group-item">Highlighted Server!</li>      <li class="list-group-item">Always visible!</li>      <li class="list-group-item">Special Support</li>      <li class="list-group-item">Turbo Plus role on our server</li>      <li class="list-group-item">Turbo Plus Badge</li>      <a href="#" class="list-group-item active buybutton">Buy Turbo Plus</a>     </ul>    </div>   </div>   <!--Card Two-->   <div class="card card-inverse">    <div class="card-block">     <h3 class="card-title">Turbo Plus</h3>     <p class="card-text">If Turbo isn't enough for you,      <br> you can upgrade to Turbo Plus.      <br>      <br>If you want to <strong>ALWAYS</strong> be ahead of competing servers, this is for you.</p>    </div>    <div class="card-inverse">     <ul class="list-group list-group-flush">      <li class="list-group-item">Highlighted Server!</li>      <li class="list-group-item">Always visible!</li>      <li class="list-group-item">Special Support</li>      <li class="list-group-item">Turbo Plus role on our server</li>      <li class="list-group-item">Turbo Plus Badge</li>      <a href="#" class="list-group-item active buybutton">Buy Turbo Plus</a>     </ul>    </div>   </div>  </div> </div></body></html>

How do I make my website change size for different screen sizes?

Please go with RWD (Responsive Web Design) approach using CSS3 media queries.

Media query:
Media query is a CSS technique introduced in CSS3.
It uses the @media rule to include a block of CSS properties only if a certain condition is true.

Syntax
@media (min-width: 700px) { ... }

Reference :
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Responsive frameworks :

There are some frameworks that can be used for creating RWD.

Twitter Bootstrap http://getbootstrap.com/2.3.2/
Foundation http://foundation.zurb.com/
Skeleton http://getskeleton.com/

auto resizing web page according-to-screen-resolution

You should look at how frameworks like Bootstrap handle this. They re-size elements and even adjust the flow of the page dynamically to make everything fit.

http://getbootstrap.com/

In particular the resizing, gridding etc and mobile first approach might be interesting for you:

http://getbootstrap.com/css/#overview

You will be better off using a framework like this (there are plenty of alternatives too) rather than trying to recreate it yourself.

Automatically resize images with browser size using CSS

To make the images flexible, simply add max-width:100% and
height:auto. Image max-width:100% and height:auto works in IE7,
but not in IE8 (yes, another weird IE bug). To fix this, you need to
add width:auto\9 for IE8.

source:
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

for example :

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

and then any images you add simply using the img tag will be flexible

JSFiddle example here. No JavaScript required. Works in latest versions of Chrome, Firefox and IE (which is all I've tested).

Monitor resolution changes look of website

If you don't want the width to change with resolution/browser size, then use absolute widths in your CSS as opposed to percentages (860px as opposed to 90%).

However if it looks different in someone elses browser, it could be because of their font and font size being different.

resize html website for different screen resolutions

You should use heigh / width in percentage(%) rather px / em. change the css file.

How can I create HTML pages that automatically adjust their images to different mobile screen sizes?

If the pages you're talking about literally just contain text and images, then I think all you need to do in each HTML page is this:

Add this viewport meta tag inside the <head> tag:
```
<meta name="viewport" content="width=device-width">
```
This should make the page render at a reasonable size.
Add this <style> tag inside the <head> tag:
```
<style>
img {
    max-width: 100%;
}
</style>
```
I think this will make sure all images don't render any wider than the app's webview's viewport.
(If that doesn't work, try width: 100%; instead. That'll definitely make all images be as wide as the viewport, and therefore no wider.)

However, your question is a bit too general: we could end up writing a book covering all the possibilities. Could you make it more specific to the code you're actually working on?