国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

[翻譯]CSS變量讓你輕松制作響應(yīng)式網(wǎng)頁(yè)

GitChat / 1130人閱讀

摘要：原文地址作者摘要這是一篇年制作響應(yīng)性網(wǎng)頁(yè)的快速教程。首先，我們要聲明需要更改或復(fù)用的變量然后，我們只需要在中使用它們就可以了。總之，變量可以定義為未來(lái)的響應(yīng)式。

原文地址：https://medium.freecodecamp.org/how-to-make-responsiveness-super-simple-with-css-variables-8c90ebf80d7f  
作者：Per Harald Borgen  
摘要：這是一篇2018年制作響應(yīng)性網(wǎng)頁(yè)的快速教程。


如果你之前沒(méi)有聽(tīng)說(shuō)過(guò)CSS變量，那么現(xiàn)在我將告訴你：它是CSS的新特性，讓你能夠在樣式表中使用變量的能力，并且無(wú)需任何配置。

實(shí)際上，CSS變量能夠讓你改變以往設(shè)置樣式的老方法：

h1{
    font-size:30px;
}
navbar > a {
    font-size:30px;
}

而使用了CSS變量之后：

:root {
  --base-font-size: 30px;
}
h1 {
  font-size: var(--base-font-size);
}
navbar > a {
  font-size: var(--base-font-size);
}

這樣的詞法有點(diǎn)奇怪，但它確實(shí)能夠讓你通過(guò)僅改變--base-font-size的值來(lái)改變app中所有原生的字體大小。

如果你想要學(xué)習(xí)CSS變量的知識(shí)，可以登錄Scrimba看我的視頻課程，或是閱讀我在Medium上寫的文章：如何學(xué)習(xí)CSS變量。

好了，現(xiàn)在讓我們看看如何使用這個(gè)新知識(shí)來(lái)更加簡(jiǎn)單地制作響應(yīng)式站點(diǎn)吧。

初始配置

讓我們來(lái)把下面這個(gè)頁(yè)面變成響應(yīng)式的吧：

這個(gè)頁(yè)面在PC端看上去很不錯(cuò)，不過(guò)你可以看到它在移動(dòng)端的表現(xiàn)并不好。就像下面這樣：

在下面這張圖中，我們?cè)跇邮缴献隽艘恍└倪M(jìn)，讓它看起來(lái)更好一點(diǎn)：

重新排列整個(gè)網(wǎng)格布局，使用垂直排列取代固定兩列布局。

將框架整體上移了一點(diǎn)。

對(duì)字體進(jìn)行了縮放。

目光轉(zhuǎn)到CSS代碼中，下面是我們要修改的代碼：

h1 {
  font-size: 30px;
}
#navbar {
  margin: 30px 0;
}
#navbar a {
  font-size: 30px;
}
.grid {
  margin: 30px 0;
  grid-template-columns: 200px 200px;
}

更具體地說(shuō)，我們需要在一個(gè)媒體查詢中做出以下調(diào)整：

將h1的字體調(diào)整為20px；

減少#navbar的上外邊距為15px；

將#navbar的字體大小減少到20px；

減少.grid的外邊距為15px；

將.grid從兩列布局變?yōu)閱瘟胁季帧?/p> 

注意：樣式表里不僅僅是這些CSS聲明，但是在這篇教程中我跳過(guò)它們，因?yàn)槊襟w查詢并不影響它們的設(shè)置。你可以在這里獲取完整的代碼。
舊方法

不使用CSS變量確實(shí)可以做到同樣的效果，但這樣會(huì)增加許多不必要的代碼，因?yàn)樯厦娲蟛糠中薷亩夹枰獙⒙暶髟诿襟w查詢中重寫一遍。就像下面這樣：

@media all and (max-width: 450px) {
  
  navbar {
    margin: 15px 0;
  }
  
  navbar a {
    font-size: 20px;
  }

  h1 {
    font-size: 20px;
  }
  
  .grid {
    margin: 15px 0;
    grid-template-columns: 200px;
  }
}
新的方法

現(xiàn)在讓我們看看使用CSS變量是如何起作用的。首先，我們要聲明需要更改或復(fù)用的變量：

:root {
  --base-font-size: 30px;
  --columns: 200px 200px;
  --base-margin: 30px;
}

然后，我們只需要在app中使用它們就可以了。非常簡(jiǎn)單：

#navbar {
  margin: var(--base-margin) 0;
}
#navbar a {
  font-size: var(--base-font-size);
}
h1 {
  font-size: var(--base-font-size);
}
.grid {
  margin: var(--base-margin) 0;
  grid-template-columns: var(--columns);
}

之后，我們可以在媒體查詢中修改這些變量值：

@media all and (max-width: 450px) {
  :root {
    --columns: 200px;
    --base-margin: 15px;
    --base-font-size: 20px;
}

這樣的代碼是不是比之前要簡(jiǎn)潔多了？我們只需要專注于:root選擇器就可以了。

我們將媒體查詢中的4個(gè)聲明減少到了1個(gè)，代碼也從13行減少到了4行。

當(dāng)然，這只是一個(gè)簡(jiǎn)單的例子。想象一下，在一個(gè)大中型網(wǎng)站中，有一個(gè)--base-margin變量控制著所有的外邊距。當(dāng)你想要在媒體查詢時(shí)修改屬性，并不需要用復(fù)雜的聲明填充整個(gè)媒體查詢，只是簡(jiǎn)簡(jiǎn)單單地修改這個(gè)變量值就可以了。

總之，CSS變量可以定義為未來(lái)的響應(yīng)式。如果你想要學(xué)習(xí)更多的知識(shí)，我推薦你看我的免費(fèi)教程。用不了多久你就能成為一個(gè)CSS變量大師。

查看更多我翻譯的Medium文章請(qǐng)?jiān)L問(wèn)：  
項(xiàng)目地址：https://github.com/WhiteYin/translation

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/115772.html

相關(guān)文章

  • GitHub 值得收藏的前端項(xiàng)目[每月更新...]

    摘要：也是一款優(yōu)秀的響應(yīng)式框架站點(diǎn)所使用的一套框架為微信服務(wù)量身設(shè)計(jì)的一套框架一組很小的，響應(yīng)式的組件，你可以在網(wǎng)頁(yè)的項(xiàng)目上到處使用一個(gè)可定制的文件，使瀏覽器呈現(xiàn)的所有元素，更一致和符合現(xiàn)代標(biāo)準(zhǔn)。 GitHub 值得收藏的前端項(xiàng)目 整理與收集的一些比較優(yōu)秀github項(xiàng)目，方便自己閱讀，順便分享出來(lái)，大家一起學(xué)習(xí)，本篇文章會(huì)持續(xù)更新，版權(quán)歸原作者所有。歡迎github star與fork 預(yù)...

    maxmin 評(píng)論0 收藏0

  • 前端學(xué)習(xí)路線

    摘要：具體來(lái)說(shuō)，包管理器就是可以通過(guò)命令行，幫助你把外部庫(kù)和插件放到你的項(xiàng)目里面并在之后進(jìn)行版本升級(jí)，這樣就不用手工復(fù)制和更新庫(kù)。現(xiàn)在有的包管理器主要是和。 一、基礎(chǔ) 1、學(xué)習(xí)HTML基礎(chǔ) HTML給你的網(wǎng)頁(yè)賦予了結(jié)構(gòu)。它就像是人的骨架那樣讓你保持站立。首先你需要去學(xué)習(xí)語(yǔ)法以及它必須提供的一切。你的學(xué)習(xí)應(yīng)該聚焦在下面這些東西上： 學(xué)習(xí)HTML基礎(chǔ)，了解如何編寫語(yǔ)義HTML 理解如何把網(wǎng)頁(yè)分...

    FullStackDeveloper 評(píng)論0 收藏0

  • 前端學(xué)習(xí)路線

    摘要：具體來(lái)說(shuō)，包管理器就是可以通過(guò)命令行，幫助你把外部庫(kù)和插件放到你的項(xiàng)目里面并在之后進(jìn)行版本升級(jí)，這樣就不用手工復(fù)制和更新庫(kù)。現(xiàn)在有的包管理器主要是和。 一、基礎(chǔ) 1、學(xué)習(xí)HTML基礎(chǔ) HTML給你的網(wǎng)頁(yè)賦予了結(jié)構(gòu)。它就像是人的骨架那樣讓你保持站立。首先你需要去學(xué)習(xí)語(yǔ)法以及它必須提供的一切。你的學(xué)習(xí)應(yīng)該聚焦在下面這些東西上： 學(xué)習(xí)HTML基礎(chǔ)，了解如何編寫語(yǔ)義HTML 理解如何把網(wǎng)頁(yè)分...

    20171112 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<