如何为asp.net中的所有分辨率监视器设计一个网页？答案

【问题标题】：How to design a web page for all resolution monitors in asp.net?如何为asp.net中的所有分辨率监视器设计一个网页？
【发布时间】：2012-11-05 09:07:29
【问题描述】：

我的 asp.net Web 应用程序遇到了屏幕分辨率问题。我从设计专家那里得到了解决方案。解决方案之一是将 100% 宽度应用于所有表格和分区。我将 100% 的宽度应用于所有表格和分区。但我仍然面临着这个问题。在某些系统分辨率中，我的 Web 应用程序运行良好，没有任何拉伸。但在其他一些解决方案中，我的 Web 应用程序被拉伸了。如何纠正这个问题？

【问题讨论】：

您如何在任何平台上设计这样一个网站？

标签： asp.net

【解决方案1】：

将此问题作为 CSS 问题解决（因为该问题绝不是 asp.net 特有的），处理此问题的现代方法是设置宽度（以及左右边距和填充）按照您的指示，使用百分比计算所有元素，然后使用 CSS 媒体查询根据浏览器视口的宽度更改这些元素的样式。

这些可以像这样放在样式表的正文中（与您的正常样式声明一起）：

@media screen and (max-width:800px){ /*rough viewport width for tablets */

/* style declarations go here, just 
 as they would in any other stylesheet, for example*/

#myDiv{ width:60%;}

}

@media screen and (max-width:480px){ /*rough viewport width for smartphones */


}

或者你可以将你的样式放在一个完全独立的样式表中，并有条件地调用那个文件，像这样：

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

【讨论】：

【解决方案2】：

您是否考虑过使用Fluid 960 Grid？

它基于960 Grid，但适用于所有分辨率。

准备好CSS 文件后，您只需将主div 设置为container 类之一，然后将grid 类之一应用于其子类。

类似：

 <!-- this will give a 12 piece container -->
 <div class="container_12">

    <!-- all grids used should add up to 12 -->

    <!-- I.E this 4 piece grid -->
    <div class="grid_4">some content</div>
    <!-- plus this 8 piece = 12 -->
    <div class="grid_8">some more content</div>
    <!-- then clear the grids floating -->
    <div style="clear:both;"></div>

</div>

发人深省..

【讨论】：