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