Response 终端适配

使用说明

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

根据设备尺寸适配

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

设备类型	设备型号	物理分辨率	像素比(DPR)	逻辑分辨率
手机	苹果iPhone X	2436x1125	3	812x375
手机	苹果iPhone 11	1792x828	2	896x414
手机	苹果iPhone 11 Pro Max	2688x1242	3	896x414
手机	苹果iPhone 6/7/8 Plus	1920x1080	2.6	736x414
手机	苹果iPhone 6/7/8	1334x750	2	667x375
手机	苹果iPhone 5	1136x640	2	568x320
手机	三星GALAXY S5	1920x1080	3	640x360
手机	Redmi note 10 Pro/K30/K40	2400×1080	2.75	873x393
手机	小米Max 3	2460x1080	2.75	895x393
手机	小米11 Pro	3200×1440	3.5	914x411
手机	华为P40	2340x1080	3	780x360
手机	华为P20	2244x1080	3	748x360
手机	华为8A	1560x720	2	780x360
手机	vivo X21	2280x1080	3	760x360
手机	Oppo K5	2340×1080	3	780x360
手机	魅族17 Pro	2340×1080	2.75	851x393
折叠手机	Surface Duo	1800x1350	2.5	720x540
折叠手机	Galaxy Fold	1960x840	3	653x280
平板	苹果iPad Pro	2732×2048	2	1366x1024
平板	苹果iPad	2048x1536	2	1024x768
平板	苹果iPad mini	2048x1536	2	1024x768

物理分辨率=逻辑分辨率*像素比。比如iPhone5的物理分辨率为640x1136，像素比为2，其逻辑分辨率为320x568

在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) {
}
/*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的线条在笔记本台式机显示很细致，在手机里却显得很粗壮，针对这个问题，用户可在ax-response.css文件中通过使用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'笔记本/电脑

使用方法如下：

<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>

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单位在移动端完全可行。