Question

我正在努力让我的三角形响应，因为它只适用于台式电脑，我该怎么做？

我在这里有一个代码，我想把我的div变成一个响应式div，用于手机，平板电脑......

三角形代码：

*{
background-color: black;
    padding:0;
    margin:0 auto;
}


.triangle-down {
width: 0px;
height: 0px;
border-style: solid;
border-width: 642px 187.5px 0 187.5px;
border-color: #007bff transparent transparent transparent;
}

html代码

<div class="triangle-down"></div>

Answer 1

您应该使用百分比而不是像素，您可以通过将像素大小除以上下文来计算等效值，上下文通常是您尚未声明的主体容器的大小，但通常为1000px以方便。要使用ems，它除以基本的piel大小，或者你可以使用转换器，如果你没有声明基本字体大小，它通常是16px http://pxtoem.com/

Answer 2

如果你不介意使用background-radient，这可能是一个替代身体背景： http://codepen.io/gc-nomade/pen/mBjtC

body {
  background:
    linear-gradient(
      to top left,
      black,
      black 50%,
      rgba(0,0,0,0) 50%,
    rgba(0,0,0,0)) top  center no-repeat,
    linear-gradient(
      to top right, 
      black, 
      black 50%, 
      #007bff 50%, 
      #007bff     )  top center no-repeat;
    background-size:40% 200%;/* set your own values and units here */
    background-color: black;
    padding:0;
    margin:0 auto;
    min-height:100%;
}
html {
    height:100%;
}

如何让我的三角形响应？

2 个答案: