代码描述:JavaScript移动端 页面大小自适应 代码实例。JavaScript移动端页面大小自适应代码实例
分享一段代码片段,它利用媒体查询功能实现了页面大小自适应的功能。 因为移动端设备大小不一,自适应是非常重要的,代码是less实现的。 代码如下:
<script> html,body{ font-size: 10px; } @media screen and (min-width: 319px) { html, body { font-size: 12px; } } @media screen and (min-width: 359px) { html,body{ font-size: 13px; } } @media screen and (min-width: 374px) { html, body { font-size: 14px; } } @media screen and (min-width: 410px) { html,body{ font-size: 15px; } } @media screen and (min-width: 434px) { html, body { font-size: 16px; } } @media screen and (min-width: 559px) { html, body { font-size: 21px; } } @media screen and (min-width: 613px) { html,body{ font-size: 23px; } } @media screen and (min-width: 639px) { html, body { font-size: 24px; } } @media screen and (min-width: 719px) { html, body { font-size: 27px; } } @media screen and (min-width: 739px){ html,body{ font-size: 28px; } } @media screen and (min-width: 767px) { html, body { font-size: 29px; } } @media screen and (min-width: 819px){ html,body{ font-size: 31px; } } @media screen and (min-width: 939px){ html,body{ font-size: 33px; } } @media screen and (min-width: 959px) { html, body { font-size: 36px; } } @media screen and (min-width: 979px){ html,body{ font-size: 38px; } } @media screen and (min-width: 1079px) { html,body{ font-size: 40px; } } @media screen and (min-width: 1241px){ html,body{ font-size: 46px; } } $designPageWidth: 375; $pageWidthVSfontSize: 14; @function trans($px) { @return ( $px * $pageWidthVSfontSize / $designPageWidth) * 1rem; } </script>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能