When developing a web page on a PC with a 1366 * 768 resolution, I encountered issues with layout distortion when viewed on a 1920*1080 resolution screen. How can CSS be managed to ensure consistent display across PCs with varying resolutions?
<html>
<head>
<title>About US..</title>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/about.js"></script>
<link rel="shortcut icon" href="img/favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/about.css">
</head>
<body>
<div class="main">
<div class="header">
<div class="header1">
</div>
<div class="left">
</div>
<a href="index.html"><div class="left1">
</div></a>
<div class="left2">
In a Nut Shell..
</div>
<a href="about.html" id="left1a"><div class="left3">
About Us
</div></a>
<a href="contact.html" id="left1b"><div class="left4">
Contact Us
</div></a>
</div>
<div class="content">
Meet developers Of "In a Nut Shell.."<br>
...
</div>
</div>
...
<body{
background: #BDBDBD;
}
...
and CSS:
body{
background: #BDBDBD;
}
...
.sumeghadetail #banner a{
font-family:Lucida Handwriting;
text-decoration: none;
color: white;
}