怎样定义html中rem默认值,前端开发使用media设置rem的值

@media all {

font-size: 16px;

}

}

@media all and (min-width: 140px) and (min-height: 220px) {

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;

}

}