项目应用-h5移动端01

1. 设备是否为竖屏还是横屏

// 当前是否为 portrait 即竖屏状态，landscape 即横屏状态
var mql = window.matchMedia("(orientation: portrait)");
if (mql.matches){
    // 这里是竖屏状态
}
else{
    // 这里是横屏状态
}

2. 响应式栅格系统

@media (min-width:1200px){// 较大显示器}
@media (min-width: 768px) and ( max-width: 767px){
    // 平板
}
@media (max-width: 767px){ //横屏的手机或者竖屏的平板 }
@media (max-width: 480px){ // 竖屏的手机  }

3. 使用自定义字体

@font-face {
    font-family: '自定义字体名'; 
    src: url('/icon/font.ttf'); // 字体文件的路径
}

4. 触摸和非触摸

document.documentElement.className += ('ontouchstart' in widow ) ? 'touch' : 'no-touch'

5. 解决retina屏幕，图片模糊问题（图片@2x）

.icon{
    background-image: url('icon.png');
}
@media all and (max-width:320px) and (-webkit-min-device-pixel-ratio: 2){
    .icon{
        background-size: 50% 50%;
    }
}