@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的值