Mobile-based adaptation uses REM to write CSS, sorting out three scenarios:
Programme one:
Simple JS Adaptation
function Resizeroot (width) {
var devicewidth=document.documentelement.clientwidth,
Num=width,
num1=num/100;
if (devicewidth>num) {
Devicewidth=num;
}
document.documentelement.style.fontsize=devicewidth/num1+ "px";
}
resizeroot ();
window.onresize=function () {
Resizeroot (+)
}
get a 750 size design, use px/100
Method Two:
using Flexible.js to implement the terminal adaptation of the H5 page this is an adapter that Ali developed
get a 750 size design, use px/75
Method Three:
adapting with CSS files
@media screen and (min-width:300px) {html,body,input{font-size:15px}}
@media screen and (min-width:320px) {html,body,input{font-size:16px}}
@media screen and (min-width:340px) {html,body,input{font-size:17px}}
@media screen and (min-width:360px) {html,body,input{font-size:18px}}
@media screen and (min-width:375px) {html,body,input{font-size:18.75px}}
@media screen and (min-width:380px) {html,body,input{font-size:19px}}
@media screen and (min-width:400px) {html,body,input{font-size:20px}}
@media screen and (min-width:414px) {html,body,input{font-size:20.7px}}
@media screen and (min-width:420px) {html,body,input{font-size:21px}}
@media screen and (min-width:440px) {html,body,input{font-size:22px}}
@media screen and (min-width:460px) {html,body,input{font-size:23px}}
@media screen and (min-width:480px) {html,body,input{font-size:24px}}
@media screen and (min-width:500px) {html,body,input{font-size:25px}}
@media screen and (min-width:520px) {html,body,input{font-size:26px}}
@media screen and (min-width:540px) {html,body,input{font-size:27px}}
@media screen and (min-width:560px) {html,body,input{font-size:28px}}
@media screen and (min-width:580px) {html,body,input{font-size:29px}}
@media screen and (min-width:600px) {html,body,input{font-size:30px}}
@media screen and (min-width:620px) {html,body,input{font-size:31px}}
@media screen and (min-width:640px) {html,body,input{font-size:32px}}
@media screen and (min-width:660px) {html,body,input{font-size:33px}}
@media screen and (min-width:680px) {html,body,input{font-size:34px}}
@media screen and (min-width:700px) {html,body,input{font-size:35px}}
@media screen and (min-width:720px) {html,body,input{font-size:36px}}
@media screen and (min-width:740px) {html,body,input{font-size:37px}}
@media screen and (min-width:760px) {html,body,input{font-size:38px}}
@media screen and (min-width:780px) {html,body,input{font-size:39px}}
@media screen and (min-width:800px) {html,body,input{font-size:40px}}
@media screen and (min-width:1024px) {html,body,input{font-size:51.2px}}
@media screen and (min-width:1349px) {html,body,input{font-size:67.45px}}
Get the 750 size design and find the corresponding size (divided by 2) with px/18.75
About mobile-side adaptation issues