如何”有效“减小js包的体积

为平时涉及移动端和C端项目都比较少，所以也不太注意js包的大小。直到这个礼拜五，实在忍不了了——赫然发现一个React前端组件的bundle竟然有400k，这还是uglify过的，gzip之后还有100k。

于是上午花了点时间，研究了一下怎么能让js包小一点。

之所以说“有效减小”，是因为有些自动化的方法，其实没有多大用处。

比如tree shaking，故事是很美好，但是我的代码普遍是直接跑到node_modules下面的子目录里面去引需要的文件，除非依赖库设计不良，否则tree shaking其实帮不上太大忙。再比如babel-plugin-import，由于同样的原因，也帮不上太大的忙。

那什么是有用的呢？其实就是笨办法，一个包一个包的裁剪。

推荐两个工具：

webpack-bundle-analyzer

地址：www.npmjs.com

webpack.github.io

地址：http://webpack.github.io/analyse/#home

webpack-bundle-analyzer

这个工具，顾名思义，就是用来分析你用webpack打的包里面都有些什么东西，以及他们有多大。

当你在你的webpack.config.js里添加了插件，比如这样——

var path=require('path')
var BundleAnalyzerPlugin=require('webpack-bundle-analyzer').BundleAnalyzerPlugin
var config={
 //...
 plugins: [
 new BundleAnalyzerPlugin({
 analyzerMode: 'static',
 reportFilename: 'BundleReport.html',
 logLevel: 'info'
 })
 ]
}
module.exports=config

webpack构建完成后你会得到一个BundleReport.html网页，在你打包的生成路径里面，同时浏览器会自动打开它。你看到的是这样的画面——

这个网页非常直观，以至于我不需要介绍它的用法。

通过分析各个模块的体积，我发现为了防止体积膨胀，有两个常用库要慎用：

lodashmoment

这两个库都是前端编程的主流工具，lodash提供了几乎是业界最好用的基础操作函数，moment提供了时间日期格式转换功能。

然而这两个库都有点问题：

首先是lodash，表面上模块划分相当好，似乎只引一个lodash/isString几乎不会增加体积，然而lodash的函数之间互相引用的情况是很复杂的，你觉得你只引了一个函数，实际上你可能引了20个。所以我的建议是如果你只使用isString这样的简单函数，可以去npm上找更单纯的实现，或者干脆用typeof代替（不用太担心，String对象其实很少见）。

然后是moment，这个库最讨厌的一点在于它的多语言包，是默认全量引入的，压缩前大约200k，这个体积要比它本身的实现代码还大不少。如果你没有国际化的需求（很少有人需要项目支持葡萄牙语吧），请小心使用moment。你可以使用极简的dateformate代替，也可以通过ContextReplacementPlugin插件把moment的语言包裁剪掉，配置代码这样写——

var webpack=require('webpack')
module.exports={
 // ...
 plugins: [
 new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de|fr|hu/)
 ]
}

类似的情况大家可以举一反三，就不赘述了。

大部分情况下，使用第一个工具已经足够把不想要的依赖裁减掉了，但是有一种情况是，你看到了依赖，却不知道是由谁引入的，这种时候就要用一下第二个工具：http://webpack.github.io/analyse/#home。

这是webpack官方给出的一个工具，用来分析js bundle中各个chunk之间的依赖关系，通过它你可以很清楚的看到到底是谁引入了你不想要的包。

这种情况一般发生于想裁掉依赖库的依赖库，或者你已经把包裁的很小了，然而你还想更小的时候。

比如说，你看到你的包引入了timers-browserfy，但是你明明没有使用它，为什么会引入呢？使用analyse工具，你就会发现原来是因为你在代码里用了setImmidiat这个函数，打包的时候自动给你打进去了。当然这种情况不止会引一个包，还有些process，global什么的，都会出现。

还有一个可能会占你的包很大体积的库，就是core-js，如果你发现你的bundle里有大片的core-js代码，却不知道为什么会引入，那八成是因为你的某个底层依赖库使用了babel-plugin-runtime-transform这个插件转译es6代码。这种时候如果你不希望引入（比如你已经使用了全局的babel-polyfill），你就需要想办法更换底层依赖，或者干脆自己编译一个版本。

analyse工具的使用方式和webpack-bundle-analyzer不太一样，不需要在webpack config里面配置，而是使用命令行生成一个stat.json文件，上传到http://webpack.github.io/analyse/#home这个网站上去（不用担心泄密，这是个静态网站，所谓的“上传”，其实就是浏览器本地FileReader直接读文件）。

npm相关的命令配置如下——

"scripts": {
 "dep-analyze": "webpack --color --config ./webpack/debug.js --profile --json > ./package/DependenceNetwork.json"
}

通过以上笨办法，我把

yusangeng/viscum

github.com

这个库的体积由40k缩减到7k，这是一个小型的类React前端框架，7k比preact还是大了点，但是比它之前还是强多了。

最后，如果想从7k再缩减，缩减到preact那么小（3k），该怎么办呢？只能改代码。

首先是尽量使用es5的语法写代码（似乎有点反潮流，不过你都要写3k的前端框架了，对你的水平来说潮流已经无所谓了），因为babel转译会添加一些代码，尤其是class语法和async/await语法，会被添加不少东西。比如下面这些——

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call==="object" || typeof call==="function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !=="function" && superClass !==null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype=Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__=superClass; }

这些代码使用runtime-transform应该可以以require的形式引入，不过我已经把runtime-transform干掉了，就不专门试验了。

剩下的就是手上功夫了，同一个功能，巧妙的实现会比quick & dirty的实现短小。比如一个事件收发mixin功能，不打草稿写120行，精心写出来可能40行就搞定。

原文地址：https://zhuanlan.zhihu.com/p/44095804

今的网络中，页面加载速度是最重要的网站指标之一。即使是毫秒也会对用户体验、产品产生巨大影响，而缓慢的页面加载会轻易的的降低转化率。您可以采用许多工具和技术来加快网站速度。在本文中，我们将介绍可用于改善前端性能的最佳CSS优化技巧。

1.查找性能瓶颈

所有优化中最重要的事情是从全面诊断开始。幸运的是，有许多CSS诊断工具可以帮助您发现任何性能瓶颈。首先，您可以使用网络浏览器的DevTools检查资产加载的速度。在大多数浏览器中，您可以通过按F12按钮打开DevTools 。

例如，在Firefox DevTools中，可以使用“ 网络”选项卡检查页面加载的所有CSS文件的大小和加载时间。您还可以测试使用和不使用缓存时CSS加载的速度。由于DevTools还显示了外部CSS，例如Google字体文件和从第三方CDN提取的CSS资源，因此您可以找到许多您以前都不知道的资源。

Pingdom Tools和Google提供的Lighthouse是开发人员经常用来分析网站速度和前端性能的另外两个免费工具。例如，如果您运行简单的网站速度测试，则Pingdom Tools会为您提供一些有用的CSS优化技巧。

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

2.缩小和压缩CSS文件

大多数网站都依赖多个CSS文件。尽管在大多数情况下，模块化CSS被认为是最佳实践，但是加载所有文件可能需要一段时间。但是，这正是CSS缩小和压缩工具存在的原因。如果您适当地使用它们，则可以大大缩短页面加载时间。

有一些在线工具，例如CSS Minify，可让您通过将其复制粘贴为简单形式来缩小CSS文件的大小。这种类型的工具可以与较小的项目很好地配合。但是，对于带有多个CSS文件的大型项目，使用它们会变得很麻烦且耗时。在这种情况下，最好选择自动化解决方案。

如今，大多数构建工具可让您在代码库上自动执行压缩。例如，默认情况下，Webpack将所有文件作为缩小的包返回。PostCSS还具有诸如CSS Nano之类的智能插件，它们不仅可以缩小文件的大小，还可以通过许多有针对性的优化来运行它。

3.使用Flexbox和CSS网格

如果在编写CSS时仍仅依靠传统的框模型，并使用边距，填充和浮点在屏幕上对齐项目，则应考虑采用更现代的布局模块，即flexbox和CSS Grid。这些新模型使您可以用更少的代码来实现复杂的布局。

使用较旧的技术，您甚至需要进行许多技巧和调整，即使是比较简单的事情，例如将项目垂直居中。但是，flexbox和CSS Grid并非如此。尽管拾取新的布局模块可能要花费一些时间，但还是值得的，因为CSS文件要小得多。flexbox尤其如此，到目前为止，flexbox具有相当不错的浏览器支持（目前全球支持 98.3％）。

尽管浏览器对CSS Grid的支持还不够完善（目前占全球的92.03％），但如果不必支持旧版浏览器或愿意提供后备功能，则仍然可以使用它。

4.使用<link>标记代替@import规则**

您可以使用两种主要技术来使网页加载CSS文件：

使用<link>标记将它们添加到HTML页面的<head>部分，

使用*@import *CSS规则从其他样式表导入它们。

您需要将@import规则添加到主CSS文件的顶部。在大多数情况下，它用于加载较小的资源，例如字体和其他设计元素。最初，这似乎是一个不错的解决方案，但是，与HTML页面使用<link>标记直接加载样式表相比，浏览器加载额外的样式表所花的时间要长得多。

当您在HTML页面中添加多个CSS文件时，请务必注意CSS特殊性。首先添加最通用的样式表，然后再选择更具体的样式表。您需要这样做，因为以后添加的样式表会覆盖以前的CSS文件的规则。例如，以下示例以正确的顺序添加CSS文件时：

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="page.css">
<link rel="stylesheet" href="component.css">

5.使用渐变和SVG代替图像

将所有图像加载到网页上可能要花费大量时间。开发人员使用许多图像优化技术来减轻这种影响，例如从外部CDN加载图像或使用诸如TinyJPG之类的图像压缩工具。这些解决方案可以提供很多帮助，但是很多时候，您都可以使用原生CSS效果替换大量资源的JPG和PNG图像。

例如，您可以使用渐变来代替背景图像，而背景图像可能会大大降低用户浏览器的速度。您可以使用CSS的渐变功能来创建线性，径向和重复渐变。使用这些CSS原生功能，您不仅可以定义颜色，还可以定义渐变的角度。

例如，以下规则创建了一个很好的渐变背景，其加载速度比任何图像都要快：

div {
    background: linear-gradient(45deg, lightgreen, royalblue);
}

对于更复杂的渐变和纹理，还可以使用CSSmatic（在下图显示）和ColorZilla这样的生成器。

除渐变外，您还可以使用可缩放矢量图形（SVG）替换传统的JPG和PNG图像。它们不仅加载速度更快，而且您只需要包含该图像的一个版本。这是因为SVG由于其向量性质而可以按比例放大到任何大小而没有任何质量损失。此外，您也可以使用CSS设置SVG的样式，就像普通的HTML文件一样。

6.避免重要规则

尽管！important规则在某些情况下可能是天赐之物，但您仅应将其作为最后的选择。此规则从级联中创建一个异常。因此，当您在CSS声明中添加！important时，它将覆盖所有其他声明，即使是那些具有更高特异性的声明。它的语法如下所示：

h1{
  margin-bottom: 20px!important;
}

如果CSS中有太多重要规则，则用户的浏览器将不得不对代码进行额外的检查，这可能会大大降低页面速度。根据经验，切勿在整个站点范围的CSS或创建主题或插件时使用！important。如果可能，请仅在要覆盖来自第三方库的CSS时使用它。

7.考虑CSS重构

尽管CSS重构很少是一件容易的事，但在许多情况下，它可以显着提高网站性能。例如，如果CSS文件太大，或者您继承了旧版代码库，或者页面加载时间很差，严重损害了转换率。CSS重构的目标是使代码更整洁，更可维护并且加载更快。

CSS重构是一个多步骤的过程，在此过程中，您需要分析CSS代码库的各个方面。您需要检查几件不同的事情，例如：

无论您有未使用或重复的CSS规则或资源，

是否可以利用Flexbox和CSS网格等更现代的技术，

是否使用过多的特异性（可以使用此视觉特异性计算器进行计算），

CSS文件的结构是否合理（例如，维护较小的文件比维护较大的文件更容易），

是否值得使用自动构建工具，

还有很多其他

在开始重构之前，还应设置可衡量的目标并选择要使用的基准，例如页面加载时间或第一个有意义的绘制，以便您可以比较它们的前后值。

同样不要忘记使用版本控制工具，例如Git。这样，如果出现任何问题，您可以返回到以前的代码版本。

包起来

您可以使用许多CSS优化技巧来改善网站的性能。它们中的大多数易于实现，但会对页面加载时间产生重大影响。更快的加载页面不仅可以增强用户体验，还可以帮助您在Google和其他搜索引擎中获得更好的排名。

除了CSS优化最佳实践之外，您还可以使用许多其他技术来提高加载速度，例如缓存，Google AMP和HTTPS协议。

作者：游X鱼
链接：https://www.jianshu.com/p/69198ac60e53

常，我们希望限制元素相对于其父元素的宽度，同时使其具有动态性。因此，有一个基础宽度或高度的能力，使其扩展的基础上，可用的空间。比如说，我们有一个按钮，它的宽度应该是最小的，不应该低于它的宽度。这就是最大和最小属性变得方便的地方。

在本文中，我们将详细介绍CSS的最大和最小宽度和高度属性，并使用可能的用例和技巧详细解释每一个属性。

width 属性

首先要讨论的是与宽度相关的属性。我们有min-width和max-width，它们中的每一个都很重要，都有自己的用例。

Min Width

设置min-width的值时，其好处在于防止width属性使用的值变得小于min-width的指定值。请注意，min-width的默认值是auto，它解析为0。

让我们举一个基本的例子来说明这一点。

我们有一个按钮，里面有一个变化的文本。文本的范围可能从一个单词到多个单词。为了确保即使只有一个单词，它也有最小宽度，应该使用min-width。

最小宽度为100px，这样即使按钮的内容很短，比如Done，或者只有一个图标，它仍然足够大，可以被注意到。在使用阿拉伯语等多语言网站时，这一点非常重要。考虑以下来自Twitter的示例：

在以前的情况下，按钮上带有单词“??”，表示完成。按钮的宽度太小，因此在后面的案例中，我增加了它的最小宽度。

min-width 和 padding

在内容较长的情况下，min-width可以扩展按钮的宽度，而水平方向上的padding应该被添加，以实现一个合适的外观按钮。

Max Width

在设置max-width值时，它的好处在于防止width属性使用的值超过max-width的指定值。max-width的默认值是none。

max-width的常见且简单的用例是将其与图像一起使用。考虑以下示例：

图像比它的父元素大。通过使用max-width: 100%，图像的宽度不会超过其父图像的宽度。如果图像比父图像小，则max-width: 100%不会对图像产生实际影响，因为它比父图像小。

使用最小宽度和最大宽度

当min-width和max-width都用于一个元素时，它们中的哪一个将覆盖另一个?换句话说，哪个优先级更高?

html

<div class="wrapper">
  <div class="sub"></div>
</div>

css

.sub {
  width: 100px;
  min-width: 50%;
  max-width: 100%;
}

初始width值为100px，并在其上加上min-width和max-width值。结果是元素宽度未超过其包含的块/父元素的50％。

height 属性

除了最小和最大宽度属性外，我们还具有与高度相同的属性。

min-height

设置min-height的值时，其好处在于防止使用的height属性值变得小于min-height的指定值。请注意，最小高度的默认值为auto，它解析为0。

我们用一个简单的例子来演示一下。

我们有一个带有描述文本的部分。目标是为section设置一个最小高度，这样它就可以处理短或长内容。考虑下面的基本情况

.sub {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  min-height: 100px;
  color: #fff;
  background: #3c78dB;
}

最小高度为100px，使用flexbox时，内容水平和垂直居中。如果内容更长，会发生什么？例如一段？

是的，你猜对了!section的高度将展开以包含新内容。有了它，我们就可以构建灵活的组件，并对其内容做出响应。

事例源码:https://codepen.io/shadeed/pen/cfb600cf30acdae9cf6f9cb5347a37cf

max-height

在设置max-height值时，它的好处在于防止height属性使用的值超过max-height的指定值。注意，max-height的默认值是none。

考虑下面的示例，其中我为内容设置了max-height。但是，因为它大于指定的空间，所以会发生溢出。因此，文本超出了其父边界。

最小和最大属性的用例

我们将介绍min-width，min-height，max-width和max-height的一些常见和不常见的用例。

标签列表

当有一个标签列表时，建议限制一个标签的最小宽度，这样如果它的内容很短，它的外观就不会受到影响。

通过具有这种灵活性，无论内容有多短，标签都将看起来不错。但是，如果内容作者输入了一个非常长的标签名称，而他使用的内容管理系统没有标签的最大字符长度，将会发生什么情况呢？我们也可以使用max-width。

.c-tag {
  display: inline-block;
  min-width: 100px;
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /*Other styles*/
}

通过使用max-width，标签宽度将被限制为特定值。但是，这还不够，标签名称应被截断。

事例地址：https://codepen.io/shadeed/pen/320e42b7ad75c438a9e633417d737d16

按钮

对于按钮的最小值和最大值有不同的用例，因为按钮组件有多种变体。考虑下面的图：

请注意，按钮的“Get”宽度太小。如果不设置最小宽度，则由于任何原因而没有文本时，情况可能会变得更糟。在这种情况下，设置最小宽度很重要。

使用 flexbox 将最小宽度设置为零

min-width的默认值是auto，它被计算为0。当一个元素是一个flex项时，min-width的值不会计算为零。flex 项目的最小大小等于其内容的大小。

根据CSSWG：

默认情况下，flex项目不会缩小到它们的最小内容大小(最长单词或固定大小元素的长度)以下。要更改此设置，请设置min-width或 min-height属性。

考虑下面的例子

这个人的名字有一个很长的单词，这导致了溢出和水平滚动。尽管如此，我还是在标题中添加了下面的CSS来截断它

.c-person__name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

由于title是flex项目，因此解决方案是重置min-width并将其强制为零。

.c-person__name {
    /*Other styles*/
    min-width: 0;
}

下面是修复后的样子

根据CSSWG：

在弹性项目的主轴上可见溢出的项目上，当在弹性项目的主轴min-size属性中指定时，指定自动最小尺寸。

意味着，将overflow设置为visible值以外的值会导致min-width被计算为0，这解决了我们不设置min-width: 0的问题。

事例源码：https://codepen.io/shadeed/pen/398ccffcd437a2fb042f5ce3bdd68c57

使用 flexbox 将最小高度设置为零

虽然与min-width相比，这是一个不太常见的问题，但是它可能发生。只是为了确认，问题与不能少于其内容的弹性项目有关。结果min-height值被设置为与内容一样长。

考虑以下示例：

用红色表示的文本应该在父文本中裁剪。因为面板主体是一个flex项目，所以它的min-height与它的内容相等。为了防止这种情况，我们应该重新设置最小高度值。看看HTML和CSS是怎么样的。

HTML

<div class="c-panel">
  <h2 class="c-panel__title"><!-- Title --></h2>
  <div class="c-panel__body">
    <div class="c-panel__content"><!-- Content --></div>
  </div>
</div>

CSS

.c-panel {
  display: flex;
  flex-direction: column;
  height: 180px;
}

.c-panel__body {
  min-height: 0;
}

.c-panel__content {
  overflow-y: scroll;
  height: 100%;
}

通过向面板主体添加min-height: 0，这将重置该属性，并且现在应该可以正常工作。

事例源码：https://codepen.io/shadeed/pen/dea75b84b1fcfd03e5c21173a40afc20?editors=0100

混合最小宽度和最大宽度

在某些情况下，我们有一个最小宽度的元素，但同时，它没有最大宽度。这可能会导致组件太宽，而我们并不想这样做。考虑以下示例

由于宽度是以像素为单位定义的，因此不能保证上面的方法适用于移动视口。为了解决这个问题，我们可以使用百分比来代替像素作为最小和最大属性。考虑下面这个具有article主体的示例。

我为图像添加了以下CSS：

img {
  min-width: 35%;
  max-width: 70%;
}

事例源码:https://codepen.io/shadeed/pen/11f49fd1a35ad06ce241bee17c3d3124

####　页面包装器/容器

最常用的｀max-width｀用例之一是页面包装器或容器。通过向页面添加最大宽度，我们可以确保内容对用户来说是可读的、易于浏览的。

下面是一个包装器的例子，它是居中的，左右两边有水平的填充。

.wrapper {
    max-width: 1170px;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: auto;
    margin-right: auto;
}

最大宽度和ch单位

ch 是一个相对于数字0的大小，1ch 就是数字 0 的宽度。如定义一个3ch的宽度，那么就只能装下 3个0。

<!-- HTML代码 -->

<div>0000</div>

/* CSS代码 */

div {
  width: 3ch;
  background: powderblue;
}

在前面的wrapper元素示例中，我们可以利用ch单元，因为它是一个article 主体。

.wrapper {
    max-width: 70ch;
    /* Other styles */
}

对高度未知的元素进行动画处理

在某些情况下，我们面临着使手风琴或移动菜单具有意想不到的内容高度的挑战。在这种情况下，max-height可能是一个很好的解决方案。

请考虑以下示例：

单击菜单按钮后，菜单应随动画从上到下滑动。如果没有固定的高度（不建议这样做），除非使用JavaScript，否则这是不可能的。但是，对于max-height，这是可能的。想法是为高度添加一个较大的值，例如max-height：20rem，可能无法达到，然后我们可以使用动画从max-height: 0变换到max-height: 20rem。

.c-nav {
    max-height: 0;
    overflow: hidden;
    transition: 0.3s linear;
}

.c-nav.is-active {
    max-height: 22rem;
}

点击菜单按钮可以看到动画的运行。

事例源码：https://codepen.io/shadeed/pen/164c7ef67f5d4541bddb8bc12b2772da

Hero 元素的最小高度

一般来说，我不喜欢给元素添加固定的高度。我觉得这样做，会破坏流式布局的结构。但有些情况设置固定高度却很有用。

考虑下面的例子，在这里我们有一个设置了固定高度的hero部分。

是，当内容较长时，它会溢出并离开hero包装器，这可不太好。

为了预先解决这个问题，我们可以使用min-height来代替height。我们可以用这种方式先解决问题，尽管这可能会导致页面看起来很奇怪，但是我认为应该首先防止内容管理系统(CMS)中发生这样的事情。这样，问题就解决了，看起来也不错。

内容溢出的问题不仅在于内容是否大于固定的hero 高度。它可以发生在屏幕大小调整作为文本换行的结果。

如果改用min-height，则上述情况根本不会发生。

模态组件

对于模态组件，它需要最小和最大宽度，以便可以适应移动设备到PC的屏幕上的适应。

思路1

.c-modal__body {
    width: 600px;
    max-width: 100%;
}

思路2

.c-modal__body {
    width: 100%;
    max-width: 600px;
}

对于我来说，我更喜欢第二个思路，因为我只需要定义max-width: 600px。modal是一个<div>元素，因此它已经具有其父元素的100％宽度，对吗？

考虑下面为模态设计简化的测试案例。请注意，如果可用视口空间不足，则宽度如何更改为其父级的100％。

事例源码：https://codepen.io/shadeed/pen/5dcb1c4c6773cc3a97a766c327c36443

最小高度和粘性页脚

当一个网站的内容不够长，它希望看到页脚粘到底部。让我们用一个可视化的例子来更好地展示这一点。

请注意，页脚未粘贴在浏览器窗口的末尾。那是因为内容不足以达到浏览器窗口高度的长度。修复后，其外观应如下所示：

首先，将body元素作为flexbox容器，然后将其最小高度设置为视口高度的100％。

事例源码：https://codepen.io/shadeed/pen/aeb14f2819b9cc4805275b88c2d55645?editors=1100

最大宽度/高度和视口单位的流体比率

为了使比例容器能够根据视口大小进行响应缩放，引入了padding hack。现在，我们可以通过组合CSS中的视口单位和最大宽度/高度来模仿相同的行为。

我们有一个尺寸为644 * 1000像素的图像。为了使其流畅，我们需要以下内容：

纵横比：高度/宽度
容器的宽度：可以是固定数字，也可以是动态数字（100％）
设置height为视口宽度的100％乘以纵横比
设置max-heigh，该高度是容器的宽度乘以纵横比
max-width设置为等于容器宽度

人才们的【三连】就是小智不断分享的最大动力，如果本篇博客有任何错误和建议，欢迎人才们留言，最后，谢谢大家的观看。

作者：Ahmad shaded 译者：前端小智来源：sitepoint 原文：https://www.impressivewebs.com/min-max-width-height-css

在线咨询

上一篇：推荐 10 款常用的富文本编辑器
下一篇：Vue.js入门篇

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商