使用media设置rem的值

@media all {
    html {
        font-size: 16px;
    }
}
@media all and (min-width: 140px) and (min-height: 220px) {
    html {
        font-size: 9px;
    }
}

@media all and (min-width: 220px) and (min-height: 140px) {
    html {
        font-size: 9px;
    }
}
@media all and (min-width: 210px) and (min-height: 280px) , (min-width: 280px) and (min-height: 210px) , (min-width: 280px) and (min-height: 280px) {
    html {
        font-size: 16px;
    }
}

@media all and (min-width: 300px) and (min-height: 460px) , (min-width: 460px) and (min-height: 300px) {
    html {
        font-size: 16px;
    }
}

@media all and (min-width: 340px) and (min-height: 620px) , (min-width: 620px) and (min-height: 340px) {
    html {
        font-size: 16px;
    }
}

@media all and (min-width: 420px) and (min-height: 760px) and (max-height: 900px) , (min-width: 760px) and (max-width: 900px) and (min-height: 420px) {
    html {
        font-size: 24px;
    }
}
@media all and (min-width: 500px) and (min-height: 900px) , (min-width: 900px) and (min-height: 500px) {
    html {
        font-size: 28px;
    }
}
@media all and (min-width: 1000px) and (min-height: 740px) , (min-width: 740px) and (min-height: 1000px) {
    html {
        font-size: 20px;
    }
}

@media all and (min-width: 1200px) and (min-height: 600px) , (min-width: 600px) and (min-height: 1200px) {
    html {
        font-size: 32px;
    }
}
@media all and (min-width: 1280px) and (min-height: 720px) , (min-width: 720px) and (min-height: 1280px) {
    html {
        font-size: 32px;
    }
}

@media all and (min-width: 1000px) and (min-height: 1900px) , (min-width: 1900px) and (min-height: 1000px) {
    html {
        font-size: 48px;
    }
}

/* 兼容iphone6*/
@media (device-width: 375px) and (device-height: 667px) and (-webkit-min-device-pixel-ratio: 2.0) {
    html {
        font-size: 16px;
    }
}

/* 兼容iphone6 plus */
@media (device-width: 414px) and (device-height: 736px) and (-webkit-min-device-pixel-ratio: 3.0) {
    html {
        font-size: 16px;
    }
}

@media all and (device-height: 1080px) and (device-width: 1920px) , (device-width: 1080px) and (device-height: 1920px) {
    html {
        font-size: 24px;
    }
}

/*兼容letv等*/
@media all and (device-width: 1080px) and (device-height: 1920px) and (-webkit-min-device-pixel-ratio: 2.0) {
    html {
        font-size: 48px;
    }
}

/*兼容小米4等*/
@media all and (device-width: 1080px) and (device-height: 1920px) and (-webkit-min-device-pixel-ratio: 3.0) {
    html {
        font-size: 48px;
    }
}

@media all and (device-height: 1280px) , (device-width: 720px) {
    html {
        font-size: 32px;
    }
}
@media all and (device-width: 1024px) , (device-width: 768px) {
    html {
        font-size: 20px;
    }
}

@media all and (device-width: 960px) and (device-height: 640px) , (device-width: 640px) and (device-height: 960px) {
    html {
        font-size: 32px;
    }
}

@media all and (device-width: 480px) and (min-device-height: 800px) and (max-device-height: 900px) , (min-device-width: 800px) and (max-device-width: 900px) and (device-height: 480px) {
    html {
        font-size: 24px;
    }
}

@media all and (device-width: 360px) and (device-height: 640px) , (device-width: 640px) and (device-height: 360px) {
    html {
        font-size: 20px;
    }
}

@media all and (device-width: 320px) and (device-height: 480px) , (device-width: 480px) and (device-height: 320px) {
    html {
        font-size: 16px;
    }
}

@media all and (device-width: 240px) and (device-height: 320px) , (device-width: 320px) and (device-height: 240px) , (device-width: 320px) and (device-height: 320px) {
    html {
        font-size: 16px;
    }
}
/*魅族MX3 */
@media all and (device-width: 1080px) and (device-height: 1800px) {
    html {
        font-size: 42px;
    }
}
/*魅族MX4 pro*/
@media all and (device-width: 1536px) and (device-height: 2560px) {
    html {
        font-size: 58px;
    }

}
/*三星note4 */
@media all and (device-width: 1440px) and (device-height: 2560px) {
    html {
        font-size: 58px;
    }
}

欢迎分享本文,转载请保留出处:前端ABC » 使用media设置rem的值

分享到:更多 ()

发表评论 0