小编Ada*_*ott的帖子

我以前在网上看过这个,我怀疑答案是"你不能",但由于我还没有找到一个明确的答案,我认为这里值得问一下.我发现最接近问题的是尾随斜线和相对网址的神秘感(目前已经关闭,但Google有一个纯文本缓存版本).

由于URL的传统设计将尾部斜杠解释为目录,而没有尾部斜杠的URL被解释为文件资源,并且相对URL在目录下工作,因此如果当前页面具有

/lorem/ipsum/dolor

相对路径

not-dolor

将解决为

/lorem/ipsum/not-dolor

当/lorem/ipsum/dolor被视为文件资源时,自然有意义,dolor坐在目录中/lorem/ipsum/; 典型,直观的惯例.然而,由于网站的一个显著数量是现在不用为每个URL文件系统映射动态应用程序,这可能会导致头痛,因为有时你真的想相对路径,好像工作,在目前的设计中,有一个尾随斜线.

是否有任何合理的方法("不涉及服务器端处理/变量/其他,或JavaScript")使用基于当前路径的相对路径,而不是当前路径的"目录"？所以这not-dolor可能是相对/lorem/ipsum/dolor而且产生的

/lorem/ipsum/dolor/not-dolor

我知道没有解决方法涉及到类似的问题./not-dolor,因为.它仍然存在(/lorem/)ipsum/.短重定向到结尾的斜线,并确保所有的资源都对应到一个目录十岁上下一个文件的本性,或修改规范(!)的网址,有没有解决这个的方法吗？

实例:https://jsfiddle.net/b8vLg0ny/

可以使用CSS scale和translate函数来放大元素.

以这个例子为例,在2x2网格中有4个方框.

HTML:

<div id="container">
  <div id="zoom-container">
    <div class="box red">A</div>
    <div class="box blue">B</div>
    <div class="box green">C</div>
    <div class="box black">D</div>
  </div>
</div>

CSS:

* { margin: 0; }

body, html { height: 100%; }

#container {
  height: 100%;
  width: 50%;
  margin: 0 auto;
}

#zoom-container {
  height: 100%;
  width: 100%;
  transition: all 0.2s ease-in-out;
}

.box {
  float: left;
  width: 50%;
  height: 50%;
  color: white;
  text-align: center;
  display: block;
}

.red { background: …