Question

我非常有趣的HTML /响应式网络问题：

我有几个<div>个元素，inline-block显示属性：

<div id="a"></div>    <div id="b"></div>    <div id="c"></div>

每个元素的max-width为200px。

当我缩小页面时，所有元素都按比例缩小，但我需要的是先将#a优先级缩小，然后使#b缩小，然后使#c缩小。

我该怎么做？有什么想法吗？

Answer 1

您可以沿缩小屏幕大小的路径使用媒体查询。

例如，你可以从这样的事情开始......

pos = len(lines) - 1
while pos >= 0 and len(lines[pos].strip()) == 0:
  pos -= 1
lines = lines[:pos+1]

...并在不同阈值下复制代码，并对屏幕大小和div宽度进行适当调整。

更新

感谢您在评论中的澄清。您希望缩小三个div的宽度，每个div按顺序缩小并平滑地。这可以通过CSS media queries 和 transitions 的组合来完成。

HTML

@media screen and (max-width: 900px) { #a { width: 100px; } }
@media screen and (max-width: 600px) { #b { width: 100px; } }
@media screen and (max-width: 300px) { #c { width: 100px; } }

CSS

<div id="a">DIV BOX A</div>
<div id="b">DIV BOX B</div>
<div id="c">DIV BOX C</div>

根据您的代码，

DEMO 1 - div { display: inline-block; width: 200px; } div { transition: width .5s ease-in-out, left 1s ease-in-out; } @media only screen and (max-width: 800px) { #a { width: 150px; } } @media only screen and (max-width: 700px) { #b { width: 150px; } } @media only screen and (max-width: 600px) { #c { width: 150px; } } @media only screen and (max-width: 500px) { #a { width: 100px; } } @media only screen and (max-width: 400px) { #b { width: 100px; } } @media only screen and (max-width: 300px) { #c { width: 100px; } } DEMO 2 - display: inline-block;用于演示目的
^{注意：使用垂直条重新调整窗口大小。确保完全展开窗口以查看完整效果。}

Answer 2

在您希望每个阈值缩小的每个阈值处的媒体查询应该可以解决问题。从最小宽度开始，并有条件地删除它：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace surface_area_volume_ratio
{
    class Program
    {
        static void Main(string[] args)
        {
            Console.WriteLine("Volume--\nSurace Area-Ratio : L, W, H");
            Console.ReadLine();
            Console.Clear();
            for (int volume = 1; volume < 200; volume++)
            {
                double dv=volume;
                List<double> ratios = new List<double>();
                List<int> surface = new List<int>();
                List<int> ls = new List<int>();
                List<int> ws = new List<int>();
                List<int> hs = new List<int>();
                for (int l = 1; l <= volume; l++)
                {
                    double dl = l;
                    for (int w = 1; w <= volume; w++)
                {
                    double dw = w;
                    for (int h = 1; h <= volume; h++)
                    {
                        double dh = h;
                        if (l * w * h >= volume)
                        {
                            int s = (2 * (l * w + l * h + w * h));
                            surface.Add(s);
                            ratios.Add(s/dv);
                            ls.Add(l);
                            ws.Add(w);
                            hs.Add(h);
                        }
                    }   
                }
            }
            double smallest=0;
            if (ratios.Count>0)
                smallest = ratios.Min();
                Console.WriteLine(volume+"--");
            for (int i = 0; i < ratios.Count; i++)
            {
                if (smallest==ratios[i])
                    Console.WriteLine("{0}-{1} : {2}, {3}, {4}",surface[i],ratios[i],ls[i],ws[i],hs[i]);
            }
            Console.ReadLine();
            Console.Clear();
        }
    }
}
}

如何在屏幕重新调整大小时平滑地按顺序缩小多个div？

2 个答案: