前端开发使用media设置rem的值

安卓混合开发前端页面 前端开发如何读取mht 安卓开发是前端开发吗

rem.css

@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) {
    html {
        font-size: 16px;
    }
}
/* 兼容iphone6 plus */
@media (device-width: 414px) and (device-height: 736px) and (-webkit-min-device-pixel-ratio: 3) {
    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) {
    html {
        font-size: 48px;
    }
}
/*兼容小米4等*/
@media all and (device-width: 1080px) and (device-height: 1920px) and (-webkit-min-device-pixel-ratio: 3) {
    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;
    }
}

安卓开发是前端开发吗 前端开发后台安卓驱动区别 如何学好web前端开发

» 本文来自:前端开发者 » 《前端开发使用media设置rem的值》
» 本文链接地址:https://www.rokub.com/5703.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!