0

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

 }

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

4

3 回答 3

2

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

LESS 是一个 CSS预处理器。这意味着它会在浏览器看到之前处理代码以将其形成 CSS ；就LESS而言，浏览器不存在。这意味着，LESS完全不知道40%浏览器窗口的高度。它所知道的只是，不知道稍后将实际转换为像素的什么。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);
 }

我在 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;
}
于 2013-08-01T02:06:38.007 回答
0

我有一个类似的任务：“根据屏幕宽度/高度将方形 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/

于 2014-07-30T09:08:00.880 回答
0

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

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

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

使用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>

于 2016-08-19T07:44:28.543 回答