響應(yīng)式
響應(yīng)式網(wǎng)頁設(shè)計(jì)是一種解決問題的途徑帕胆，它建議設(shè)計(jì)和開發(fā)應(yīng)該根據(jù)用戶行為和環(huán)境（基于屏幕大小，平臺(tái)和方向）進(jìn)行響應(yīng)芙盘，這種實(shí)踐由靈活的網(wǎng)格和布局儒老、圖片和CSS媒體查詢的智能使用所構(gòu)成记餐。當(dāng)用戶從他們的便攜式電腦切換到iPad的時(shí)候，網(wǎng)站應(yīng)該自動(dòng)切換合適的分辨率囚衔，圖片尺寸和腳本能力练湿。換句話說肥哎，網(wǎng)站應(yīng)該能夠自動(dòng)響應(yīng)用戶的設(shè)備參數(shù)断国。這樣就沒必要對(duì)市場上每一種設(shè)備都要進(jìn)行不同的設(shè)計(jì)和開發(fā)。
解決方案
0 根據(jù)屏幕分辨率調(diào)整樣式
相關(guān)工具：viewport霞捡、@media媒體查詢碧信、利用JavaScript在不同的樣式表間切換，重新排放使之適應(yīng)不同的窗口寬度躏筏。
1 元素做成響應(yīng)式：
1.1文字做成響應(yīng)式
1.1.1 自適應(yīng)式文字
相關(guān)工具：em單位
1.1.2 如果想要對(duì)每一行特定的文本字符進(jìn)行優(yōu)化趁尼，我們可以使用彈性布局酥泞，它基于用戶的文本大小來改變布局寬度
相關(guān)工具：flex
1.2 圖片和視頻做成響應(yīng)式：
1.2.1隱藏和顯示部分圖片
相關(guān)工具：display：none芝囤、visibility（visible | hidden | collapse）
1.2.2?創(chuàng)建變化的復(fù)合圖片
相關(guān)工具：媒體查詢辛萍、overflow（visible | hidden | scroll | auto）
1.2.3?隨著布局縮放的前景圖片
相關(guān)工具：max-width、max-width+媒體查詢（使得設(shè)計(jì)在極端的尺寸下不要被拉得太長/壓得太扁）
2 布局做成響應(yīng)式：
2.1流式布局（liquid layout）：
根據(jù)頁面寬度悯许，對(duì)已存在于網(wǎng)頁中的元素進(jìn)行重新布局岸晦。
相關(guān)工具：max-width、max-width+媒體查詢（限定彈性程度）
2.2彈性布局（elastic layout）：
在間隔一致的水平或垂直的線所形成的網(wǎng)格中設(shè)計(jì)一致的模式邢隧。
相關(guān)工具：flex、max-width按摘、max-width+媒體查詢（限定彈性程度）
2.3布局網(wǎng)格（layout grid）
在間隔一致的水平和垂直的線所形成的網(wǎng)格中設(shè)計(jì)一致的模式纫谅。
相關(guān)工具：grid（做法是定義一個(gè)容器元素并設(shè)置display：grid付秕，使用grid-template-columns 和 grid-template-rows屬性設(shè)置網(wǎng)格的列與 行的大小，然后使用grid-column 和 grid-row屬性將其子元素放入網(wǎng)格之中掠河。與flexbox類似唠摹，網(wǎng)格項(xiàng)的源順序無關(guān)緊要。為了更好地使你的網(wǎng)格與媒體查詢相結(jié)合使用煮甥，你可以在 CSS 中任意放置成肘。）
實(shí)例分析：
NASA主頁在兩種窗口寬度下的頁面顯示狀態(tài)：
1 整理現(xiàn)有內(nèi)容
1.1 初始設(shè)置
1.1.1 在html中調(diào)用fonts.googleapis.com字體
1.1.2?在html中加入viewport?
因?yàn)槲覀円庙憫?yīng)式艇劫，所以一開始先在html中加入viewport?聲明：meta name=“viewport”content=“width=device-width,initial-scale=1.0,? minimum-scale=1.0,? user-scalable=no”
1.1.3 全局樣式設(shè)置
html店煞、body顷蟀、header的background鸣个、盒內(nèi)參數(shù)
1.2 分區(qū)處理頁面
整體頁面大致可以分為navigation囤萤、main涛舍、footer三大塊富雅，下面以navigation為例肛搬，處理navigation的分塊温赔。
1.2.1?圖層間關(guān)系
這一步是為了區(qū)分結(jié)構(gòu)
技巧：再定大調(diào)的過程中，這2個(gè)nav扣溺，可以先不同背景色區(qū)分開來瓜晤，之后處理樣式：
1.2.2 確定布局：
grid就是為排版而生的，這里使用grid驱犹。
然后調(diào)整網(wǎng)格：
header{
# display：grid;
# grid-template-columns:20% auto 20%;
# grid-template-rows:repeat(2,58px)
.logo{
# grid-row:1/span 2;? ?/*從第一行開始雄驹，橫跨2個(gè)行*/
# grid-column:1;
background:url(“img=”);
}
.main-nav{
# grid-row:1医舆；
# grid-column:2蔬将；
background:black;
}
.sub-nav{
# grid-row:2霞怀；
# grid-column:2莉给；
background:black;
}
.util{
# grid-row:1徐矩；
# grid-column:3叁幢；
background:black;
}
1.2.2 確定各個(gè)元素display屬性
區(qū)分容器中的塊元素/行內(nèi)元素
/*調(diào)整display*/
.main-nav{
##? display:inline-block丧蘸；
# grid-row:1；
# grid-column:2遥皂；
background:black;
}
.sub-nav{
##? display:inline-block；
# grid-row:2刽漂；
# grid-column:2演训；
background:black;
}
.util{
##? display:inline-gird岛抄；
# grid-template-columns:? 60%? 20%? 20%狈蚤；
# grid-template-rows:repeat(1,50px)诗箍；
# grid-row:1楷掉；
# grid-column:3腰埂；
background:black;
}
.search-input{
##? display:inline-block；
}
.util-img{
##? display:inline-block全闷；
}
1.2.3?細(xì)化盒內(nèi)參數(shù)（content）
.util{
##? display:inline-gird漂问；
# grid-template-columns:? 60%? 20%? 20%
# grid-template-rows:repeat(1,50px)/*repeat：*/
.search-input{
##? display:inline-block吊说；
###? width:100%厅贪；
### height:100%；}
.util-img{
##? display:inline-block；
###? width:50px；
}
1.2.4 細(xì)化盒內(nèi)參數(shù)（padding尊沸、border屁商、margin）
/*可以在devtool里看一下效果；對(duì)于微調(diào)，你第一個(gè)想到的就是默認(rèn)的那些事兒望伦。因?yàn)闉g覽器經(jīng)常會(huì)默認(rèn)padding和border，這時(shí)需要把它們定義為0*/
.search-input{
##? display:inline-block；
###? width:100%；
### height:100%垢乙；
#### border:0；
}
1.2.5?處理細(xì)節(jié)
/*接下來是細(xì)節(jié)，首先處理豎線問題：因?yàn)樨Q線比字體大小更大巴席，可以main-nav用border-left:? solid 2px實(shí)現(xiàn)*/
.main-nav li{
# grid-row:1赵刑；
# grid-column:2；
Background:black;
}
.main-nav li{
##### border-left:2px solid #a55555；
####height:30px；
##? display:inline-block；
}
/*把第一個(gè)的左邊線去掉*/
.main-nav li:first-child{
##### border-left:0px?
}
/*再去除間距：用對(duì)li元素設(shè)置inline-block屬性，再消除inline-block間距來實(shí)現(xiàn)橫欄的樣式。*/
/*再對(duì)字體，顏色和間距進(jìn)行微調(diào)*/
.sub-nav li{
##### border-left:solid 1px white；
##? display:inline-block；
########? color:white;
######## font-size:13px;
########? margin:18px 0 10px;
########? padding:0 10px;
background:grey;
}
/*再對(duì).util-img一分為二，進(jìn)行背景圖片的設(shè)置*/
.search-img{
##? display:inline-block蹋砚；
########? background:url(“”);
########? height:50px;
}
.share-img{
##? display:inline-block；
########? background:url(“”);
########? height:50px;
}
2 實(shí)現(xiàn)響應(yīng)式
寬度在1101px以上的樣式就做好了，接下來做寬度在1101px以下時(shí)候的樣式浦楣，然后設(shè)置樣式發(fā)生變化的觸發(fā)條件历恐，就達(dá)到了響應(yīng)式的效果吮旅。
