html / css适合所有屏幕分辨率

发布时间：2020-12-14 22:53:48 所属栏目：资源来源：网络整理

导读：我正在网站上工作,我试图让它对所有决议做出响应,但没有成功.. 这是HTML：这是css： body{ width:1920px; background-color: #f8e0b3; height:1080px;}div.container{width:100%;height:100%;}div.header{background:url(img/header.jpg);width:100%;height

我正在网站上工作,我试图让它对所有决议做出响应,但没有成功..
这是HTML：


这是css：

body
{
    width:1920px;
    background-color: #f8e0b3;
    height:1080px;
}
div.container
{
width:100%;
height:100%;
}
div.header
{
background:url(img/header.jpg);
width:100%;
height:46%;
    margin-top:;
    margin-left:;
    border-bottom: 2px solid black;
}
h1.naslov
{
    font-size:60px;
    color:white;
    margin:0 auto;
    margin-left:28%;
    font-family: Aramis;
}
p.naslov-text
{
font-size:40px;
color:#634ea9;
margin:0 auto;
width:1000px;
margin-top:0%;
margin-left:36%;
font-family: Aramis;
}

当我调整浏览器网站的大小时,不会调整大小.我整个上午一直在努力,我真的很倦怠.有谁知道采用什么逻辑来使这适合所有屏幕,但只使用CSS.


最佳答案
当您为您的身体和p.naslov文本提供固定宽度时,您的网站将不会调整大小.删除所有px大小,并用百分比值替换它们.
但是如果你想要固定大小并且还要响应,你必须使用这样的css媒体查询：

body
{
    width:1920px;
    background-color: #f8e0b3;
    height:1080px;
}

@media screen and (min-width: 500px) {
   body {
      width:420px;
   }
}

@media screen and (min-width: 800px) {
   body {
      width:720px;
   }
}


                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!