阅读 27

项目应用-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%;
    }
}
复制代码