为了展示良好的页面效果，我们需要考虑页面适配的问题，如果你还在纠结页面适配规则如何选择，不妨看看本文关于页面适配给出的一些方法和选择，希望能给你一些启发。

还在纠结页面适配规则如何选择的同学建议看看，应该能有收获。

一、何为页面适配及必要性

在界面设计中，间距也是重要元素之一，合理的间距布局可以让界面更加赏心悦目，有助于清晰地传递信息，并提升用户的使用体验。那么，如何定义和布局“间距”？本篇文章里，作者就间距的布局策略进行了总结，一起来看。

很多时候，我们发现自己精心设计的作品总是乱乱的感觉，究其根本，大部分都是文字、图形、色彩处理不当，后续的优化调整也都围绕着这几点进行，这也是为什么设计师在制定设计规范的时候，会把文字（标题、正文、提示的字号）、色彩（主色、辅助、点缀、渐变的使用场景）规范分的很细。

Web前端，用JS实现：根据浏览器宽度，用缩放的方式，自动调整网页大小。

JS代码如下：

function adjustZoom() {
    var reZoom = false;
    var zoom = get_cookie("zoom");
    if(zoom == undefined ){
        reZoom = true;
    }
    if(isNaN(zoom) == true){
        reZoom = true;
    }
    if(zoom != undefined && isNaN(zoom) == false){
        if(zoom == 1){
            reZoom = true;
        }
        if(zoom == 0){
            reZoom = true;
        }
    }
    if(reZoom == true){
        if(window.innerWidth > 1024){
            document.body.style.zoom = window.innerWidth / 1584;
        }else{
            document.body.style.zoom = 1;
        }
    }
}
// 初始调整
adjustZoom();
// 窗口大小改变时重新调整
window.addEventListener('resize', adjustZoom);