怎么做自适应网页

最新的分辨率数据显示，PC端里1024*768占20%、1920*1080占14%。而这2个分辨率的显示宽度相差了接近一倍。
而现在设计师的设计稿普遍输出尺寸都是1920，所以设计师经常也会担心：小分辨率下能看到吗？或者需要为手机端单独做一版吗？所以我们需要用一些技巧来让大多数用户能看到的页面效果是一样的。

比如这个是在1920*1080的分辨率下面显示，但是如果直接按照原大小做，那么小分辨的用户就只能看到一部分了，这时候我们就需要使用网页自适应。

纯CSS网页自适应:
思路：
1: 针对IE：IE下有zoom属性。虽然我们经常用它来做兼容性。但是它其实在缩放元素上也是很强大的。eg：被设置zoom:0.5的元素会以该元素的左上角为原点在直接被缩小一半，所占据的文档流内体积也会减少一半（IE7和8+对zoom后的元素的margin值理解不同可以注意下，不过单纯缩放元素时不太需要用到）。另外webkit也支持zoom。
2. 接下来我们就可以按设计稿直接切成成一个巨大无比的1920*1000的页面。
3. 然后获取用户的当前窗口尺寸，加入当前窗口宽1200，那么我们需要缩放的比例 zoom=1200/1920=0.625。然后把我们的主显示的父框缩小0.625倍就可以啦~（当然为了高度不出滚动条，高度的尺寸也要纳入计算范围）是不是很简单呢？以后遇到会影响内容浏览的大页面的时候 可以考虑用这种方法做一个缩放哦~