Question

我正在开发一个具有大量图形元素的响应式网站http://www.pegasuswd.com/mountain-climb/。一个元素是沿着设计中的路径出现的一组标记。在任何给定的时间点，通过css设置的随机位置上的通路上可以有1到100个标记。问题是，随着场地的扩展，标记会移动位置，不再沿着路径移动。标记是理想的约1450 X 850像素。（它们以700px宽度移除。）

我正在寻找一种方法让他们保持各种规模的路径。我认为这里需要一个jQuery解决方案来检测高度并重置路径上的标记，但我不确定。理想情况下，我想用CSS做。有没有人有关于如何在网站缩放时将标记保留在路径上的建议或指示？

Answer 1

如果不编写十亿个媒体查询（仅限CSS），我实际上只看到了几种方法：

在山图中包含标记
使用JavaScript并侦听窗口调整大小事件并相应地调整标记位置

Answer 2

以下是使用由Is it possible to dynamically scale text size based on browser width?

提供的JS的可能解决方案

不要使用像素来设置容器中的所有内容，而应考虑切换到ems。最初为您的容器提供需要调整大小font-size: 100%;的所有内容。将所有尺寸转换为em而不是px后，以下JS将使用em按比例调整每个元素的大小，使所有内容保持一致并最终使其完全响应。

$( document ).ready( function() {
            var $body = $('#container'); //Cache this for performance

            var setBodyScale = function() {
                var scaleSource = $body.width(),
                    scaleFactor = 0.35,                     
                    maxScale = 600,
                    minScale = 30; //Tweak these values to taste

                var fontSize = scaleSource * scaleFactor; //Multiply the width of the body by the scaling factor:

                if (fontSize > maxScale) fontSize = maxScale;
                if (fontSize < minScale) fontSize = minScale; //Enforce the minimum and maximums

                $('body').css('font-size', fontSize + '%');
            }

            $(window).resize(function(){
                setBodyScale();
            });

            //Fire it when the page first loads:
            setBodyScale();
        });

如何将元素与响应式网站上的背景对齐

2 个答案: