CSS-макет не работает на разных экранах?
Я хочу, чтобы сайт настраивал высоту и ширину, чтобы соответствовать любому экрану, я имею в виду, что он должен изменять размер в зависимости от размера экрана. Я сделал этот код, и он отлично выглядел на моем компьютере, но когда я открыл свой веб-сайт на своем рабочем компьютере с меньшим экраном, я увидел, что все на сайте не на своем месте, я имею в виду, что он испорчен.
код:
<html>
<head><title>overview</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<?php
@session_start();
if(isset($_SESSION ['id'])) {
print ("<div id='nav'><a href='logout.php'>logout</a></div>
<iframe src='mainpage.php' name='sidemenu' id='mp'></iframe>
<iframe src='sidemenu.php' name='mainpage' id='sm'></iframe>
<footer style='background: #4276A4;height: 38px;border: none;'</footer>
");
} else { echo "<meta http-equiv='refresh' content='0,login.php'>";}
?>
</body>
</html>
Код CSS:
@font-face {
font-family: "JF Flat Regular";
src: url('fonts/JF/JF-Flat-regular.eot');
src: url('fonts/JF/JF-Flat-regular.eot?#iefix') format('embedded-opentype'),
url('fonts/JF/JF-Flat-regular.svg#JF Flat Regular') format('svg'),
url('fonts/JF/JF-Flat-regular.woff') format('woff'),
url('fonts/JF/JF-Flat-regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#cmessage {
display:none;
}
#sr,#nw {
text-decoration:none;
}
.si {
background: #4276A4;
color: #D9D9D9;
font-size: 14px;
float: right;
font-weight: 900;
padding: 12px;
width: 239px;
text-align: right;
text-decoration: none;
border-bottom:1px solid rgba(255, 255, 255, 0.1);
font-family: "JF Flat Regular";
}
#b {
background: #4276A4;
}
.st {
background: #4276A4;
color: #D9D9D9;
font-size: 12px;
float: right;
font-weight: 900;
padding: 8px;
width: 239px;
text-align: right;
text-decoration: none;
font-family: "JF Flat Regular";
display:none;
}
.si:hover {
background: rgba(255, 255, 255, 0.06);}
.st:hover {
background: rgba(255, 255, 255, 0.06);}
#om {
display:none;
float: right;
padding: 8px;
width: 239px;
text-align: right;
}
#home {
background: #4276A4;
color: #D9D9D9;
font-size: 16px;
float: right;
font-weight: 900;
padding: 8px;
width: 239px;
text-align: right;
text-decoration: none;
font-family: "JF Flat Regular";
}
#nav {
width: 100%;
height: 38px;
background: #2D5F8B;
box-shadow: -10px 0px 20px -15px black;
}
html, body {
margin: 0;
padding: 0;
}
#mp {
height:92.3%;
width:86.5%;
border:2px dashed black;
border-right:none;
border-bottom:none;
margin:0;
padding: 0;
border-top:none;
}
#sm {
float:right;
height:95.5%;
width:13.4%;
border:none;
z-index:100;position:absolute;
}
.img {
height: 15px;
padding-left: 2px;
}
#login {
position: absolute;
top: 30%;
left: 50%;
width: 360px;
height: 340px;
margin: -100px 0 0 -100px;
background:rgba(66, 118, 164, 0.69);
box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.13);
}
.linput {
width: 300px;
height: 31;
text-align: right;
font-family: "JF Flat Regular";
padding-right: 30px;
border:none;
margin-left: 30px;
}
.sinput {
width: 300px;
height: 31;
text-align: right;
font-family: "JF Flat Regular";
padding-right: 30px;
border:none;
margin-left: 30px;
}
#form {
margin-top: 65px;}
.lbutton {
width:132px;
height:35px;
background-color:rgba(75, 141, 248, 0.85);
border:none;
color:white;
font-family: "JF Flat Regular";
margin-left: 121px;
margin-top: 25px;
position: absolute;
}
.lbutton:hover {
background-color:rgba(75, 141, 248, 0.31);}
.limg {
height: 15px;
padding-left: 2px;
margin-left: -25px;
}
#loginp {
font-family: "JF Flat Regular";
color: rgba(255, 255, 255, 0.93);
margin-top: 29px;
position: absolute;
margin-left: 135px;
}
#hrlogin {
margin-top: 61px;
color:rgba(255, 255, 255, 0.1);
}
#new {
font-family: "JF Flat Regular";
color: #FFF;
margin-top: -8px;
margin-left: 225px;
}
#nhref {
font-family: "JF Flat Regular";
color: #FFF;
margin-top: -41px;
margin-left: 125px;
position: absolute;
font-size: 12px;
}
#lger {
font-family: "JF Flat Regular";
color: #FFF;
margin-left: 907px;
margin-top: 100px;}
#signup {
display:none;
position: absolute;
top: 30%;
left: 50%;
width: 360px;
height: 340px;
margin: -100px 0 0 -100px;
background:rgba(66, 118, 164, 0.69);
box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.13);
border:none;
}
#back {
display:none;
}
#bb {}
#ibar {background-color: #E1D3D3;
color: #FFF;
font-family: "JF Flat Regular";
text-align: right;
padding-right: 25px;
font-size: 20px;
}
.orderform {
display: block;
width: 100%;
height: 34px;
padding: 3px 12px;
font-size: 14px;
line-height: 1.42857;
color: #555;
background-color: #FFF;
background-image: none;
border: 1px solid #CCC;
border-radius: 4px;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
font-family: "JF Flat Regular";
}
.orderform:focus {
border-color: #999;
outline: 0px none;
box-shadow: none;
}
Решение
Я не могу добавить комментарий. Так что отвечая на это.
Вы не сделали свой стиль, чтобы быть отзывчивым. Определите стили для разных размеров экрана.
Например:
@media (max-width: 1024px) and (max-height:768px) { //for screen with max-width 1024px apply this style
.banner {
width:100px;
height:150px;
}
}
@media (max-width: 880px) {//for screen with max-width 880px apply this style
.banner {
width: 60px;
height: 90px;
}
}
В приведенном выше коде к классу баннера применяются разные стили в зависимости от размера экрана.
или используйте Bootstrap для отзывчивости, как предложено @ User8889.
Другие решения
Других решений пока нет …