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

前端之家收集整理的这篇文章主要介绍了html / css适合所有屏幕分辨率前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我正在网站上工作,我试图让它对所有决议做出响应,但没有成功..
这是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;
   }
}

猜你在找的HTML相关文章