在ASP.NET中实现动态分辨率相关的CSS

• 下载 DynHeightCSS.zip - 1.5 KB

引言

几乎每个 Web 开发人员都遇到过这种情况：你想做一个好的 CSS 纯粹主义者，你避免（误）使用表格进行页面布局，你只想让某个子元素在其父元素内垂直和水平居中，或者在不利条件下尊重基于百分比的尺寸，也许 vertical-align 拒绝工作，除非你使用固定的度量值来设置 line-height 或父级尺寸。 你尝试设置 height 和 min-height，你摆弄 margin 和 padding，你尝试了一些 IE 专用的技巧，你确保你将 html 和 body 元素的高度设置为 100%... 你认为你搞定了，然后在 7 个不同的浏览器中预览它，现在它在一个之前工作过的浏览器中完全坏掉了。 这是一个放弃所有技巧并用大锤砸向游乐场的解决方案；与其聪明或优雅，它只是在呈现你想要的样子时，简单地击败了每个浏览器。

方法

这里总体的目标很简单：使用固定的（像素）度量来视觉模拟 CSS 中的百分比单位。 显然，有几种方法可以实现这一点，并且有几种选择。 你可以每次浏览器窗口大小调整时都调整所有内容（我没有）。 你可以完全用 javascript 完成整个事情，并完全跳过 ASP.NET。 我选择了其他方法，因为我喜欢在服务器端获取视口尺寸，例如，在服务器端发生自定义渲染的情况下。 但无论你做什么，你至少需要 一些 JavaScript 才能有效地获取这些尺寸。 然后你希望将它们交给服务器，服务器应该响应一个样式表，其中包含根据浏览器的尺寸定制的度量单位。 

关于代码 

感谢 Andy Langton 在 http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/ 上的文章，你可以轻松地使用一行 javascript 获取浏览器视口的大小

var win = window, d = document, e = d.documentElement,
 g = d.getElementsByTagName('body')[0],                
 x = win.innerWidth || e.clientWidth || g.clientWidth, 
 y = win.innerHeight || e.clientHeight || g.clientHeight;	

现在你有了 x 变量中的宽度和 y 变量中的高度，你可以使用你选择的个人方法将这两个变量提供给服务器——例如 Ajax 调用、隐藏字段等。 我只是编写一个指向我的动态 CSS 处理程序的 link 元素，并将 x 和 y 值作为查询字符串参数附加： 

document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"/css/DynHeightCSS.ashx"
 + "?w=" + x
 + "&h=" + y
 + "\"" + " />");

这会在页面中添加一个样式表链接，其 URL 类似于这样
https://:8080/css/DynHeightCSS.ashx?w=1920&h=1012.

动态 CSS 处理程序 (DynHeightCSS.ashx) 为给定的浏览器尺寸的每个百分比值计算像素尺寸，并将这些尺寸嵌入到用于设置 height、line-height 和 width 的自定义类中。 例如，生成的响应中的前三个类——分别代表高度或宽度的 1%——看起来像这样（给定我当前的浏览器尺寸为 1920 x 1012）

.height-1-pct {
    height: 10px;
}
.line-height-1-pct {
    height: 10px;
}
.width-1-pct {
    width: 19px;
}

这里有一个你可能想使用这种策略的例子。 下面的白色框是页面高度的 45%，并且你想要在其中垂直居中一段文本。 简单地设置 vertical-align: middle 没有任何作用（对吧），即使将 height 或 line-height 设置为 100%

在示例（上图，下面是标记）中，右侧的文本块垂直对齐不正确。 它与 正确 对齐的文本块（左侧）之间的唯一区别是添加到左侧 span 的 height-45-pct 的 class 属性（由我们的动态 CSS 提供）。 我们知道白色框是页面高度的 45%，并且我们希望我们的文本块具有相同的高度——但以像素为单位衡量——所以我们只使用与该高度对应的动态生成的类

<div style="width: 50%; margin-top: 4px; float: left; text-align: center;">
	<span class="height-45-pct" style="display: table-cell; vertical-align: middle;">
	This text is supposed to vertically <br>align middle. The height is 400px.</span>
</div>
<div style="width: 50%; margin-top: 4px; float: left; text-align: center;">
	<span style="height: 100%; display: table-cell; vertical-align: middle;">
	So is this text, but line-height 100% <br>doesn't work quite the same.</span>
</div> 

使用代码

要使用代码，只需下载 DynHeightCSS.ashx.cs，将其作为 HTTP 处理程序添加到你的 /css 目录中，并将前面提到的 javascript 放入你的页面的头部。 然后，当你需要强制一个不服从的元素服从百分比测量时，使用其中一个动态生成的类来执行此操作。 注意——百分比始终相对于 页面，而不是包含元素； 你需要在这里做一些数学运算，才能转换为页面相关的分数。

关注点

显然，除了 height、line-height 和 width 之外，还有其他用例可以使用这种蛮力方法。 最小和最大高度是我想到的。 在你的 CSS 中进行百分比到像素的计算，可以让你自由地使用绝对定位，否则这样做会很困难。

这是一个初步的概念验证草案，而不是一个完全成熟的实用程序。 我在生产代码中使用它，但我确定有一些我没有遇到的缺点，你将会遇到。 它肯定有点臃肿，因此可以通过仅输出你实际使用的尺寸和属性来稍微简化它。 一些修饰也可能派上用场； 例如，如果 javascript 函数在浏览器调整大小时删除并替换样式表 <link> 元素，或者如果它甚至在所有操作都在 JavaScript 中完成的情况下动态更改样式。 在评论中留下你的想法，希望这对你有所帮助！

历史 

第一个版本发布于 2012 年 12 月 31 日。