web布局

1、基础知识

1.1 em和rem区别

像素(px)是基于显示器分辨率的单位，em是基于文本本身的字体尺寸，pt则是固定单位。

1.1.1 em

em 作为 font-size 的单位时，其代表父元素的字体大小；em作为其他属性单位时，代表自身字体大小。

px（像素）与em之间的换算关系主要取决于浏览器的默认字体大小。在未经调整的浏览器中，默认字体大小通常是16px，因此1em等于16px。

基于这个默认设置，px到em的换算公式可以简化为：em值 = px值 ÷ 16。

例如，12px等于0.75em，10px等于0.625em。

因为em代表父元素字体大小，改动父元素的字体大小，子元素会等比例变化，多层嵌套的父子元素em与px之间计算比较复杂，让人诟病。

em做弹性布局的缺点还在于牵一发而动全身，一旦某个节点的字体大小发生变化，那么其后代元素都得重新计算。

1.1.2 rem

rem (root em)是一个相对单位，类似于em，em是父元素字体大，rem是相对于html元素的字体大小，整个页面只有一个html，很好控制整个页面元素大小。比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。

html {
    font-size: 12px;
}

优势：父元素文字大小可能不一致，但是整个页面只有一个html，可以很好来控制整个页面的元素大小。

注：rem 作用于非根元素时，是相对于根元素的字体大小；rem作用于根元素字体大小时，相对于其初始字体大小。

百分比布局和flex布局都没有解决两个问题

页面中的文字不能随着屏幕变化而变化
百分比布局和flex布局主要针对宽度布局，高度一致被忽视

采用 rem 布局，可以让屏幕发生变化时，元素的高度和宽度以及文字大小等能够等比例缩放。

rem布局的本质是等比缩放，一般是基于宽度。

rem是弹性布局的一种实现方式，弹性布局强调等比缩放，100%还原；响应式布局强调不同屏幕要有不同的显示，比如媒体查询；

一般内容型的网站，都不太适合使用rem，因为大屏用户可以自己选择是要更大字体，还是要更多内容，一旦使用了rem，就剥夺了用户的自由；

一些偏向app类的，图标类的，图片类的，比如淘宝，活动页面，比较适合使用rem，因为调大字体时并不会调大图标的大小。

1.2 dpr

1.2.1 物理像素

屏幕实际拥有的像素点，是硬件层面的最小显示单元。例如，一个分辨率为 1920x1080 的屏幕，水平方向有 1920 个物理像素，垂直方向有 1080 个物理像素。

注意，我们通常所说的显示器分辨率，其实是指桌面设定的分辨率，而不是显示器的物理分辨率。只有在桌面分辨率与物理分辨率一致的情况下，显示效果最佳。

1.2.2 CSS像素

是Web编程中使用的逻辑单位，指的是CSS中使用的逻辑像素或虚拟像素。

浏览器内的一切长度都是以 CSS 像素为单位的，CSS 像素的单位是 px。在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。

px是一个相对单位，相对的是设备物理像素（Device Pixel），pt 在 css 单位中属于真正的绝对单位，1pt = 1/72(inch),inch 及英寸，而1英寸等于2.54厘米。

CSS像素的大小在不同的设备和环境下可以变化，主要体现在以下几个方面：

‌相对性‌：在同一设备上，CSS像素的大小可以根据屏幕分辨率的变化而变化。例如，当用户缩放页面时，CSS像素所代表的物理尺寸会相应调整。
‌跨设备一致性‌：在不同设备之间，CSS像素的大小也可以变化。高DPR（Device Pixel Ratio）的设备上，一个CSS像素可能对应多个设备像素，从而在不同设备上保持视觉一致性‌12。

1.2.3 设备独立像素

设备独立像素（Device Independent Pixel, DIP）是一种与具体设备无关的逻辑像素度量单位，代表可以通过程序控制使用的虚拟像素。它旨在提供一种相对稳定和统一的度量标准，以便在不同设备上呈现一致的视觉效果。

为什么会出现设备独立像素这种虚拟像素单位概念呢？

假设，我有一个iPhone12 和 iPhone13，尺寸都是5.4，iphone12的分辨率是1040*960， iphone13的分辨率是2080×1170，那么，ihpone12有1170个物理像素，iphone有2532个物理像素。

如果按照真实物理像素进行布局，以12为例，那么到13上，又会出现一半的空白，为了避免这种情况的出现，出现了虚拟像素单位，我们统一12和13的虚拟像素都是1040个，只是在12上，1个虚拟像素被换算成1个物理像素，在13上，1个虚拟像素，被换算成2个物理像素。

设备独立像素的应用场景和特点包括：

‌跨平台一致性‌：无论是在高DPR的设备还是低DPR的设备上，设备独立像素都能保证内容的视觉一致性。浏览器会根据设备的DPR将CSS像素转换为相应的设备像素进行显示‌。
‌逻辑度量‌：设备独立像素是一种逻辑度量单位，用于软件开发中，确保在不同设备上都能达到预期的视觉效果。它不依赖于具体的物理设备特性，而是通过程序控制使用‌

1.2.4 DPR

设备像素比 (Device Pixel Ratio，简称 DPR) 指的是物理像素和设备独立像素的比率。它描述了在设备屏幕上的一个 CSS 像素代表多少个实际的物理像素。

window.devicePixelRatio = 物理像素/ 设备独立像素，在js中通过 window.devicePixelRatio 获取。

根据换算关系可推出：CSS像素 =设备独立像素 = 逻辑像素。此时CSS像素就可以看做是设备的独立像素，所以通过 devicePixelRatio，我们可以知道该设备上一个css像素代表多少个物理像素。

当设备像素比为1:1时，使用1（1×1）个设备像素显示1个CSS像素

当设备像素比为2:1时，使用4（2×2）个设备像素显示1个CSS像素

当设备像素比为3:1时，使用9（3×3）个设备像素显示1个CSS像素

DPR 的出现是为了解决高分辨率屏幕上的显示问题。在早期的低分辨率屏幕上，一个 CSS 像素对应一个物理像素 (DPR=1)。随着高分屏 (例如 Retina 屏幕) 的普及，为了保持网页内容的清晰度，需要在一个 CSS 像素内渲染更多的物理像素。例如，一个 DPR 为 2 的屏幕，一个 CSS 像素对应 2x2 个物理像素；一个 DPR 为 3 的屏幕，一个 CSS 像素对应 3x3 个物理像素。

在css中我们一般使用px作为单位,css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。

现在有很多手机分辨率都非常大，比如768x1024，或者1080x1920这样，分辨率越大，css中1px代表的物理像素就会越多，devicePixelRatio的值也越大。

这很好理解，因为分辨率增大了，但屏幕尺寸并没有变大多少，必须让css中的1px代表更多的物理像素，才能让1px的东西在屏幕上的大小与那些低分辨率的设备差不多，不然就会因为太小而看不清。

例如：在iphone3上，一个css像素等于一个屏幕物理像素，从iphone4开始，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。

还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。

比如iPhone 5使用的是Retina屏幕，设备物理像素为640 x 1136px，使用2px x 2px的设备物理像素，代表 1px x 1px 的 CSS像素，所以

DPR 的影响:

图片清晰度: 为了在高分屏上显示清晰的图片，需要提供更高分辨率的图片。例如，如果一个图片在 DPR 为 1 的屏幕上显示大小为 100x100 像素，那么在 DPR 为 2 的屏幕上，需要提供 200x200 像素的图片，以保证相同的显示尺寸和清晰度。
布局和字体大小: DPR 会影响 CSS 像素的大小，因此需要根据 DPR 进行调整，以确保布局和字体大小在不同设备上保持一致。
JavaScript 获取 DPR: 可以使用 window.devicePixelRatio 属性获取当前设备的 DPR。

1.3 viewport

移动设备上有三个viewport(视口)：

布局视口(layout viewport)：浏览器默认的viewport叫做 layout viewport，是浏览器绘制网页的视口，本质上代表了可见的区域。这个layout viewport的宽度可以通过 document.documentElement.clientWidth 浏览器窗口可视区宽度（不包含浏览器控制台、菜单栏、工具栏、滚动条）来获取
视觉视口(visual viewport，也叫可视视口)：layout viewport 的宽度是大于浏览器可视区域的宽度的，所以我们还需要一个viewport来代表浏览器可视区域的大小，ppk把这个viewport叫做 visual viewport 。visual viewport的宽度可以通过window.innerWidth 来获取，但在Android 2, Oprea mini 和 UC 8中无法正确获取。
理想viewport(ideal viewport)：现在越来越多的网站都会为移动设备进行单独的设计，所以必须还要有一个能完美适配移动设备的viewport，ideal viewport是最适合移动设备的viewport，ideal viewport的宽度等于移动设备的屏幕宽度。ideal viewport 的意义在于，无论在何种分辨率的屏幕下，那些针对ideal viewport 而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美的呈现给用户。所谓的完美适配指的是，首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；其次，显示的文字的大小合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清，理想的情况是这段14px的文字无论是在何种密度屏幕，何种分辨率下，显示出来的大小都是差不多的。当然，不只是文字，其他元素像图片什么的也是这个道理。ppk把这个viewport叫做 ideal viewport

移动设备默认的viewport是layout viewport，也就是那个比屏幕要宽的viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport。

为什么需要有理想的viewport呢？

比如一个分辨率为320x480的手机理想viewport的宽度是320px，而另一个屏幕尺寸相同但分辨率为640x960的手机的理想viewport宽度也是为320px，那为什么分辨率大的这个手机的理想宽度要跟分辨率小的那个手机的理想宽度一样呢？

这是因为，只有这样才能保证同样的网站在不同分辨率的设备上看起来都是一样或差不多的。实际上，现在市面上虽然有那么多不同种类不同品牌不同分辨率的手机，但它们的理想viewport宽度归纳起来无非也就 320、360、384、400等几种，都是非常接近的，理想宽度的相近也就意味着我们针对某个设备的理想viewport而做出的网站，在其他设备上的表现也不会相差非常多甚至是表现一样的。

那么怎么才能得到ideal viewport呢？

要得到ideal viewport就必须把默认的layout viewport的宽度设为移动设备的屏幕宽度,因为meta viewport中的width能控制layout viewport的宽度，所以我们只需要把width设为width-device这个特殊的值就行了

<meta name="viewport" content="width=device-width,  maximum-scale=1.0, user-scalable=0">

注：在iphone和ipad上，无论你给viewport设的宽的是多少，如果没有指定默认的缩放值，则iphone和ipad会自动计算这个缩放值，以达到当前页面不会出现横向滚动条(或者说viewport的宽度就是屏幕的宽度)的目的。

该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。

如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport(layout viewport)，也就是说会出现横向滚动条。移动设备上的默认的viewport都是要大于浏览器可视区域的，这是为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px等。

注：在iphone和ipad上，无论是竖屏还是横屏，宽度都是竖屏时ideal viewport的宽度。

ideal viewport并没有一个固定的尺寸，不同的设备拥有有不同的ideal viewport。所有的iphone的ideal viewport宽度都是320px，无论它的屏幕宽度是320还是640，也就是说，在iphone中，css中的320px就代表iphone屏幕的宽度。但是安卓设备就比较复杂了，有320px的，有360px的，有384px的等等。

因为缩放是相对于 ideal viewport来进行缩放的，当对ideal viewport进行100%的缩放，也就是缩放值为1的时候，也会得到 ideal viewport

<meta name="viewport" content="initial-scale=1">

缩放是相对于ideal viewport来缩放的，缩放值越大，当前viewport的宽度就会越小，反之亦然。例如在iphone中，ideal viewport的宽度是320px，如果我们设置 initial-scale=2 ，此时viewport（visual viewport）的宽度会变为只有160px了，这也好理解，放大了一倍嘛，就是原来1px的东西变成2px了，但是1px变为2px并不是把原来的320px变为640px了，而是在实际宽度不变的情况下，1px变得跟原来的2px的长度一样了，所以放大2倍后原来需要320px才能填满的宽度现在只需要160px就做到了。因此，我们可以得出一个公式：
visual viewport宽度 = ideal viewport宽度 / 当前缩放值
当前缩放值 = ideal viewport宽度 / visual viewport宽度

如果width 和 initial-scale=1同时出现，那么浏览器到底该服从哪个命令呢？

当遇到这种情况时，浏览器会取它们两个中较大的那个值。例如，当width=400，ideal viewport的宽度为320时，取的是400；当width=400， ideal viewport的宽度为480时，取的是ideal viewport的宽度。（ps:在uc9浏览器中，当initial-scale=1时，无论width属性的值为多少，此时viewport的宽度永远都是ideal viewport的宽度）

把viewport宽度设为ideal viewport的宽度，既可以设置 width=device-width，也可以设置 initial-scale=1，但这两者各有一个小缺陷，就是iphone、ipad以及IE 会横竖屏不分，通通以竖屏的ideal viewport宽度为准。所以，最完美的写法应该是，两者都写上去，这样就 initial-scale=1 解决了 iphone、ipad的毛病，width=device-width则解决了IE的毛病

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

动态改变meta viewport标签

document.write('<meta name="viewport" content="width=device-width,initial-scale=1">')

或

<meta id="testViewport" name="viewport" content="width = 380">
let vp = document.getElementById('testViewport');
vp.setAttribute('content','width=480');

2、布局方式

自适应是最早出现的，后面才有了响应式。

自适应布局的主要目的是确保网页在不同大小的设备上都能以相同的方式呈现。然而，这种布局方式在屏幕尺寸缩小到一定程度时，可能会显得过于拥挤，无法自动调整页面的布局。

响应式布局则是为了解决自适应布局的局限性而诞生的。它能够根据屏幕的尺寸变化自动调整页面的布局，使得页面在不同设备上都能以最合适的方式展示。响应式布局可以自动识别屏幕宽度，并根据宽度变化调整页面元素的位置和大小，从而提供更好的用户体验。

响应式布局提供了更灵活和适应性强的设计方案，而自适应布局则更适合在特定设备上提供一致的用户体验。

如图：响应式布局时同一个页面用不同设备（电脑、平板、手机）去访问此页面，最后看到的布局和内容都有很大不同。自适应布局时看到的页面内容和布局基本上还是一样的，就是尺寸略有不同。

响应式布局的优势

‌灵活性‌：响应式布局能够根据屏幕尺寸的变化自动调整页面布局和元素大小，提供更好的用户体验。例如，当屏幕宽度减半时，图片和内容会自动调整为一行显示三个而不是六个，从而避免页面过于拥挤‌4。
‌兼容性‌：响应式设计能够兼容各种设备和屏幕尺寸，无需为每种设备开发不同的版本，简化了开发和维护工作‌。
‌现代标准‌：随着Web标准的不断发展，响应式设计已成为主流，大多数现代网站都采用响应式布局来适应不同的浏览设备‌。

自适应布局的适用场景和维护成本

‌特定需求‌：在需要确保在不同设备上提供一致用户体验的场景中，自适应布局更为适合。例如，某些应用需要在特定设备上保持一致的界面风格和功能‌。
‌维护成本‌：自适应布局需要为每种设备维护一套布局文件，随着设备种类的增加，维护成本也会相应增加。而响应式布局则通过一套代码即可适应多种设备，减少了维护工作量‌

2 响应式布局实现方式

2.1 百分比%布局

当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。

流式布局（Liquid Layout）就是百分比布局，也称非固定像素布局。

这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那是屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：

weight，width属性的百分比依托于父标签的宽高。但是，padding、border、margin等属性的情况又不一样。

属性的百分比：

子元素的top和bottom如果设置百分比，则相对于直接非static定位(默认定位)的父元素的高度，同样，子元素的left和right如果设置百分比，则相对于直接非static定位(默认定位的)父元素的宽度。
子元素的padding如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。
子元素的margin如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width
border-radius不一样，如果设置border-radius为百分比，则是相对于自身的宽度

缺点：

计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。
各个属性中如果使用百分比，相对父元素的属性并不是唯一的。比如width和height相对于父元素的width和height，而margin、padding不管垂直还是水平方向都相对比父元素的宽度、border-radius则是相对于元素自身等等，造成我们使用百分比单位容易使布局问题变得复杂。
宽度使用百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。

所以，不建议用%来做响应式布局！！！

由于没办法对 font-size 进行百分比设置，所以用的最多就是对图片和大块布局进行百分比设置！

2.2 、媒体查询(Media Query)

响应式布局的关键技术是CSS3中的媒体查询，监测设备屏幕大小，通过css媒体查询来有针对性的更改页面的布局，可以监测屏幕方向(移动设备)，设备类型等等，核心在于感知。在不同屏幕下可以显示不同版式。响应式是用于解决不用设备之间不用分辨率之间的兼容问题(一般是指PC，平板，手机等设备之间较大的分辨率差异)

响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表Web浏览器等等）都能显示出令人满意的效果，

因为是css3时代才有的新技术，那坑爹的IE6、7、8铁定不支持了，所以，使用媒体查询的时候要用js做一下小小的兼容。

对CSS编写者而言，在实现上不拘泥于具体手法，但通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用

以下是媒体查询结合flex弹性布局实现响应式布局：

使用rem作为元素的单位，元素的尺寸就会随着 html 中 font-size 的变化而变换。当屏幕较大时，设置 font-size 为较大值，元素就会变大；当屏幕较小时，设置 font-size 为较小值，元素就会变小。

什么是媒体查询：

媒体指的就是各种设备 (移动设备, PC设备)
查询指的是要检测属于哪种设备
媒体查询: 通过查询当前属于哪种设备,让网页能够在不同的设备下正常的预览

媒体查询语法：

用 @media开头注意@符号
mediatype 媒体类型
关键字 and not only
media feature媒体特性必须有小括号包含

格式：

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

mediatype 查询类型

all (所有的设备)
print (打印设备)
screen (电脑屏幕,平板电脑,智能手机)

关键字
目的将媒体类型和媒体特性链接到一块,进行设备检测

and 可以将多个媒体特性链接到一块,相当于且
not 排除某个媒体特性相当于非,可以省略
only 指定某个特定的媒体类型, 可以省略

媒体特性
每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。

用来描述设备的特点,比如宽度,高度…

注意他们要加小括号包含

width 网页显示区域完全等于设置的宽度
height 网页显示区域完全等于设置的高度
max-width / max-height网页显示区域小于等于设置的宽度
min-width / min-width 网页显示区域大于等于设置的宽度
orientation:portrait (竖屏模式) | landscape (横屏模式)

例如：

@media screen and (min-width:1000px){ // 大于1000px，对应PC端页面
    html,body{ 
        font-size:14px;
    }
} 
@media screen and (max-width:1000px) and (min-width:768px){ //在小于1000px和大于768px之间，对应平板端页面
    html,body{font-size:13px;}
}
@media screen and (max-width:768px){ // 小于768px，对应手机端页面
    html,body{font-size:12px;}
}

以上是利用媒体查询，在不同分辨率下给 html 的 font-size 赋值。

以下是利用 js 动态计算赋值，缺点就是打开页面时候，元素大小会有一个变化过程。

优化版：

当设计师交付给前端开发一张宽度为750px的视觉稿，设计稿是基于 iPhone6 设计的，也就是宽度 750px（先不考虑dpr的问题下面会说），要求工程师工适配不同屏幕尺寸的设备。

采用等比缩放的方案：

假如设置 1rem 等于 100px（ HTML font-size 为 100px），相当于 7.5rem = 100%宽度 = 设备的宽度。

由于是基于 7.5rem 开发。iPhone6 的物理像素是 375px（dpr是2.0），如果此时还想让 7.5rem 等于设备宽度，只能调整 1rem 对应 font-size 的比例，让 1rem= 375 / 7.5=50px 就可以实现。

如果想让 iPhone5 适配只需要 1rem = （320 / 7.5） = 42.66px 就可以实现 iPhone5 的适配。
此时我们需要动态计算并设置不同尺寸 html 的 font-size 属性，让rem 方案既能实现页面级整体缩放，又能个性化控制某些元素不缩放。

// 改变窗口大小时重新设置 rem
window.onresize = function () {
    setRem();
}
function setRem(isFirst) {
  let clientWidth = document.documentElement.clientWidth;// 当前页面宽度
  clientWidth = width > 750 ? 750 : width;// 屏幕宽度大于750，不再放大
  document.documentElement.style.fontSize = clientWidth / 7.5 + 'px';    // 设置页面根节点字体大小
}
setRem();

2.3 vw/vh

css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度。任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一。

与百分比布局很相似，但更好用。

现阶段手机端用的最多就是这个方法，能保持不同屏幕下元素显示效果一致，也不用写多套样式。

2.4 rem

rem单位是相对于字体大小的html元素，也称为根元素。默认情况下，html元素的font-size为16px。所以此时1rem = 16px。

一般结合媒体查询实现响应式布局。参考2.1

2.5 flex 弹性布局

弹性布局是一种十分方便的，只需要依赖于CSS样式的实现响应式布局的方式，也是最多用到的一种实现响应式的方法。

尤其是现在类似于某宝、某东一类的电商web站或者手机app的页面，利用弹性布局是都可以很轻松的实现的。

弹性布局在父、子元素上都有相对应的属性来规范子元素在父元素中的“弹力”：

在父元素上，我们经常会用到的有关弹性布局的属性主要有 flex-direction , flex-wrap , justify-content , align-items , align-content ，这几个属性分别从主轴的方向、是否换行、项目在主轴上的对齐方式、项目在交叉轴上的对齐方式、项目在多根轴线上的对齐方式来规范了项目在父元素中的弹性。
在子元素上，我们经常会用到的有关弹性布局的属性主要有 order , flex-grow , flex-shrink ,flex-basis , align-self ，这几个属性分别从项目的排序、项目放大比例、项目缩小比例、项目占据主轴空间、单个项目在交叉轴上的对齐方式来规范了项目自身的弹性

2.6 利用UI框架实现响应式布局

现在的主流UI框架都会考虑到响应式布局这个问题，比如elementUI，iview等框架提供了栅格系统，<row>搭配<col>来实现响应式布局。

2.7 移动端响应式布局 viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

这个写法是用户不能缩放的页面设计。因为，如果页面能缩放的话，就会影响用户的体验。其二：就是我们如果让页面缩放的话，就完全暴露了我们手机app的程序是html的架构了。

所以，我们专为移动端的设计页面的时候，就不需要用户进行缩放了

2.8 移动端自适应方案 flexible.js

flexible.js是手淘开发出的一个用来适配移动端的js框架。手淘框架的核心原理就是根据制不同的width给网页中html根节点设置不同的font-size，然后所有的px都用rem来代替，这样就实现了不同大小的屏幕都适应相同的样式了。其实它就是一个终端设备适配的解决方案，也就是说它可以让你在不同的终端设备中实现页面适配

2.9 grid

主要是利用grid的特性来实现响应布局

^{2.10 Columns栅格系统}

Columns栅格系统往往需要依赖某个UI库，如Bootstrap或者是Element UI等.

Bootstrap来自Twitter，是一个用于快速开发 Web 应用程序和网站的前端框架。它提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的改变，系统会自动将视口分为最多12列。它根据当前视口的大小添加多个媒体查询断点，可以让开发者方便的根据视口大小调整每个网格所占整体视口的宽度。
Bootstrap(5.0)有六种默认响应尺寸：xs、sm、md、lg、xl、xxl,对应关系如下