Question

我使用HTML5，CSS3，JS1.8.5来创建响应式网站。出于实验目的，我想知道是否有可能使我的网站垂直响应，我怎么能这样做呢？

Answer 1

正如@ www139在那里说的那样，你可以使用vh / vw单位。 Vh（代表视图高度）可以使您的网站垂直响应。一个vh等于屏幕高度的1％。举个例子，假设我有这个代码：

div {
 font-size:10vh 
}

<!DOCTYPE html>
<html>
  <body>
    <div>
      <p>This is the text!</p>
    </div>
  </body>
</html>

随着屏幕高度的减小，文本方面将缩小。您可以做的另一种方式是媒体查询：

@media screen and (max-height: 500px) {
  font-size:10px;
}
div {
  font-size:20px;
}

<!DOCTYPE html>
<html>
  <body>
    <div>
      <p>Text is great! :)</p>
    </div>
  </body>
</html>

现在，如果屏幕高度小于500像素，那么花括号之间的样式。最后一种方法是使用height:100%或任何你想要的百分比。

希望这有用！

Answer 2

试试这个

<强> CSS

public class Valuation {

    public static class Element implements Comparable<Element> {
        String valuation;
        String data;
        Element(String v, String d) {
            valuation = v;
            data = d;
        }
        @Override
        public int compareTo(Element e) {           
            return valuation.compareTo(e.valuation);
        }       
    }

    private TreeSet<Element> ts = new TreeSet<Element>();

    private final static int LISTLENGTH = 500;

    public static void main(String[] args) {
        NumberFormat nf = new DecimalFormat("00000");
        Random r = new Random();
        Valuation v = new Valuation();
        for(long l = 1; l < 150; ++l) {
            long start = System.currentTimeMillis();
            for(int j = 0; j < 10000; ++j) {
                v.pushNew(new Element(nf.format(r.nextInt(50000))
                                , UUID.randomUUID().toString()));
            }
            System.out.println("10.000 finished in " + (System.currentTimeMillis()-start) + "ms. Set contains: " + v.ts.size());
        }
        for(Element e : v.ts) {
            System.out.println("-> " + e.valuation);
        }
    }

    private void pushNew(Element hexString) {
        if(ts.size() < LISTLENGTH) {
            ts.add(hexString);
        } else {
            if(ts.first().compareTo(hexString) < 0) {
                ts.add(hexString);
                if(ts.size() > LISTLENGTH) {
                    ts.remove(ts.first());
                }
            }
        }
    }
}

动态控制布局，使用javascript来测量屏幕高度并做你需要的

<强> JS

body,html{height:100%; //if you want to control by percentage}

@media screen and ( max-height: 600px ){
    //something
}

垂直响应式Web设计

2 个答案: