【问题标题】:How to make web site Browser Compatible with different screen resolutions? [closed]如何让网站浏览器兼容不同的屏幕分辨率? [关闭]
【发布时间】:2012-10-04 14:39:33
【问题描述】:

我开发了一个有 10 页的网站,现在我面临一个主要问题,即当我在任何其他屏幕比我的网站更宽的机器上运行它时,会出现不平衡,并且无法像在我自己​​的机器上那样正常显示。

我需要帮助,我怎样才能使这个站点浏览器兼容,可以在具有相同布局的任何机器上运行,并且可以在具有相同布局的任何屏幕上运行。

请帮助我该怎么办??

【问题讨论】:

  • 使用 CSS 框架,如 Bootstrap、Skeleton 等,可在此站点找到:speckyboy.com/2012/08/21/…
  • 你应该用谷歌搜索“响应式网页设计”

标签: asp.net html css cross-browser


【解决方案1】:

您有多个问题。

首先,它与您的机器无关,而与浏览器无关,您需要进行适当的设计。基本的设计原则很少

即液体布局设计 - 适合任何屏幕宽度并随屏幕缩小/增长

另一种是固定布局 - 无论屏幕大小如何,此布局都保持不变。

您应该选择其中之一。网络上有许多免费的优秀 CSS 模板。你可以做的是,使用这个主题的骨架并应用你的样式和其他元素来创建你自己的。

浏览器兼容性是设计师处理不同技术的一个古老问题。有些人使用 javascript 来检测不同的浏览器并呈现适当的 css 以适应该浏览器,而有些人则编写条件 CSS。

您可以选择其中一种策略。

【讨论】:

    【解决方案2】:

    您可以按照响应式网页设计来设计您的网站。

    三个关键技术特性是响应式网页设计的核心:

    1. 媒体查询和媒体查询监听器
    2. 基于网格的灵活布局,使用相对大小
    3. 灵活的图像和媒体,通过动态调整大小或 CSS

    阅读以下链接了解更多信息 http://msdn.microsoft.com/en-us/magazine/hh653584.aspx

    【讨论】:

      【解决方案3】:

      首先,网站与您使用的 ma​​chine 无关,只是 browsers 呈现不同(在您的情况下),因为如果您熟悉 CSS ,就可以搭建一个跨浏览器的网站了。

      因此,为了制作一个跨浏览器的网站,您需要对 html 以及更重要的 CSS 有深入的了解,您需要决定是想要 fix 布局还是 dynamic/液体 一,那里有很多书籍,搜索响应式设计,学习跨浏览器 CSS,您还可以使用 screen(width)/print specific stylesheets 将您的网站提升到更好的水平...同样在 CSS 中学习 POSITIONING

      一些学习网页设计的最佳书籍:

      Adaptive Web Design

      - 亚伦·古斯塔夫森

      Responsive Web Design

      - 伊桑·马科特

      Handcrafted CSS: More Bulletproof Web Design

      - Dan Cederholm 和 Ethan Marcotte

      【讨论】:

        【解决方案4】:

        创建一个跨浏览器兼容的网站:

        • 仅使用符合标准的编码。

        • 不要使用浏览器特定(专有)的 HTML 标记和功能。

        这些仅适用于创建它们的浏览器,甚至可能在其他浏览器中查看时破坏您的网页。

        验证您的网页。

        • 使用 W3C 免费验证服务验证您的 HTML/XHTML 编码

        • 使用 W3C 免费验证验证您的级联样式表 服务

        详情见链接

        http://www.netmechanic.com/products/Browser-Tutorial.shtml

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2015-06-14
          相关资源
          最近更新 更多