简单的页面自适应

1.页面元素使用百分比定义其宽度，不使用像素：

页面引入下面的代码，页面按比例缩放

<meta name="viewport" content="width=device-width,initial-scale=1.0"/>

2.根据屏幕大小来改变引入的css：

<link rel="stylesheet" media="screen and (min-width: 1200px)" href="css/changeone.css"/><!--大于1200-->
<link rel="stylesheet" media="screen and (max-width: 1100px)" href="css/changetwo.css"/><!--小于1100-->

此段代码表示：当屏幕大于1200，即屏幕最小为1200时，引入changeone.css；当屏幕小于屏幕小于1100，即屏幕最大为1100时，引入changetwo.css；

tips：只有满足条件时才会引入相应的css，上面的代码中，如果屏幕在1100-1200之间，则两个css都不引入。

3.根据屏幕大小来改变style中的样式：

<style>
    @media screen and (min-width: 1000px) {
        .tt{
            background-color: #245269;
        }
    }

    @media screen and (max-width: 1000px) {
        .tt{
            background-color: #67b168;
        }
        .sim-button{
            margin-top: 0px;
        }
    }
</style>

此段代码表示：当屏幕大于1000时，引入tt的class样式，设置背景色为#245269；当屏幕小于1000时，引入tt和sim-button的class样式。

tips：此段与上面的相似，推荐当只需对个别样式做适应时使用此方法，而如果要修改的太多，推荐使用上面的方法。