rem适配所有屏幕大小demo分享

来源：互联网发布：两组数据的对比编辑：程序博客网时间：2024/06/07 05:39

前两天学习了rem的使用，下面是一个小demo，使页面能够根据屏幕大小自行增大和缩小，利用的就是rem的等比缩放~~~发现错误请告诉我，谢谢

方案一：

利用css的calc函数对html元素的font-size大小进行计算，100vw是viewport视区的宽度（即浏览器内部的可视区域大小，window.innerWidth）,/750*100相当于/7.5,即当font-size设置为100px时，7.5rem刚好是页面的最大宽度，以此为比例，计算其他屏幕尺寸时，根元素的font-size大小；

方案二：

其实就是按照方案一的算法，把一些屏幕大小范围设置一个指定的font-size~~~

方案三：

当屏幕小于一个最小值，给根元素font-size设置一个定值，当屏幕大于一个最大值，给根元素font-size设置一个定值；最大和最小之间，等比例增加font-size,每一份所占font-size为：
(max-fontsize - min-fontsize) / (max-screen - min-screen)

代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>rem demo</title>    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1">    <style>        .demo{            width:2rem;            height:2rem;            position:absolute;            top:0;            left:0;            right:0;            bottom:0;            margin:auto;            padding:0.1rem;            box-shadow:inset 0px 0px 0.2rem 0.01rem #1db11d;            font-size:0.4rem;            color:red;            font-family: "arial";        }        @media screen and (min-width: 240px) and (max-width:1500px){            html{                font-size:calc(100vw/750*100);            }        }        @media screen and (min-width: 1500px){            html{                font-size:200px;            }        }        /*        方案二:        @media screen and (min-width: 240px) {html{font-size:32px;}}        @media screen and (min-width: 320px) {html{font-size:42.66px;}}        @media screen and (min-width: 360px) {html{font-size:48px;}}        @media screen and (min-width: 375px) {html{font-size:50px;}}        @media screen and (min-width: 400px) {html{font-size:53.33px;}}        @media screen and (min-width: 414px) {html{font-size:55.2px;}}        @media screen and (min-width: 440px) {html{font-size:58.66px;}}        @media screen and (min-width: 480px) {html{font-size:64px;}}        @media screen and (min-width: 520px) {html{font-size:69.33px;}}        @media screen and (min-width: 560px) {html{font-size:74.66px;}}        @media screen and (min-width: 600px) {html{font-size:80px;}}        @media screen and (min-width: 640px) {html{font-size:85.33px;}}        @media screen and (min-width: 680px) {html{font-size:90.66px;}}        @media screen and (min-width: 720px) {html{font-size:96px;}}        @media screen and (min-width: 760px) {html{font-size:101.33px;}}        @media screen and (min-width: 800px) {html{font-size:106.66px;}}        @media screen and (min-width: 960px) {html{font-size:128px;}}        */        /*         方案三        html{            font-size:50px        }        @media screen and (min-width: 400px) and (max-width: 960px){            html{font-size:calc( ( 78 / 560 ) * ( 100vw - 400px ) + 50px );}        }        @media screen and (min-width: 960px){            html{font-size:128px;}        }        */    </style></head><body>    <div class="demo">        hello,这里是rem demo!    </div></body></html>

阅读全文

1 0