如何做一个自适应网页？

背景

现在手机、电脑、ipad成为了每个家庭必备内容，但是通常设计给到我们的都是一个固定大小的UI，如果用户是一个屏幕小或者大的设备，一般就会出现滚动条或者大片空白内容，为了更好的利用一些空间，或者在各种屏幕上都有一个较好的体验，出现了网页设计的概念，自适应的概念，也就是随着屏幕尺寸的不同能够适配各种内容

ea6ac8_8abc6421adcc4f48abe6d09cb2b995c1_mv2.gif

如何做好各种屏幕的适配工作，响应式和自适应网页设计成为了新的挑战

一般来说，UI给到我们的都是一个固定尺寸的设计图，然后按照一定的比例进行页面的渲染，比如这里我们有一个两列布局，左侧是简介，右侧是详细的内容，正常的电脑尺寸下展示效果如下，采用的是左右布局的方式，左边宽度25%，右边70%，中间留有5%的间隙，看着还可以，并且也有一定的自适应的效果

Pasted image 20230605145959.png

但是当我们屏幕缩小到一定的尺寸，缩小到手机大小，就会发现阅读很难，一行放不下几个字，尤其是左侧的简介部分，如果屏幕过大，这么多字就放一行，阅读起来也会变的困难

Pasted image 20230605151021.png

那既然设计给了固定的尺寸，我们就按照固定的尺寸来，这样导致的结果就是展示上无问题，小屏幕上就会出现滚动条，大屏幕上就会有过多的留白，屏幕的利用率不高

Pasted image 20230605151617.png

在早期的时候，通常移动端和web端是分开的，也就是会搞两套，一个移动版本，一个pc版本，并且两者的功能要同步迭代，典型的例子就是 m.taobao.com 和 taobao.com

自适应网页设计

自适应网页设计是一种网页设计，专门为给定平台创建的布局，它能够让网页根据监测到的设备加载静态的预制布局，为了实现这点，设计师需要根据不同的屏幕宽度创建不同的设计

Pasted image 20230605171001.png

常见的尺寸一般手机600px以下，pc屏幕的宽度基本都在1000px以上，再大一些的2000px以上，一个网站在设计的时候就要考虑较这些屏幕，如果针对每个版本都提供一个不同的页面，这样维护成本较高，并且比较麻烦，迭代一个需求要做几遍，大大增加项目需求的复杂度

Pasted image 20230607174648.png

概念

那如何做到同一套代码的自适应？在开始之前我们先了解几种布局

固定布局/弹性布局

固定布局顾名思义，就是一个固定大小的设计，然后让内容在大屏中居中，小屏中有滚动条

body{
    width: 1200px;
    margin: 0 auto;
}

弹性布局其实就是根据浏览器窗口的大小更改大小，使用相对值（百分比、rem、em、vh、vw等）来进行，flex grid也属于自适应布局方式，另外max-width/min-width，max-height/min-height也属于弹性内容，当然内部的内容区域就需要使用比例进行书写

媒体查询

@media screen and (min-width: 800px) {
  .container {
    margin: 1em 2em;
  }
}

这段css表示的意思就是当前视口至少要有800像素，才会给.container选择器加上对应的css样式，你可以加入很多这样的条件，调整页面显示的最佳尺寸，改变相应的样式，这种行为被称为断点

同时在设计项目的时候，我们可以先完成一个手机端的页面，然后通过断点的方式不断完善pc的展示效果，这种通常被叫做移动优先设计

现代自适应布局

在很久之前，我们经常使用float进行多列布局，但是出现css3之后，现在我们通常使用flex、grid等现代的方式进行，本质是通过参照容器的空间大小，缩小或者放大每个元素分布的空间，达到动态平衡，更改flex-grow以及flex-shrink的值，达到预期的效果

而grid是一种二维的方式进行布局，这两者都可以达到动态更改元素所占空间大小的方式，然后再通过一些相对单位进行内容的填充，常用的一些相对单位

• 1vw - 窗口宽度的1%，当窗口宽度减小的时候，1vw表示的大小也会对应减小
• 1vh - 窗口高度的1%，当窗口高度减小的时候，1vh表示的大小也会对应减小
• vmin - 选择最小的vw和vh
• vmax - 选择最大的vw和vh

rem

rem的方式当前是不推荐的，因为有更好的方式，rem的方式在屏幕变化不大的情况下很有用，但是你要是想要把移动端的rem布局的内容直接放到pc上，就会出现下面的效果

Pasted image 20230606174604.png

页面上并没有展示更多的内容，反而变成了更大的字和图像，并且需要通过js计算根元素font-size的大小，或者使用媒体查询进行动态设置

实践

那既然有了上述的一些概念，我们如何做一个响应式的页面呢，本着移动端优先的原则，我们先简单写一个移动端的内容，首先需要写一个html文件，这个文件中要包含meta部分如下

<meta name="viewport" content="width=device-width, initial-scale=1" />

content中的width表示可视区域的宽度，值可为数字或关键词device-width表示设备宽度，intial-scale页面首次被显示是可视区域的缩放级别，取值1则页面按实际尺寸显示，无任何缩放，可以通过maximum-scale和minimum-scale设置最大最小缩放级别

通常我们的页面中有header、slider、content、footer这四大部分，按照这个逻辑，我们给出html的结构

<div class="container">
 <div class="header">Header</div>
 <div class="slider">Slider</div>
 <div class="content">Content</div>
 <div class="footer">Footer</div>
</div>

这里我们采用grid加栅格布局的方式，方便pc和移动端的转换，同时每个块之间的间距为10，添加上对应的样式，同时给每个区块加上对应的名字、颜色和高度（模拟内容的填充），小屏幕上不显示slider的内容

.container {
 display: grid;
 grid-template-columns: repeat(12, 1fr);
 grid-gap: 10px;
 grid-template-areas: "h h h h h h h h h h h h"
                        "c c c c c c c c c c c c"
                        "f f f f f f f f f f f f";
}
.header {
 grid-area: h;
 background: rgb(236, 167, 77);
 height: 60px;
}
.footer {
 grid-area: f;
 background: rgb(39, 200, 147);
 height: 160px;
}
.content {
 grid-area: c;
 background: rgb(30, 59, 30);
 height: 500px;
}
.slider {
 display: none;
 background: rgb(44, 125, 231);
 height: 60px;
}

_Users_01394862_Downloads_A liquid layout.html (1) 1.png

然后当屏幕的尺寸大于500的时候，我希望展示出来slider的内容

@media screen and (min-width: 500px) {
 .container {
  grid-template-areas:
   "h h h h h h s s s s s s"
   "c c c c c c c c c c c c"
   "f f f f f f f f f f f f";
 }
 .slider {
  display: block;
  grid-area: s;
 }
}

_Users_01394862_Downloads_A liquid layout.html.png

当屏幕的尺寸大于800的时候，我希望改变整个布局方式

@media screen and (min-width: 800px) {
 .container {
  grid-template-areas:
  "h h h h h h h h h h h h"
  "s s s s c c c c c c c c"
  "f f f f f f f f f f f f";
 }
 .slider {
  display: block;
  grid-area: s;
  height: 500px;
 }
}

_Users_01394862_Downloads_A liquid layout.html (2).png

这种自适应的方式在切换起来很流畅，并且布局的改动在grid的加成下变得异常简单明了

其实最本质的内容就是对不同的屏幕加载不同的css样式，你也可以使用媒体查询的方式加载css样式

<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 500px)" href="tinyScreen.css" />

或者@import的方式

@import url("tinyScreen.css") (min-width: 500px);

框架

TaiwindCSS

当前比较火的一些css的框架对于断点的实现也非常友好，比如TaiwindCSS中的断点加上对应的前缀就可以了，基于移动端优先的方式，它给了几个常用断点

Pasted image 20230606213705.png

在写断点的时候直接在元素上加前缀就可以了

<div class="p-2 md:p-4 lg:p-6"></div>

Bootstrap

Bootstrap也提供了一些断点的方式，本质也是媒体查询的东西

Pasted image 20230606215125.png

使用上可能会有一些区别

@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }

总结

其实整体看下来如果需要只是移动端的适配的话，rem就可以，但是通过rem放大到pc端就会存在只是放大页面内容，屏效比并没有获得提升，效果还是不理想，所以更加成熟的方案就是flex做响应的区块，grid做整体布局，然后根据块的内容用相对单位进行适配，整体下来可以实现一套代码完成多端的展示效果

在做响应式网站的时候，要注意相互结合，或者使用较好的一些框架，栅格化系统完成整体内容，做好各个环节的适配方案