實現(xiàn)響應(yīng)式布局的網(wǎng)站
響應(yīng)式
響應(yīng)式網(wǎng)頁設(shè)計是一種解決問題的途徑巧勤，它建議設(shè)計和開發(fā)應(yīng)該根據(jù)用戶行為和環(huán)境（基于屏幕大小嵌灰，平臺和方向）進行響應(yīng)，這種實踐由靈活的網(wǎng)格和布局颅悉、圖片和CSS媒體查詢的智能使用所構(gòu)成沽瞭。當用戶從他們的便攜式電腦切換到iPad的時候，網(wǎng)站應(yīng)該自動切換合適的分辨率剩瓶，圖片尺寸和腳本能力驹溃。換句話說柒瓣，網(wǎng)站應(yīng)該能夠自動響應(yīng)用戶的設(shè)備參數(shù)。這樣就沒必要對市場上每一種設(shè)備都要進行不同的設(shè)計和開發(fā)吠架。
解決方案
0 根據(jù)屏幕分辨率調(diào)整樣式
相關(guān)工具：viewport、@media媒體查詢搂鲫、利用JavaScript在不同的樣式表間切換傍药，重新排放使之適應(yīng)不同的窗口寬度。
什么是viewport魂仍？
viewport是用戶網(wǎng)頁的可視區(qū)域/設(shè)備上瀏覽器的默認viewport的寬度拐辽。基于用戶窗口的寬度來改變設(shè)計的布局寬度擦酌，使得整個設(shè)計總能適應(yīng)屏幕的寬度俱诸，無需使用水平滾動條。
? ? viewpor content屬性值中的這四個參數(shù)赊舶，分別代表 :
? ? width:可視區(qū)域的寬度睁搭，值可為數(shù)字或關(guān)鍵詞device-width（CSS像素和物理像素不同）
? ? height:同width
? ? intial-scale:頁面首次被顯示是可視區(qū)域的縮放級別，取值1.0則頁面按實際尺寸顯示笼平，無任何縮放
? ? maximum-scale=1.0,minimum-scale=1.0;可視區(qū)域的縮放級別园骆，
? ? maximum-scale用戶可將頁面放大的程序，1.0將禁止用戶放大到實際尺寸之上寓调。
? ? user-scalable:是否可對頁面進行縮放锌唾，no禁止縮放
1 元素做成響應(yīng)式：
1.1文字做成響應(yīng)式
1.1.1 自適應(yīng)式文字
相關(guān)工具：em單位
1.1.2 如果想要對每一行特定的文本字符進行優(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è)計在極端的尺寸下不要被拉得太長/壓得太扁）
2 布局做成響應(yīng)式：
2.1流式布局（liquid layout）：
根據(jù)頁面寬度余黎，對已存在于網(wǎng)頁中的元素進行重新布局。
相關(guān)工具：max-width灸蟆、max-width+媒體查詢（限定彈性程度）
2.2彈性布局（elastic layout）：
在間隔一致的水平或垂直的線所形成的網(wǎng)格中設(shè)計一致的模式驯耻。
相關(guān)工具：flex、max-width炒考、max-width+媒體查詢（限定彈性程度）
2.3布局網(wǎng)格（layout grid）
在間隔一致的水平和垂直的線所形成的網(wǎng)格中設(shè)計一致的模式可缚。
相關(guān)工具：grid（做法是定義一個容器元素并設(shè)置display：grid，使用grid-template-columns 和 grid-template-rows屬性設(shè)置網(wǎng)格的列與 行的大小斋枢，然后使用grid-column 和 grid-row屬性將其子元素放入網(wǎng)格之中帘靡。與flexbox類似，網(wǎng)格項的源順序無關(guān)緊要瓤帚。為了更好地使你的網(wǎng)格與媒體查詢相結(jié)合使用描姚，你可以在 CSS 中任意放置涩赢。）
實例分析：
NASA主頁在兩種窗口寬度下的頁面顯示狀態(tài)：
因為我們要用響應(yīng)式，所以一開始先在html中加入viewport 聲明：meta name=“viewport”content=“width=device-width,initial-scale=1.0,? minimum-scale=1.0,? user-scalable=no”
1.確定布局：結(jié)構(gòu)內(nèi)部各個內(nèi)容的大體位置轩勘。請熟練使用各種盒元素筒扒、塊元素、行內(nèi)元素的屬性绊寻。
2.確定圖層間關(guān)系花墩，這一步是為了能夠更強化體感關(guān)系的包括動態(tài)的。請熟練使用各種選擇器澄步。
3.填充細節(jié)
1.在html中加入viewport
2.在html中處理navigation分塊——main-nav&sub-nav
操作步驟
/*這2個列表冰蘑，之后可以用對li元素設(shè)置inline-block屬性，再消除inline-block間距來實現(xiàn)橫欄的樣式村缸。完成這一塊的html之后祠肥，馬上處理它的css*/
.body{
background:black;
padding:15px;
}
header{
background:url(“img”);
}
.main-nav{
Background:black;
}
.sub-nav{
background:black;
}
.util{
background:black;
}
/*技巧：再定大調(diào)的過程中，這2個nav梯皿，可以先不同背景色區(qū)分開來仇箱，之后處理樣式：用對li元素設(shè)置inline-block屬性，再消除inline-block 間距來實現(xiàn)橫欄东羹。
這是第一步工碾，區(qū)分結(jié)構(gòu)，接下來更細一點地繼續(xù)調(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個行*/
# 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;
}
/*2）調(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量蕊；
}
/*再針對細分的util內(nèi)部進行大小微調(diào)：*/
.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势就；
}
/*看一下效果辞居；大了一些，因為默認了padding和border蛋勺，把它們定義為0*/
.search-input{
##? display:inline-block；
###? width:100%鸠删；
### height:100%抱完；
#### border:0；
}
/*接下來再處理細節(jié)方面刃泡，豎線問題：
因為豎線比字體大小更大巧娱，可以main-nav用border-left:? solid 2px實現(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桨踪；
}
/*把第一個的左邊線去掉*/
.main-nav li:first-child{
##### border-left:0px
}
/*再去除間距：用對li元素設(shè)置inline-block屬性老翘，再消除inline-block間距來實現(xiàn)橫欄的樣式。*/
/*再查看效果锻离，發(fā)現(xiàn)ul這里特別擠铺峭，你第一個想到的就是默認的那些事兒：*/
ul{
######? padding:0 40px；
######? margin:0汽纠；
}
/*40px是左右卫键，還是要一點的，后來又去掉了虱朵，再微調(diào)一下盒子大小*/
.main-nav li{
##### border-left:2px solid #a55555莉炉；
##### height:30px；
##? display:inline-block碴犬；
######? padding:10px絮宁；
}
sub-nav和main-nav的處理方法大致一樣。*/
/*首先處理豎線并去掉第一個元素*/
.sub-nav li{
##### border-left:solid 1px white服协；
##? display:inline-block羞福；
#######? color:white;
background:grey;
}
把第一個的左邊線去掉
.sub-nav li:first-child{
##### border-left:0px
#######? text-align:center;
}
/*首先處理ul,給ul加個背景，給背景加個外框蚯涮，豎線可以掉下來了治专，可以看到margin 的距離會變寬*/
/*再對字體卖陵，顏色和間距進行微調(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;
}
/*再對.util-img一分為二泪蔫，進行背景圖片的設(shè)置*/
.search-img{
##? display:inline-block；
########? background:url(“”);
########? height:50px;
}
.share-img{
##? display:inline-block喘批；
########? background:url(“”);
########? height:50px;
}
/*樣式就做好了撩荣，接下來做navigation的響應(yīng)式效果，也即寬度在***以下時候的樣式*/
