整理目前市面上主流移动设备的型号和尺寸，得知目前手机竖屏最大尺寸是480px，主要平板竖屏宽度均小于800px，另外我们知道普通笔记本电脑宽度是1366px或者1440px，22尺寸大屏显示器宽度是1920px，所以500px，900px，1200px，1500px应该是设备屏幕宽度重要分水岭。设备清单如下：

在文件通过使用@media方法预设适配区间样式。

/*手机+平板竖*/
@media screen and (max-width: 900px) {
}
/*手机+平板竖之外*/
@media screen and (min-width: 900px) {
}
/*pc+笔记本+平板横+iPadpro竖*/
@media screen and (min-width: 900px) {
}
/*手机+平板横+平板竖*/
@media screen and (max-width: 1200px) {
}
/*手机*/
@media screen and (max-width: 500px) {
}
/*iPad竖*/
@media (orientation : portrait) and (min-width: 500px) and (max-width: 900px){
}
/*iPad横 + iPad Pro竖*/
@media screen and (min-width: 900px) and (max-width: 1200px) {
}
/*iPad横*/
@media (orientation : landscape) and (min-width: 900px) and (max-width: 1200px){
}
/*iPad Pro竖*/
@media (orientation : portrait) and (min-width: 900px) and (max-width: 1200px){
}
/*iPad Pro横*/
@media (orientation : landscape) and (min-width: 1200px) and (max-width: 1500px) and (-webkit-min-device-pixel-ratio:1.8),(min-device-pixel-ratio:1.8){
}
/*笔记本+大屏 + iPad Pro横*/
@media screen and (min-width: 1200px) and (max-width: 3000px){
}
/*笔记本 + iPad Pro横*/
@media screen and (min-width: 1200px) and (max-width: 1500px) {
}
/*手机+笔记本+平板*/
@media screen and (max-width: 1500px) {
}
/* 移动竖屏 */
@media (orientation : portrait) and (max-width: 1200px) {
}
/* 移动横屏 */
 @media (orientation : landscape) and (max-width: 1500px){
}
/*PC大屏*/
@media screen and (min-width: 1500px) {
}

根据高清倍数适配

目前移动设备中手机屏幕3倍屏居多，平板屏幕两倍屏幕居多，笔记本和台式机都是1倍屏，结果1px的线条在笔记本台式机显示很细致，在手机里却显得很粗壮，针对这个问题，用户可在文件中通过使用min-device-pixel-ratio方法预设设备高清区间样式。

/*x2 & x3 screen*/
@media screen and (-webkit-min-device-pixel-ratio:1.8),(min-device-pixel-ratio:1.8) {
}
/*x3 screen*/
@media screen and (-webkit-min-device-pixel-ratio:2.4), (min-device-pixel-ratio:2.4) {
}

使用js判断

本框架内置了判断终端js语句，根据屏幕宽度四个数值进行终端判断。

• <500px clientIs='phone'手机

• >500px & < 900px clientIs='pad'平板竖放

• >900px & < 1200px clientIs='padflip'平板横放

• >1200px & < 1500px clientIs='padpro'大屏平板

• >1500px clientIs='pc'笔记本/电脑

使用方法如下：

另外js通过头文件可判断终端是桌面电脑端还是手持移动端。

使用方法如下：

rem代替px

本框架在html标签中设置了基础字号是10px，那么1rem就等于10px。比如你希望正文字号对应的是14px，那么你可以设置font-size:1.4rem（14*1rem/10）。原本是将html的字号定为1px的，这样14px=14rem，直观易懂，但是遍历移动端浏览器发现不是所有的浏览器都接受1px的字号，所以将html的字号定为10px，那么原来使用px的数值只需要增加一位小数即可。基于这个原理你可以在引用ax.css中之后写入你自己的style样式。

使用rem单位的一个重要原因是简化项目在移动端的适配工作，做到只要改一个数值（html的字号）就能做到多端自适配。目前PC端的html字号是10px，body字号则是14px（1.4rem）；在移动端html字号为(160px/14)，body字号则是16px（1.4rem）；如果你想让你的项目在移动端的显示效果更大更清晰，你可以将html字号设为(180px/14)，body字号则是18px（1.4rem）。

使用rem单位会产生小数点数值，比如width:20.563268px，由于移动端视网膜屏支持小数点数值显示，在如此高清显示条件下，肉眼上看不出来20px和20.563268px的差别。所以rem单位在移动端完全可行。