用bootstrap

 单位   VW/VH

请使用响应式布局

使用viewport应该是可以的

现在比较流行的做法是使用rem作为单位，然后动态的改变rem对应的px值来达到目的（js监听resize事件，或者写用媒体查询)
当然更为暴力的做法，你可以直接使用zoom，计算好缩放比后设置。

所有的东西都变成相对的，元素长宽，字体大小，啥啥都是相对的。
相对的最终父元素却是绝对的，长宽可以自动获取屏幕的100%，可是字体大小呢？
html和css没有那么智能和自动的，还是需要手动用媒体查询去设置每种分辨率下的html字体大小，不然他咋知道该是什么字号。。。

width:100%不就行了吗？

利用CSS3的媒体查询吧，根据不同的尺寸设计不同的CSS样式

 @media screen and (max-width: 320px) {
    body {
        background-color:lightblue;
    }
}

如果想图方便的话考虑一下使用前端框架，比如Bootstrap等，里面有一个栅格（grid）的的概念
http://v3.bootcss.com/css/

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin，用于生成更具语义的布局。

利用 @media 进行响应式设计
http://www.w3cschool.cc/bootstrap/bootstrap-v2-responsive-design.html

或者在进行 css 编写时使用 百分比 设置元素的宽高，使用 em 设置字体的大小等等

更多信息请搜索响应式页面设计

用Ｂootstrap框架，有一套响应式设计的css样式的，依次响应小型、中型、大型设备的屏幕尺寸。

配置viewport
例如:

 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />