1, with JS calculation
<script> (function(Doc, win) {varDocel =doc.documentelement, Resizeevt= ' Orientationchange 'inchWindow? ' Orientationchange ': ' Resize ', Recalc=function () { varClientWidth =Docel.clientwidth; if(!clientwidth)return; DocEl.style.fontSize= * (clientwidth/320) + ' px '; }; if(!doc.addeventlistener)return; Win.addeventlistener (Resizeevt, Recalc,false); Doc.addeventlistener (' domcontentloaded ', Recalc,false); }) (document, window);</script>
2. Media Enquiry "@media"
@media only screen and (max-width:320px) {html{font-size:9px;}} @media only screen and (min-width:320px) and (max-width:352px) {html{font-size:10px;}} @media only screen and (min-width:352px) and (max-width:384px) {html{font-size:11px;}} @media only screen and (min-width:384px) and (max-width:416px) {html{font-size:12px;}} @media only screen and (MIN-WIDTH:416PX) and (max-width:448px) {html{font-size:13px;}} @media only screen and (min-width:448px) and (max-width:480px) {html{font-size:14px;}} @media only screen and (min-width:480px) and (max-width:512px) {html{font-size:15px;}} @media only screen and (min-width:512px) and (max-width:544px) {html{font-size:16px;}} @media only screen and (min-width:544px) and (max-width:576px) {html{font-size:17px;}} @media only screen and (MIN-WIDTH:576PX) and (max-width:608px) {html{font-size:18px;}} @media only screen and (min-width:608px) and (max-width:640px) {html{font-size:19px;}} @media only screen and (min-width:640px) {html{font-size:20px;}}
Mobile-developed REM units