Question

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

<body>
    <div class = "container">
        <div class = "header">
        <h1 class = " naslov "> Lorem ipsum nasov je? </h1>
        <p class = "naslov-text">
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit." 
        </p>
        </div>
    </div>
 </body>

这是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。

Answer 1

<强> CSS：

#gallery-1 img {
   width:375px;
}
@media screen and (min-width: 1366px) {
#gallery-1 img {width:375px;}
}
@media screen and (min-width: 1440px) {
#gallery-1 img {width:428px;}
}
@media screen and (min-width: 1600px) {
#gallery-1 img {width:434px;}
}
@media screen and (min-width: 1920px) {
#gallery-1 img {width:540px;}
}

参考： Stack Over Flow

<强> JQUERY：

使用jquery调整大小窗口。这是用于所有浏览器的窗口大小调整的动态代码。

Example code here using jquery:

$(document).ready(function(){
    $(window).resize();
});
$(window).resize(function{
    // your code
    var windowWidth=$(window).width();
    var mainContainerWidth=windowWidth-100; // For example
    $("#yourMainContainer").css({"width":mainContainerWidth+"px"});
});

就像那样你会尝试你的主类宽度和高度。

Answer 2

当您为身体和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;
   }
}

Answer 3

你的身体有一个固定的宽度

Answer 4

从正文和p.naslov文本中删除宽度（在＆＃34; px＆＃34;中）。尝试给出宽度：100％;获得响应式布局Fiddle

<强> CSS：

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

p.naslov-text {
    font-size:40px;
    color:#634ea9;
    margin:0 auto;
    margin-top:0%;
    margin-left:36%;
    font-family: Aramis;
}

Answer 5

希望这会有所帮助..

FIDDLE

<强> CSS

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

还尝试将媒体查询用于您想要的任何分辨率。

Answer 6

你好你应该在你的CSS中使用@media屏幕，你应该使用％而不是px。

@media screen and (min-width: 1366px) {
#gallery-1 img {width:375px;}
}
@media screen and (min-width: 1440px) {
#gallery-1 img {width:428px;}
}
@media screen and (min-width: 1600px) {
#gallery-1 img {width:434px;}
}
@media screen and (min-width: 1920px) {
#gallery-1 img {width:540px;}
}

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

6 个答案: