前端自适应布局全解析-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43889562/article/details/118282695

前言

相信各位同学写前端页面的时候都会面临一个问题——自适应，接下来我将记录下我的自适应学习历程。

1、媒体查询（Media Query）

这种方式虽然能够解决自适应的问题，但是写法比较麻烦，你针对需要适应的屏幕尺寸写CSS样式，这就会导致你的CSS文件看起来非常繁琐冗长，代码如下所示

/* 屏幕尺寸大于460小于550使用的样式 */
@media screen and (max-width: 550px) {
    body {
        background-color: black;
    }
}

/* 屏幕尺寸大于320小于460使用的样式 */
@media screen and (max-width: 460px) {
    body {
        background-color: yellow;
    }
}

/* 屏幕尺寸小于300时使用的样式 */
@media screen and (max-width: 320px) {
    body {
        background-color: blue;
    }
}

如果觉得写在同一个CSS文件太繁琐也可以把它们拆出来例如

<link rel="stylesheet" media="screen and (max-width: 460px)" href="css/Adaptive460.css">
<link rel="stylesheet" media="screen and (max-width: 320px)" href="css/Adaptive320.css">

自此第一种方法就记录到这里，想深入学习请移步

2、百分比（%）

这种方式比前一种方式要简化太多了，通过%实现响应式布局也叫流式布局。
width:宽度的百分比是相对于父盒子width内容宽的比。没有父盒子就是相对于浏览器的宽。
height:高度的百分比是相对于父盒子height内容高的比。
padding,margin:padding和margin不管任何方向百分比都是相对于父盒子width内容宽的比。
示例代码如下：

html,body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}
.adaptive {
	height: 50%;
	width: 100%;
	background-color: yellow;
}

3、Flex布局

传统布局方案都基于盒子模型，要不就让元素脱离文档流来布局，传统布局麻烦且对于特殊布局来说非常不方便，基于此背景下W3C于2009年提出一种新的布局方案——Flex布局，Flex布局又被称为弹性布局。代码演示
HTML:

 <div class="adaptive">
 	<div class="adaptive-item item-one">
    	1
    </div>
    <div class="adaptive-item item-two">
        2
    </div>
    <div class="adaptive-item item-three">
        3
    </div>
</div>

CSS:

.adaptive {
    display: flex;
    flex-direction: row;
    border: 1px solid #000;
}
.adaptive-item {
    background-color: blue;
}
.item-one,.item-two,.item-three {
    padding: 20px;
}
.item-one {
    background-color: white;
}
.item-two {
    background-color: yellow;
}
.item-three {
    background-color: black;
    color: white;
}

结果：
在这里插入图片描述
想要做到自适应很简单你只需要修改CSS文件即可,代码如下：

.adaptive {
    display: flex;
    flex-direction: row;
    border: 1px solid #000;
}
.adaptive-item {
    background-color: blue;
}
.item-one,.item-two,.item-three {
    padding: 20px;
}
.item-one {
    background-color: white;
    flex: 1;
}
.item-two {
    background-color: yellow;
    flex: 2;
}
.item-three {
    background-color: black;
    color: white;
    flex: 3;
}

结果：
在这里插入图片描述

详细学习Flex布局请移步至阮大神

4、rem

欸~可能有的同学就会问了，啊！！这是个什么玩意儿啊，前面说的好歹知道，到这儿咋就不道了呢。别急，先简单介绍一下，rem是css3才有的一种新的长度单位，在W3C中有这样的定义：REM（Font size of the root element）是指相对于html根元素的字体大小的单位(就是字体大小即1rem=16px浏览器默认字体大小)。一般用于在移动端中解决多种机型适配问题。
简单介绍完以后我们要知道rem要如何计算呢？接下来简单解释

// 1、获取设备宽度 我这里为表示清楚下面直接写320
// 2、设计图尺寸||视觉稿大小
let htmlWidth= document.documentElement.clientWidth || document.body.clientWidth
let proportion = （htmlWidth）320 / (视觉稿大小) 640    (0.5) // 此时 1rem = 0.5px 不好换算
let proportion *= 100 (50) 
// 此时1rem = 50px

想通过rem实现响应式布局的小伙伴可以参考如下代码，在页面引入这段代码即可。

    (function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if(clientWidth>=640){
                    docEl.style.fontSize = '100px';
                }else{
                    docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                }
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

5、vw/vh

欸~这两位兄弟也是css3才有的属性，vw(Viewport Width)和vh(Viewport height)是视口单位，何谓视口，就是根据你浏览器窗口的大小的单位，不受显示器分辨率的影响，是不是很神奇，这就代表了，我们不需要顾虑到现在那么多不同电脑有关分辨率的自适应问题。
vw : 1vw 等于视口宽度的1%
vh : 1vh 等于视口高度的1%
vmin : 选取 vw 和 vh 中最小的那个
vmax : 选取 vw 和 vh 中最大的那个
啊！！看到这儿可能有的同学就会问了，那我们为什么不直接用百分比呢。

单位	特点
%	通常此单位依赖于元素的祖先元素
vw/vh	依赖于视口单位的尺寸

vw/vh更像是理想状态下的百分比，任意层级元素使用vw/vh,1vw都等于视口尺寸的1%，例如，浏览器视口尺寸为460px，那么 1vw = 460 * 1% = 4.6px（这是理论推算的出，如果浏览器不支持0.6px，那么实际渲染结果可能是5px）。
代码演示：
HTML:

    <div class="father">
        <div class="child"></div>
    </div>

CSS:

body {
	height: 100vh;
	width: 100vw;
    padding: 0;
    margin: 0;
}
.father {
	height: 50vh;
	width: 50vw;
    background-color: blue;
}
.child {
	height: 20vh;
	width: 100vw;
    background-color: yellow;
}