本文轉(zhuǎn)載自我的個(gè)人博客灾炭。
本文講解如何利用純?cè)?code>CSS實(shí)現(xiàn)響應(yīng)式布局。
前段時(shí)間在freeCodeCamp看到幾個(gè)響應(yīng)式布局的案例。這幾個(gè)案例把原生CSS實(shí)現(xiàn)響應(yīng)式布局的知識(shí)點(diǎn)囊括得比較全面笆焰。想著可以總結(jié)一下谆奥，于是就有了這篇文章绰咽，文章應(yīng)該會(huì)分為三期蛉抓，這是第一期。
案例一
案例演示以及源碼網(wǎng)址進(jìn)去以后點(diǎn)擊Fork即可看到源碼剃诅。
知識(shí)點(diǎn)：圖片的響應(yīng)式布局
從上圖我們可以觀察到巷送，圖片的大小可以隨頁(yè)面可視區(qū)域的變化而變化，但是圖片并不會(huì)超過(guò)它的原始大小矛辕。這種方案既保證了圖片的完整顯示笑跛，又不至于被放得過(guò)大而失真。實(shí)現(xiàn)這一功能的CSS代碼其實(shí)很簡(jiǎn)單聊品，讓我們來(lái)看一看img標(biāo)簽相關(guān)的代碼：
//html
<img id="image" src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg" alt "pic from flickr">
//css
img{
max-width: 100%; //關(guān)鍵代碼
display: block;
height: auto;
margin: auto;
}
max-width表示img標(biāo)簽可以達(dá)到的最大寬度飞蹂，100%是基于其父級(jí)容器元素而言的。一個(gè)img標(biāo)簽翻屈，如果我們不對(duì)它的長(zhǎng)寬進(jìn)行任何設(shè)定陈哑，那么它的大小將是它所包含的圖片的原始大小。但是加上max-width: 100%之后表示伸眶，img的寬度將不會(huì)超過(guò)其容器元素的寬度惊窖。這個(gè)時(shí)候可以分兩種情況：
1.容器元素的寬度大于img圖片的原始寬度：此時(shí)滿足max-width: 100%，img將以其圖片的原始大小顯示厘贼。
- 容器元素的寬度小于
img圖片的原始寬度界酒，這個(gè)時(shí)候會(huì)將img的寬度調(diào)整為其容器元素的寬度。
margin: auto保證img標(biāo)簽永遠(yuǎn)在容器元素內(nèi)居中嘴秸。
display: block和height: auto在本例中其實(shí)是不必須的毁欣。當(dāng)你只設(shè)定了img標(biāo)簽的width和height中的一個(gè)時(shí)，圖片會(huì)自動(dòng)按比例的縮小或放大岳掐。
案例二
案例演示以及源碼網(wǎng)址進(jìn)去以后點(diǎn)擊Fork即可看到源碼凭疮。
知識(shí)點(diǎn)：CSS3 新增單位 vw、vh串述、vmin执解、vmax
在上圖中我們可以看到，無(wú)論我們?cè)趺锤淖円暣暗拇笮∑驶停灼羶?nèi)容始終恰好占據(jù)整個(gè)視窗的大小材鹦。我們來(lái)看一下這一部分的代碼：
//html
<div id="welcome-section" class="intro">
<h1>Hey i'am Mimic</h1>
<p>a web developer</p>
</div>
//css
.intro {
background: #e0ebe8;
height: 55vh; //關(guān)鍵代碼
padding-top: 45vh; //關(guān)鍵代碼
}
這其中就用到了css的新增單位vh逝淹。vh是一個(gè)表示瀏覽器視窗高度的單位耕姊，所謂視窗，就是瀏覽器用來(lái)真正顯示內(nèi)容的區(qū)域栅葡，不包括工具欄等茉兰。1vh表示視窗高度的百分之一，100vh表示整個(gè)視窗的高度欣簇。注意规脸，我們這里雖然是使用了百分號(hào)的機(jī)制坯约，但是書(shū)寫(xiě)的時(shí)候不用寫(xiě)百分號(hào)，只用寫(xiě)數(shù)字就好了莫鸭。在上端代碼中闹丐，height和padding-top加起來(lái)正好是100vh，所以首屏內(nèi)容恰好占據(jù)整個(gè)視窗的大小被因。
類(lèi)似于vh的新增單位還有vw卿拴、vmin、vmax梨与。大家可以通過(guò)這篇文章了解一下堕花。
知識(shí)點(diǎn)：媒體查詢(xún)(@media)
在上圖中我們可以看到，幾個(gè)圓形鏈接隨著視窗寬度的縮小在不斷改變排列方式粥鞋，到最后變?yōu)榱碎L(zhǎng)方形缘挽，這其中就用到了媒體查詢(xún)。我們先看一下這部分的相關(guān)代碼:
//html
</div>
<a target="_blank" class="contact-details">Facebook</a>
<a id='profile-link' target="_blank" class="contact-details">GitHub</a>
<a target="_blank" class="contact-details">Twitter</a>
<a href="mailto:example@example.com" class="contact-details">Send a mail</a>
<a href="tel:555-555-5555" class="contact-details">Call me</a>
</div>
//css
.contact-details {
display: inline-block; //關(guān)鍵代碼
font-weight: bold;
margin: 0 35px 45px 35px;
list-style-type: none;
border: 2px solid #90C695;
border-radius: 100%;
width: 100px;
height: 100px;
line-height: 100px;
background: #e0ebe8;
color: #008080;
text-decoration: none;
}
.contact-details:hover {
background: #E4F1FE;
color: green;
}
@media (max-width: 367px) { //關(guān)鍵代碼
.contact-details {
border: 2px solid #90C695;
border-radius: 0;
width: 90px;
height: 20px;
padding: 10px;
line-height: normal;
}
}
圓形鏈接隨著視窗寬度的縮小在不斷改變排列方式是通過(guò)display: inline-block實(shí)現(xiàn)的呻粹。inline-block是一種介于inline與block之間的樣式壕曼。
-
display: inline-block與display: inline最大的區(qū)別是inline-block可以設(shè)置自己的寬和高，inline樣式不可以等浊。 -
display: inline-block與display: block最大的區(qū)別是inline-block元素后面不會(huì)自動(dòng)加上換行符窝稿，所以幾個(gè)inline-block元素可以排列成一行，而block元素卻不可以凿掂。
鏈接由圓形變?yōu)殚L(zhǎng)方形是通過(guò)媒體查詢(xún)實(shí)現(xiàn)的伴榔，媒體查詢(xún)的標(biāo)識(shí)符是@media。而上段代碼中@media (max-width: 367px) {css-code}的含義就是當(dāng)視窗寬度小于367px時(shí)庄萎，執(zhí)行其代碼塊中的代碼css-code踪少。
上例只是媒體查詢(xún)最簡(jiǎn)單的一種寫(xiě)法，其完整寫(xiě)法應(yīng)該為：
@media not|only mediatype and (expressions) {
CSS-Code;
}
其中糠涛，mediatype表示媒體類(lèi)型援奢，有四個(gè)可選項(xiàng)：all表示所有類(lèi)型，print表示打印機(jī)忍捡，screen表示屏幕(電腦集漾，手機(jī)，平板)砸脊，speech表示屏幕閱讀器具篇。具體用法如下：
@media only screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
上例的含義是，當(dāng)且僅當(dāng)媒體類(lèi)型為屏幕凌埂，寬度大于480px時(shí)驱显，將body標(biāo)簽的背景色改為淺綠色。而對(duì)于別的媒體類(lèi)型，比如打印機(jī)埃疫，則不會(huì)生效伏恐。更多關(guān)于媒體查詢(xún)的用法，可以參考這個(gè)網(wǎng)站栓霜。
以上就是第一期的內(nèi)容翠桦，我們下期見(jiàn)。
