繁体   English   中英

Вроде прописал адаптивность, но все равно как-то не работает? [关闭]

[英]Вроде прописал адаптивность, но все равно как-то не работает? [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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM