创建一个div正方形，并使用less将其相应地置于视图端口的中心

Question

我正试图根据屏幕的大小在浏览器中创建一个正方形（或div），所以我使用百分比，我希望正方形是屏幕高度的40%，并获得这个百分比的像素值，并将其用于宽度，以获得正方形。我知道使用javascript应该很容易，但我是个新手，我想知道如何做到这一点。我尝试了以下操作，但没有成功：

@base:calc(40% * 1px);
#mytransform { 
   background-color:#ccc;
   height:@base;
   width:@base;
   position:absolute;
   top:50%;
   left:50%;
   margin-top:-(@base/2);
   margin-left:-(@base/2);
 }

如何将百分比转换为像素？

Answer 1

使用预编译LESS无法随心所欲

LESS是一个CSS预处理器。这意味着它会在浏览器看到代码之前将其处理成CSS；就LESS而言，浏览器并不存在。这意味着，浏览器窗口的高度的40%对LESS来说完全是未知的。它所知道的只是40%，不知道以后像素的实际转换结果是什么。

您要么想使用javascript，要么使用额外的html标记来获得平方效果。

客户端编译（不推荐用于生产）

我需要强调的是，客户端编译只推荐用于开发。如果有人关闭了javascript，那么他们将不会得到任何样式。而那些打开它的人将经历页面加载的放缓。

现在，您得到一个无效类型错误的原因是，返回的值需要变成一个LESS可以理解的数字（我认为它将返回的值视为字符串）。这样可以很容易地完成（请参阅对@base分配的更改）：

@base: (0.4 * unit(`window.innerHeight`, px));
#mytransform { 
   background-color:#ccc;
   height:@base;
   width:@base;
   position:absolute;
   top:50%;
   left:50%;
   margin-top:-(@base/2);
   margin-left:-(@base/2);
 }

我的CSS输出在less2css.org上一次运行

#mytransform {
  background-color: #ccc;
  height: 243.60000000000002px;
  width: 243.60000000000002px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -121.80000000000001px;
  margin-left: -121.80000000000001px;
}

Answer 2

我有一个类似的任务："根据屏幕宽度/高度居中一个正方形div"。

试着像我的jsfiddle一样使用CSS的vmin（比较CSS规范）来获得例如一个以50%的最小水平/垂直视口为中心的平方div。

CSS按描述缩放和居中div：

.centeredDiv {
  width: 50vmin;
  height: 50vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25vmin;
  margin-left: -25vmin;
  background: #FF0000;
}

在移动网站中查看您可能需要的端口标签

<meta content="width=device-width,initial-scale=1" name="viewport">

（我在iOS上遇到了在内容属性中添加"最大规模"或"用户可扩展"的问题）

请在这里找到jsFiddle供参考：

http://jsfiddle.net/YCawM/

Answer 3

CSS纯解决方案，此代码将创建视口宽度和高度为40%的div，并将其定位在视口的中心。

使用position:fixed;保持按钮相对于视口的位置。

使用left和top属性来定位您的分区。

使用calc()，可以执行计算以确定CSS属性值。

使用vw和vh单位来获取视口尺寸。

使用50vw时，您对浏览器说要定位在视口宽度的50%，并且您需要减去20%（=div大小的50%，它变成视口的40%）。

    #target{
      position:fixed;
      width: 40vw;
      height: 40vh;
      left: calc(50vw - 20%);
      top: calc(50vh - 20%);
      background-color:red;
    }

<div id="target"></div>