Does anyone know how to make a website compatible with different computer screen resolutions?

Question

Hello

Please read what I am asking very carefully before answering my question. I know how to work with HTML, and CSS to create different layouts, for websites by using different web browsers, but I am not sure how to create layouts, for different computer screen resolutions. In other words, if I create a website it looks okay with one computer screen resolution, but if I change my computer screen resolution it does not look good. I think there might be some css code that does not change the layout of a website by using different computer screen resolutions. If anyone knows what kind of code should be used, please let me know, or if you know of any good websites that has a good answer to my question, please let me know the name of the website. Below is my css code, for my website. I hope my problem is CSS related. If you can test my css code, and let me know what you think, then i would appreciate it. If you need my html code to find an answer, please let me know, and then I will think of another option to post all of my code. Below is my css code. Thank You, for answering my question.

CSS

/* Google Chrome and Safari */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
html {
background: #ccffff;
}
body {
overflow:hidden;
}
#wrapper {
display:block;
width:90%;
border: 0px #000000 solid;
margin: 0px auto;
background: #ccffff;
color: #000000;
}
a {
outline: none;
color: #000066;
text-decoration: none;
}
a:hover {
color: #0066ff;
text-decoration: none;
}
#title {
float:left;
position:relative;
width:73%;
left:115px;
top:-7px;
}
#menu {
float:left;
position:relative;
width:72.8%;
left:115px;
top:-7px;
text-align:center;
border: 2px #000000 solid;
word-spacing:20px;
}
p {
font-size:15px;
float:right;
width:73.5%;
text-align:left;
position:relative;
color: #000000;
left:-127px;
top:40px;
}
#table {
font-size:15px;
float:right;
width:75%;
text-align:center;
position:relative;
left:15px;
top:150px;
margin-left:auto;
margin-right:auto;
}
#list {
font-size:15px;
float:right;
width:75%;
text-align:left;
position:relative;
left:-125px;
top:10px;
}
#picture {
margin-left:auto;
margin-right:auto;
width:32%;
left:65px;
top:15px;
position:relative;
}
#texteditor {
float:left;
width:32%;
left:115px;
top:90px;
position:relative;
}
#linuxterminal {
float:right;
width:32%;
left:-257px;
top:90px;
position:relative;
}
#domainname {
float:right;
width:32%;
left:278px;
top:90px;
position:relative;
}
}
/* Firefox */
@-moz-document url-prefix()
{
html {
background: #ccffff;
}
body {
overflow:hidden;
}
#wrapper {
display:block;
width:90%;
border: 0px #000000 solid;
margin: 0px auto;
background: #ccffff;
color: #000000;
}
a {
outline: none;
color: #000066;
text-decoration: none;
}
a:hover {
color: #0066ff;
text-decoration: none;
}
#title {
float:left;
position:relative;
width:73%;
left:115px;
top:-7px;
}
#menu {
float:left;
position:relative;
width:72.8%;
left:115px;
top:-7px;
text-align:center;
border: 2px #000000 solid;
}
p {
font-size:15px;
float:right;
width:73.5%;
text-align:left;
position:relative;
color: #000000;
left:-127px;
top:40px;
}
#table {
font-size:15px;
float:right;
width:75%;
text-align:center;
position:relative;
left:-25px;
top:150px;
margin-left:auto;
margin-right:auto;
}
#list {
font-size:15px;
float:right;
width:75%;
text-align:left;
position:relative;
left:-125px;
top:10px;
}
#picture {
margin-left:auto;
margin-right:auto;
width:32%;
left:65px;
top:15px;
position:relative;
}
#texteditor {
float:left;
width:32%;
left:115px;
top:90px;
position:relative;
}
#linuxterminal {
float:right;
width:32%;
left:-257px;
top:90px;
position:relative;
}
#domainname {
float:right;
width:32%;
left:278px;
top:90px;
position:relative;
}
}

Answer 1

There are several ways to do this, but probably the most straight forward way to there from where you are now (and since you prefer a css solution) is to use css to do the job. What you will want to do is have more than one stylesheet for your application and the most appropriate stylesheet will be more or less injected into the application at run time. Mobile devices can get a stylesheet specifically set up for mobile devices.



http://css-tricks.com/resolution-specific-stylesheets/



Another way is to use JQuery to keep track of the width and height of the current window and each time it changes adjust your layout. You can use KnockoutJS to bind dynamically changing width and height properties to each of the elements you want to adjust. You might find yourself using a lot of "float-left" properties to get your divs to automatically stack on top of one another when the width gets smaller.



I prefer a combination of these elements where they make sense.

Answer 2

The google term you are looking for is referred to as "Responsive Design". People used to set the website to say 800px wide or 1024px wide, but these days people have small screens like phones and retina display macs, so the need to use responsive designs have really become important.

Answer 3

Here goto this link:

http://khuntronak.blogspot.com/2013/12/how-to-fixsolve-screen-resolution.html



It shows solution using very simple step with complete code.

it will definitely work.