我需要有关自动扩展在 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;
}
修复:
为这个替换之前的 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;
}
{}{}{}{}{}{}
最佳答案
使您的网站适应设备。你首先需要在你的文档头部有一个视口(viewport)元标签
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
这将防止设备缩放内容。
接下来您需要以百分比而不是像素指定所有 css 宽度(您可以将其与最大宽度结合使用)
#mainWrapper{
width:80%;
max-width:1200px;
}
如果您有一些元素需要以 px 为单位，您可以使用媒体查询为不同的显示指定不同的值。
关于 CSS 渐变:渐变将始终占据您为其分配的元素的整个大小。您可以通过 background-position 和 background-attachment with css 来改变这一点(对此不太确定)
这是一个很好的 CSS 渐变生成器，可以为所有浏览器生成代码:
关于html - 如何扩展css渐变？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23413254/