防止CSS从窄屏幕
问题描述：
我打算实施为背景，以我的网页下面星尘效果上走样星尘效果：http://codepen.io/PiotrBerebecki/pen/aBbmgW防止CSS从窄屏幕
是我遇到的问题是，当浏览器的宽度窗口低于700像素的星尘效果的光线会失真，如下图所示：
你知道是什么原因造成的扭曲的形状，以及如何解决它？
HTML：
<ul class="starbust-wheel">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
CSS：
body {
padding: 0;
margin: 0;
background: #03a9f4;
}
.starbust-wheel {
list-style: none;
margin: 0;
padding: 0;
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.starbust-wheel > li {
position: absolute;
top: 50%;
left: 50%;
width: 50%;
height: 50%;
padding: 0;
margin: 0;
transform-origin: 0 0;
}
.starbust-wheel > li:nth-child(odd) {
background-image: linear-gradient(-197deg, rgba(255, 255, 255, 0.4) 5%, transparent 25%);
}
.starbust-wheel > li:nth-child(1) {
transform: rotate(18deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(2) {
transform: rotate(36deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(3) {
transform: rotate(54deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(4) {
transform: rotate(72deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(5) {
transform: rotate(90deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(6) {
transform: rotate(108deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(7) {
transform: rotate(126deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(8) {
transform: rotate(144deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(9) {
transform: rotate(162deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(10) {
transform: rotate(180deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(11) {
transform: rotate(198deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(12) {
transform: rotate(216deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(13) {
transform: rotate(234deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(14) {
transform: rotate(252deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(15) {
transform: rotate(270deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(16) {
transform: rotate(288deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(17) {
transform: rotate(306deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(18) {
transform: rotate(324deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(19) {
transform: rotate(342deg) skewX(72deg);
}
.starbust-wheel > li:nth-child(20) {
transform: rotate(360deg) skewX(72deg);
}
答
由于您设定的相对大小为50％，它们只是缩小。如果您将其更改为100％，则它看起来完全相同，但不会显示您遇到的问题。我也建议改变高度为100％，所以如果页面的高度变得太低，你没有问题...
.starbust-wheel > li {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
transform-origin: 0 0;
}
更新例如： http://codepen.io/anon/pen/MbWXga
你可能会想稍微改变渐变，因为这已经使它从原始的一点点亮起来了。
答
个人而言，我会根据设备宽度...也许东西1920×1080，然后几个创建几个不同背景的更多用于较小的设备......
然后使用基于min的媒体查询宽度（移动第一和所有:-)）或使用JavaScript ...
SVG也是一种选择，也许如果你想要的东西动画？
为什么不只是使用SVG。这是一个非常多的HTML和CSS的背景？ –
解释为什么你看到了你所看到的 - 这是由于你如何制作三角形。由于它只是一个倾斜的矩形的角落，其维度取决于视区尺寸，因此一旦视区高度与宽度的比率足够高，倾斜矩形的角就会进入视野并消除这是三角形的效果。 （你可以通过使用web检查器来确认这一点，以在操纵视口时突出显示元素。）就解决这个问题而言，虽然......哈哈，这让我头疼。去一个SVG。 = P – Serlite
@Serlite你是对的......但我认为将li的宽度和高度增加到100％可以解决问题 – vals