自适应页面如何布局以及字体大小如何设置？

水深无声 2022-12-08 05:42 744阅读 0赞

页面自适应，是指页面内容自动适应屏幕大小。实现自适应的方法有多种：

1、简易场景实现自适应：浮动、页面居中、设置百分比属性、自动匹配大小。这样在页面宽度发生变化时，能利用以上特性实现简易的自适应效果。

2、如果实际开发中有复杂场景的需求，一般通过编写多套CSS代码，然后用媒体查询技术，让页面根据不同屏幕尺寸来加载不同代码模块以实现适配不同屏幕的目的。这种方式需要编写多套代码，虽然工作量大，但对于不同屏幕尺寸的设备都有单独一套CSS代码，维护起来更方便。  
3、响应式布局，响应式布局是指根据不同屏幕尺寸自动调整页面显示效果实现自适应(也要用到媒体查询技术)。响应式布局一般有栅格系统布局，flex布局。bootstrap框架的核心就是栅格系统。

一、以浏览器默认字体的大小做自适应的，一般情况下浏览器默认字体为16px。

**自适应网站**

html {font-size: 62.5%!important; /* 10÷16=62.5% */}
    @media only screen and (min-width: 481px){
        html {
            font-size: 94%!important; /* 15.04÷16=94% */
        }
    }
    @media only screen and (min-width: 561px){
        html {
            font-size: 109%!important; /* 17.44÷16=109% */
        }
    }
    @media only screen and (min-width: 641px){
        html {
            font-size: 125%!important; /* 20÷16=125% */
        }
    }

app

@media only screen and (min-width: 320px) {
      html {
        font-size: 62.5% !important;
      }
    }
    @media only screen and (min-width: 360px) {
      html {
        font-size: 72.5% !important;
      }
    }
    @media only screen and (min-width: 400px) {
      html {
        font-size: 82.5% !important;
      }
    }
    @media only screen and (min-width: 480px) {
      html {
        font-size: 94% !important;
      }
    }

二、移动设备设置

html { font-size:100px; }
    @media(max-width:540px){ html { font-size:84.375px; } } /*Android常用宽度*/
    @media(max-width:480px){ html { font-size:75px; } }        /*Android常用宽度*/
    @media(max-width:414px){ html { font-size:64.69px; } }  /*i6Plus,i7Plus宽度*/  
    @media(max-width:375px){ html { font-size:58.59px; } }    /*i6,i7宽度*/
    @media(max-width:360px){ html { font-size:56.25px; } }    /*Android常用宽度*/
    @media(max-width:320px){ html { font-size:50px; } }        /*i5宽度*/

代码中的效果：

当设备、浏览器宽度大小（小于等于）540px的时候，html的font-size就不再是100px，而是84.375px。

同样的当设备、浏览器宽度大小（小于等于）480px的时候，html的font-size就不再是84.375px，而是75px。

以此类推，我们可以根据不同的设备、浏览器宽度大小来设置不同的样式。这就是响应式了。

三、vw，vh

vw它是根据可视区的宽度来计算的。

vh它是根据可视区的高度来计算的。

<body>
    <style>
    body { margin:0; }
    .testDiv { width:100vw; height:100vh; font-size:10vw; background:#ccc; }
    </style>
     
    <div class="testDiv" ></div>
    </body>

其中100vw是把.testDiv的宽度设备为充满整个移动设备(浏览器)可视区宽度,100vh是把.testDiv的高度设置为充满整个移动端设备(浏览器)可视区高度。

如果是10vw，就是当前移动设备(浏览器)宽度的十分之一大小；10vh是当前设备(浏览器)高度的十分之一大小

如果是50vw，当前移动端设备(浏览器)可视区宽度的一半，50vh是可视区高度的一半。

font-size:10vw。如果浏览器可视区宽度为640px的话，那么他在640px的时候的字体大小为64px；而在320px的时候字体大小为32px;

四、rem加vw

可以直接在设置

html,
    body,
    #__nuxt,
    #__layout {
      height: 100%;
      overflow: hidden;
      font-size: 10vw;
    }

然后在页面布局的时候使用rem来布局。

注意：以上说的只是在页面布局的时候，不用容器或者图片在布局的时候使用rem,页面上字体的大小要单独设置。