logo标签列表

HTML/CSS适应所有屏幕分辨率

htmlcssresolution
6

我正在开发一个网站，尝试使其适应所有分辨率，但一直没有成功。

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来让它适应所有屏幕吗？

请提供一个 Fiddle。在 h1 元素中，类名中有一些空格。我会将它们删除。 - Michael Schmidt
1
你正在以像素为单位设置body的宽度和高度。这在一般情况下都很奇怪，尤其是对于应该具有响应性的内容来说更是如此。 - pethel
http://jsfiddle.net/Ta9ML/ - KesaVan
但是当我将body设置为100% 100%时，它就可以完全适应我的屏幕。而我的屏幕分辨率是1680 x 1050。我想让它适应1920 x 1080及更小的分辨率。 - user3477366
我已经成功地解决了宽度问题。但现在高度是个问题。高度100%是屏幕的高度 - 但当我滚动时，高度100%就成了问题。有人知道如何修复高度以适应调整大小吗？ - user3477366
6个回答
3

由于您为 body 和 p.naslov-text 设置了固定宽度，因此您的网站不会自适应大小。请移除所有像素尺寸并将它们替换为百分比值。

但是，如果您希望具有固定尺寸并且响应式，请使用以下方式的 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调整窗口大小。以下是适用于所有浏览器的动态窗口调整代码。

这里是使用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"});
});

就像这样，您可以尝试设置主类的宽度和高度。

0

从body和p.naslov-text中删除宽度（以“px”为单位）。尝试使用width：100％来获得响应式布局{{link1：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;
}
0
希望这可以帮到你。

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

同时尝试使用媒体查询来适配任何分辨率...

0
你好，你应该在你的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;}
}
0

你的页面主体有固定宽度

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接