html/css 以适应所有屏幕分辨率答案

【问题标题】：html/css to fit all screen resolutionhtml/css 以适应所有屏幕分辨率
【发布时间】：2014-04-07 11:26:11
【问题描述】：

我正在网站上工作，我正试图让它响应所有的决议，但没有成功..

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;
}

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

【问题讨论】：

请提供小提琴。在 h1 元素中，该类中有一些空格。我会删除它们
您正在设置主体的宽度和高度（以像素为单位）。这对于一般情况和应该响应的东西来说都很奇怪。
jsfiddle.net/Ta9ML
但是当我将 body 100% 100% 放入时，它会 100% 适合我的屏幕。我的屏幕是 1680 x 1050。我想让它适合 1920 x 1080 或更小。
我已经设法修复了宽度并且工作正常。但现在身高是个问题。高度 100% 是屏幕的高度 - 但是当我通过该高度并滚动显示高度 100% 时成为问题。有谁知道如何固定高度以调整大小？

标签： html css resolution

【解决方案1】：

当您为 body 和 p.naslov-text 提供固定宽度时，您的网站不会调整大小。删除所有 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;
   }
}

【讨论】：

【解决方案2】：

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"});
});

这样，您将尝试主类的宽度和高度。

【讨论】：

【解决方案3】：

你的身体有固定的宽度

【讨论】：

【解决方案4】：

从正文和 p.naslov-text 中删除宽度（以“px”为单位）。尽量给宽度：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;
}

【讨论】：

【解决方案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;
}

还可以尝试使用媒体查询来获得您想要的任何分辨率..

【讨论】：

【解决方案6】：

你好，你应该在你的 css 中使用@media screen，你应该使用 % 而不是 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;}
}

【讨论】：