创建一个 div 正方形，并相应地使用 less 将其居中于视口答案

【问题标题】：create a div square, and center it accordingly the view port using less创建一个 div 正方形，并相应地使用 less 将其居中于视口
【发布时间】：2013-08-01 17:42:17
【问题描述】：

我正在尝试根据屏幕大小在浏览器中创建一个正方形（或 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);

 }

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

【问题讨论】：

This SO post 可能对你很有用！
谢谢，我会读的！

标签： css less

【解决方案1】：

你不能用预编译的 LESS 做你想做的事

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

您要么坚持使用 javascript，要么坚持使用 use extra html mark-up to get the squaring effect。

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

我需要强调一个事实，即客户端编译只推荐用于开发。如果有人关闭了 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);
 }

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

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

【讨论】：

在 LESS 的文档中说可以使用 javascript，我看到类似 @height: document.body.clientHeight;这得到一个值 0 因为我认为主体中可能没有任何元素，然后我尝试了@height：window.innerHeight;它给出了一个值，但是当我试图使数学运算不起作用时，它说无效类型。
是的，您可以使用内联 javascript。但是，除非您要编译 LESS 客户端（不建议用于生产版本，仅用于开发），否则 LESS 仍将不知道其最终浏览器环境。到时候你还不如用javascript来做，而不是通过LESS用javascript。但是，如果您坚持进行客户端编译，我将更新我的答案，向您展示如何绕过无效类型。
哇...我明白了！但它认为您刚刚发布的代码将显示矩形而不是正方形，非常非常好的解释谢谢！
从技术上讲，正方形是一种特殊类型的矩形——所以是的，它会显示一个矩形:-)。但它也将是一个正方形，因为window.innerHeight 将是一个px 值，并且相同的px 值将应用于高度和宽度。现在，我上面的代码没有考虑到40% 的大小，所以我将对此进行修改，然后将我在特定测试运行中获得的结果发布到 www.less2css.org。
非常感谢这么好的解释，特别是代码@base: (0.4 * unit(window.innerHeight, px));真的很管用！

【解决方案2】：

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

尝试使用 CSS 的 vmin（比较 CSS Specification），如 my jsfiddle 以获得例如以百分比为单位的水平/垂直视口最小值的 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/

【讨论】：

【解决方案3】：

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

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

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

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

使用vw and vh units 获取视口尺寸。

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

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

&lt;div id="target"&gt;&lt;/div&gt;

【讨论】：