小编Jor*_*hor的帖子

响应性:Chrome 检查器工具 VS 实际浏览器窗口

我制作了一个响应式网页,在手动调整窗口大小时看起来非常棒,但在使用嵌入在 chrome 中的响应式工具时看起来不太好。所以我决定根据它在 Google Chrome 响应工具上的样子进行设计,但是现在当我手动调整窗口大小时它看起来很糟糕。

我应该相信哪一个?!我怎么知道它在移动设备上会是什么样子?

编辑:另外,我有这个基本规则

@media only screen and (min-device-width: 900px) {

   body {
      width: 60%;
      margin: 0 auto;
   }

}
Run Code Online (Sandbox Code Playgroud)

使用 chrome 响应工具时,主体宽度将正确调整大小,但在调整 chrome 窗口大小时不会。如果我将其更改为min-width : 900px,则主体将在调整 chrome 窗口大小时正确调整大小,但不会使用 chrome 响应工具!

左边是 Chrome 提供的响应式检查器工具,右边是使用时调整大小的 chrome 窗口(两者宽度相同)@media only screen and (min-device-width: 900px) 媒体查询在这里不起作用(在检查器上)但在调整大小时起作用窗户

在此处输入图片说明

这里也一样,但使用@media only screen and (min-width: 900px) . 检查器工具显示页面 Ok,但是每当我调整 Chrome 窗口的大小时,查询都不会被触发!

在此处输入图片说明

css responsive-design

9
推荐指数
1
解决办法
4300
查看次数

在CSS过渡期间绘制边框颜色

button {
  background: none;
  border: 0;
  box-sizing: border-box;
  margin: 1em;
  padding: 1em 2em;
  box-shadow: inset 0 0 0 2px #f45e61;
  color: #f45e61;
  font-size: inherit;
  font-weight: 700;
  position: relative;
  vertical-align: middle;
}
button::before, button::after {
  box-sizing: inherit;
  content: " ";
  position: absolute;
  width: 100%;
  height: 100%;
}
.draw {
  transition: color 0.25s;
}
.draw::before, .draw::after {
  border: 2px solid transparent;
  width: 0;
  height: 0;
  transition: width 1.25s ease-out 1.25s, height 1.25s ease-out 1.25s;

}
.draw::before {
  top: 0;
  left: 0;
} …
Run Code Online (Sandbox Code Playgroud)

css border css3 css-transitions

3
推荐指数
1
解决办法
2062
查看次数

如何计算python中两个向量数组的点积?

A and B都是数组shape(N,3).它们每个包含N个向量,使得A[0] = a0 (vector), A[1] = a1...B[0] = b0, B[1] = b1...

我想计算N对向量a和bn的点积.换句话说,我想获得一个数组C,shape(N,1)这样C[i] = np.dot(A[i],B[i]).在python中执行此操作的最有效方法是什么(例如使用向量化代码)?

python numpy linear-algebra vectorization scipy

2
推荐指数
1
解决办法
6506
查看次数

SVG颜色不变

对于一个项目,我们一直在使用SVG图片。我正在尝试为它们着色,但是没有成功,这是SVG:

<svg id="Calque_2" data-name="Calque 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 313.89 311.93">
<defs>
    <style>
        .cls-1 {
            fill: #fff;
            opacity: 0.3;
        }
    </style>
</defs>
<title>goutte_background</title><path
    class="cls-1"
    d="M1145.43,987.78c-45,0-81.7-35.18-82.09-79.35v-4.3h0a63.88,63.88,0,0,1,2-14.07,90.58,90.58,0,0,1,6.25-17.2c13.68-30.49,38.7-63.33,38.7-63.33,18.76-26.58,27.36-46.91,30.88-59.81a147.8,147.8,0,0,0-57.07,12.12,158.6,158.6,0,0,0-83.26,83.26,151.14,151.14,0,0,0-12.12,60.59c0,21.5,3.91,41.83,12.12,60.59a158.6,158.6,0,0,0,83.26,83.26c18.76,8.21,39.09,12.12,60.59,12.12h2c21.5,0,41.83-3.91,60.59-12.12a158.6,158.6,0,0,0,83.26-83.26c8.21-18.76,12.12-39.09,12.12-60.59a151.14,151.14,0,0,0-12.12-60.59,158.6,158.6,0,0,0-83.26-83.26,147.8,147.8,0,0,0-57.07-12.12c3.52,12.9,12.12,33.23,30.88,59.81,0,0,25,32.84,38.7,63.33a90.58,90.58,0,0,1,6.25,17.2,63.88,63.88,0,0,1,2,14.07h0v4.3c-0.39,44.17-37.14,79.35-82.09,79.35h-0.39Z"
    transform="translate(-988.68 -749.72)"/><path
    class="cls-1"
    d="M1145.43,778.26l1.56,6.25c2,8.21,7.82,25.8,24.63,49.64,0,0,18.76,24.24,28.93,46.91a62.83,62.83,0,0,1,4.69,12.9,32.92,32.92,0,0,1,1.56,10.55h0v3.13c0,32.84-27.36,59-61,59h-0.39c-33.62,0-61-26.19-61-59v-3.13h0A32.93,32.93,0,0,1,1086,894a62.83,62.83,0,0,1,4.69-12.9c10.16-22.67,28.93-46.91,28.93-46.91,16.81-23.84,22.67-41.43,24.63-49.64Z"
    transform="translate(-988.68 -749.72)"/></svg>
Run Code Online (Sandbox Code Playgroud)

我目前正在将此SVG用作的背景div,并且正在努力更改其颜色。

这是我尝试过的:

.someParent .cls-1 {填充:#0080FF!important; }

.someParent svg {
  fill: #0080FF !important;
}
Run Code Online (Sandbox Code Playgroud)

我也一直在尝试删除styleSVG,但这没有效果。

这是将SVG用作我的div背景的CSS:

background: #ffffff url("../images/goutte_background.svg") no-repeat right top;
Run Code Online (Sandbox Code Playgroud)

css svg

2
推荐指数
2
解决办法
1789
查看次数