[英]Вроде прописал адаптивность, но все равно как-то не работает? [closed]
它似乎具有规定的适应性,但仍然不知何故不起作用? 如何规定网站的正确改编? 在js中,我好像规定了适应性,我觉得可以给css加点东西?
Вроде прописал адаптивность, но все равно как-то не работает? Как прописать правильно адаптацию сайта? В js вроде прописал адаптивность, думаю может в css что-то дописать?
CSS
* {
margin: 0;
padding: 0;
outline: none;
}
body {
width: 100%;
height: 100%;
background: url('../img/fon.png') no-repeat center center;
background-attachment: fixed;
background-size: cover;
background-blend-mode: multiply;
text-align: center;
color: #fff;
text-align: center;
}
.chart {
margin-top: 20px;
width: 100%;
height: auto;
}
.general {
margin-top: -240px;
margin-left: 70px;
color: #fff;
position: relative;
}
.block-1 {
margin-left: -1190px;
margin-top: -250px;
filter: brightness(60%);
}
.block-2 {
margin-left: 1180px;
margin-top: -235px;
filter: brightness(60%);
}
.general-2 {
margin-left: 1220px;
margin-top: -190px;
color: white;
position: relative;
}
#happy {
margin-left: 1200px;
margin-top: 20px;
font-weight: 700;
}
#pro {
margin-top: 10px;
margin-left: -1250px;
color: white;
font-weight: 700;
font-size: large;
}
#work {
margin-top: 140px;
padding: 7px 110px;
border-radius: 5px;
border: 0;
font-size: 14px;
cursor: pointer;
color: white;
transition: background 600ms ease;
background: url('../img/wp.JPG');
}
#work:hover {
background: url('../img/wp.jfif')
}
.block-news {
margin-top: 40px;
position: relative;
}
.news-fon {
margin-top: -240px;
}
.block-ns {
margin-top: 0px;
margin-left: 280px;
}
#buttonsleft {
border-radius: 5px;
display: block;
margin-left: -1250px;
margin-top: -320px;
position: relative;
}
#buttonsright {
border-radius: 5px;
display: block;
margin-left: 1250px;
margin-top: -300px;
position: relative;
}
.btn1, .btn2, .btn3, .btn4, .btn5, .btn6, .btn7, .btn8 {
border-radius: 10px;
border: 0;
font-size: 14px;
transition: background 600ms ease;
background: url(../img/btn.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: white;
height: 60px;
width: 180px;
position: relative;
}
.btn1:hover, .btn2:hover, .btn3:hover, .btn4:hover, .btn5:hover, .btn6:hover, .btn7:hover, .btn8:hover {
background: #2c2a2a;
}
JS
window.addEventListener("resize", AutoScale);
AutoScale();
function AutoScale()
{
let width = window.innerWidth;
if(width > 1280)
{
ChangeScale("big");
}
else if(width <= 1280 && width > 720)
{
ChangeScale("normal");
}
else if(width < 720)
{
ChangeScale("small");
}
}
document.getElementsByName("write")[0].onclick = function(){window.location.href='about.html'}
document.getElementsByName("meet")[0].onclick = function(){window.location.href='meeting.html'}
document.getElementsByName("task")[0].onclick = function(){window.location.href='task.html'}
document.getElementsByName("contracts")[0].onclick = function(){window.location.href='contracts.html'}
document.getElementsByName("analytics")[0].onclick = function(){window.location.href='analytics.html'}
document.getElementsByName("osn")[0].onclick = function(){window.location.href='osn.html'}
document.getElementsByName("osz")[0].onclick = function(){window.location.href='osz.html'}
document.getElementsByName("pto")[0].onclick = function(){window.location.href='pto.html'}
document.getElementsByName("depart")[0].onclick = function(){window.location.href='depart.html'}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.