Question

我需要帮助自动扩展在css中完成的渐变。就像，如果我用我的手机进入我的网站，它会自动调整到它。实际上，该网站并没有很好地自动适应浏览器：它在我的电脑上使用谷歌浏览器，但它不在其他浏览器或设备中。

<html>
  <link rel="stylesheet" type="text/css" href="main.css" />
<script language="JavaScript">

<!--
function autoResize(id){
    var newheight;
    var newwidth;

    if(document.getElementById){
        newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
        newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
    }

    document.getElementById(id).height= (newheight) + "px";
    document.getElementById(id).width= (newwidth) + "px";
}
//-->
</script>

<body>

   <div id="wrapper">

         <div id="content">
             <iframe src="http://www.9gag.com" width="800px" height="400px" name="CHANGETHIS" id="CHANGETHIS" marginheight="0" frameborder="0" onLoad="autoResize('CHANGETHIS');"></iframe>     
<H1>HOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLA</H1>

         </div>

   </div> <!-- End Wrapper -->   
</body>
</html>

的CSS：

* { padding: 0; margin: 0; }

html, body {
background-repeat: no-repeat;
min-height: 100%
height: 100%;
margin: 0;
padding: 0;
}
body {
       background-repeat: no-repeat;
        min-height: 100%
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
        background-size: cover;
    background-image: -webkit-gradient(
    linear,
    left top,
    right bottom,
    color-stop(0.07, #59BFFF),
    color-stop(1, #000000)
);
background-image: -o-linear-gradient(right bottom, #59BFFF 7%, #000000 100%);
background-image: -moz-linear-gradient(right bottom, #59BFFF 7%, #000000 100%);
background-image: -webkit-linear-gradient(right bottom, #59BFFF 7%, #000000 100%);
background-image: -ms-linear-gradient(right bottom, #59BFFF 7%, #000000 100%);
background-image: linear-gradient(to right bottom, #59BFFF 7%, #000000 100%);

}

#wrapper { 
    width: 70%;
    margin: 0 auto;
    background-color:transparent;
    word-wrap: break-word;
    height: 100%;
}
 background-color:Red;
}

#content {
 background: Yellow;
}

FIX：

为这一个替换以前的CSS：

* { padding: 0; margin: 0; }

html, body {
background-repeat: no-repeat;
min-height: 100%;
margin: 0;
padding: 0;
}
body {
       background-repeat: no-repeat;
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
        background-size: cover;
    background-image: -webkit-gradient(
    linear,
    left top,
    right bottom,
    color-stop(0.07, #59BFFF),
    color-stop(1, #000000)
);
background-image: -o-linear-gradient(right bottom, #59BFFF 7%, #000000 100%);
background-image: -moz-linear-gradient(right bottom, #59BFFF 7%, #000000 100%);
background-image: -webkit-linear-gradient(right bottom, #59BFFF 7%, #000000 100%);
background-image: -ms-linear-gradient(right bottom, #59BFFF 7%, #000000 100%);
background-image: linear-gradient(to right bottom, #59BFFF 7%, #000000 100%);

}

#wrapper { 
    height:80%;
    width:80%;
    width:700px;
    margin: 0 auto;
    background-color:transparent;
    word-wrap: break-word;
}
 background-color:Red;
}

#content {
 background: Yellow;
}

{}{}{}{}{}{}

Answer 1

你真的需要研究css媒体查询：您可以为每种屏幕尺寸（或其他媒体）指定不同的设置

对于您的iframe，您只需将其设置为＆＃39; width = 100％＆＃39;它将填补＆＃39; #content＆＃39;

的宽度

例如：

@media screen and (max-width:320px){
    #wrapper {
        /*
         * css gradient here
         */
    }
    #content{
        margin:0 auto;
        max-width:300px;
    }
}

@media screen and (min-width:321px) and (max-width:1024px){
    #wrapper {
        /*
         * css gradient here
         */
    }
    #content{
        margin:0 auto;
        max-width:1000px;
    }
}

这是一个开始的好地方： http://css-tricks.com/css-media-queries/

要有一个位于iframe后面的渐变，并填充“可查看区域”的宽度和高度。然后你需要用你的标记做这样的事情：

<body>
    <div id="wrapper"></div>
    <div id="content">
        iframe goes here
    </div>
</body>

并将#wrapper元素和#content元素的css更改为：

#wrapper {
    background: linear-gradient(red, blue);
    left: 0;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    top: 0;
    z-index: 9;
}
#content{
    position: relative;
    z-index: 10;
}

以下是概念验证：http://jsfiddle.net/aa7vJ/

Answer 2

使您的网站适应设备。首先，您需要在文档头中使用视口元标记

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

这会阻止设备缩放内容。

接下来，您需要以％而非像素指定所有css宽度（您可以将其与最大宽度组合）

#mainWrapper{
    width:80%;
    max-width:1200px;
}

如果你有一些需要在px中的元素，你可以使用mediaqueries为不同的显示指定不同的值。

关于CSS渐变：渐变将总是占用您指定的元素的整个大小。您可以通过使用css玩背景位置和背景附件来更改此功能（不太确定）

这是一个很好的CSS渐变生成器，可以为所有浏览器生成代码：

http://www.colorzilla.com/gradient-editor/

如何扩展css渐变？

2 个答案: