如何”有效“減小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那么?。?k），該怎么辦呢？只能改代碼。

首先是盡量使用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與它的內容相等。為了防止這種情況，我們應該重新設置最小高度值?？纯碒TML和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小時內與您取得聯系。

整合營銷服務商