设备开发尺寸检测
您的设备开发尺寸为：
px;
分别将设备处于横向和纵向，刷新页面即可检测设备长、宽尺寸。
媒体查询
为兼容不同设备，采用CSS3的媒体查询，可实现样式切换
| 手机端 | Pad | Pad与PC之间 | PC |
|---|
| <=768px | >768px | >=992px | >=1200px |
| xs | sm | md | lg |
@media (min-width:768px){...}
@media (min-width:768px)and(max-width:991px){...}
@media (min-width:992px){...}
@media (min-width:1200px){...}
设备开发尺寸
| 设备/型号 | iphone | 设备/型号 | ipad | 设备/型号 | huawei |
|---|
| iphone 4 | px * px | ipad mini 1 | px * px | | |
| iphone 5 | px * px | ipad mini 2 | px * px | | |
| iphone 6 | px * px | ipad mini 3 | px * px | | |
| iphone 6plus | px * px | ipad mini 4 | px * px | | |
| iphone 7 | px * px | ipad air | px * px | | |
| iphone 7plus | px * px | ipad air2 | px * px | | |
| iphone 8 | px * px | ipad pro10.5 | px * px | | |
| iphone 8plus | px * px | ipad pro 11 | px * px | | |
| iphone X | px * px | ipad pro 12 | px * px | | |
| iphone XR | px * px | ipad mini 1 | px * px | | |
| iphone XS MAX | 414px * 808px | ipad mini 1 | px * px | | |
栅格系统
根据不同设备的显示需求，进行调用，用户可利用浏览器进行调试，反复实验，以熟悉栅格系统
col_xs_1
col_xs_1
col_xs_1
col_xs_1
col_xs_1
col_xs_1
col_xs_1
col_xs_1
col_xs_1
col_xs_1
col_xs_1
col_xs_1
col_xs_12 col_sm_3 col_md_5 col_lg_6
col_xs_1
手机端100% 平板竖直25% 平板横向33.333% PC端50%