Response 终端适配

使用说明

为了便于用户自行开发网站项目,本框架将主样式文件和自适应样式文件做了分离。ax.css是本框架的主要样式文件,默认没有适配移动设备,如果用户需要适配移动设备包括手机和平板,方法一、请自行加载ax-response.css适配样式文件;方法二、将ax-response.css代码拷贝到ax.css文件底部。

根据设备尺寸适配

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

设备类型 设备型号 分辨率 倍数 实际尺寸
手机 苹果iPhone 11 Pro Max 2688x1242 3 896x414
手机 苹果iPhone 11 1792x828 2 896x414
手机 苹果iPhone 7 Plus 1920x1080 3 640x360
手机 三星GALAXY Note 10+ 3040x1440 3 1013x480
手机 三星GALAXY A70 2400x1080 3 800x360
手机 小米9 Pro 2340x1080 3 780x360
手机 小米MIX 2 2160x1080 3 720x360
手机 魅族16s Pro 2232x1080 3 744x360
手机 一加7 Pro 3120x1440 3 1040x480
手机 华为nova 6 2400x1080 3 800x360
手机 华为P30 Pro 2340x1080 3 780x360
手机 华为P30 Pro 2340x1080 3 1170x360
手机 华为畅享10 1560x720 2 780x360
手机 vivo X30 2400x1080 3 800x360
手机 vivo Z5x 2340x1080 3 780x360
平板 苹果iPad Pro 2732x2048 2 1366x1024
平板 苹果iPad 2019 2160x1620 2 1080x810
平板 苹果iPad 2019 2160x1620 2 1080x810
平板 苹果iPad Air 2224x1668 2 1112x834
平板 苹果iPad mini 2019 2048x1536 2 1024x768
平板 华为MatePad Pro 2560x1600 2 1280x800
平板 华为M5青春版 1920x1200 2 960x600
平板 荣耀5 1920x1200 2 960x600
平板 小米4 1920x1200 2 960x600
平板 三星Galaxy Tab S6 2560x1600 2 1280x800
平板 三星Galaxy Tab A T510 1920x1200 2 960x600
平板 三星GALAXY Tab A 8.0 1024x768 1 1024x768

在ax-response.css文件通过使用@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) {
}
/*平板竖*/
@media screen and (min-width: 500px) and (max-width: 900px){
}
/*平板横+iPadpro竖*/
@media screen and (min-width: 900px) and (max-width: 1200px) {
}
/*笔记本+大屏+iPadpro横*/
@media screen and (min-width: 1200px) and (max-width: 3000px){
}
/*笔记本+iPadpro横*/
@media screen and (min-width: 1200px) and (max-width: 1500px) {
}
/*手机+笔记本+平板*/
@media screen and (max-width: 1500px) {
}
/*PC大屏*/
@media screen and (min-width: 1500px) {
}
                        

根据高清倍数适配

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

/*X2*/
@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
}
/*X3*
@media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3){
}
                        

使用js判断 JS

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

  • <500px clientIs='phone'手机
  • >500px & < 900px clientIs='pad'平板竖放
  • >900px & < 1200px clientIs='padflip'平板横放
  • >1200px & < 1500px clientIs='padpro'大屏平板
  • >1500px clientIs='pc'笔记本/电脑

使用方法如下:

<script type="text/javascript ">
if(clientIs == 'phone'){
//语句
}else if(clientIs == 'pad'){
//语句
}else if(clientIs == 'padflip'){
//语句
}else if(clientIs == 'padpro'){
//语句
}else if(clientIs == 'pc'){
//语句
}else{
//语句
}

</script>
                        

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

使用方法如下:

<script type="text/javascript ">
if(platformIs == 'pc'){
//语句
}else if(platformIs == 'mobile'){
//语句
}else{
//语句
}
</script>