怎么制作響應(yīng)式網(wǎng)站（下）
- 作者：新網(wǎng)
- 來(lái)源：新網(wǎng)
- 瀏覽：100
- 2018-02-27 17:50:46
想這種出框的就是沒(méi)有去掉蒙版，這時(shí)候我們需要畫(huà)一個(gè)矩形，然后把他作為背景圖像，裁切進(jìn)去;另外，banner圖也需要畫(huà)一個(gè)矩形，然后設(shè)置100%寬度。
想這種出框的就是沒(méi)有去掉蒙版，這時(shí)候我們需要畫(huà)一個(gè)矩形，然后把他作為背景圖像，裁切進(jìn)去;另外，banner圖也需要畫(huà)一個(gè)矩形，然后設(shè)置100%寬度。
<
div>③網(wǎng)頁(yè)內(nèi)容和北京圖片的關(guān)系一定要分開(kāi)由圖知，紅框內(nèi)的是內(nèi)容，外的是背景區(qū);我們?nèi)ダ斫獗尘笆沁m應(yīng)瀏覽器的，瀏覽器的寬度是會(huì)隨設(shè)備而改變的，但內(nèi)容是居中不變的;所以在PS設(shè)計(jì)的時(shí)候，內(nèi)容必須獨(dú)立開(kāi)來(lái)。
④先做好一個(gè)斷點(diǎn)布局，然后先做最大的寬度適配。我們建議把基礎(chǔ)斷點(diǎn)的寬度設(shè)置為1280px，然后設(shè)置一個(gè)最大的適配寬度，我這里設(shè)置的是1600px;在適配的過(guò)程中，除了在1600px下調(diào)整元素的布局，還可以通過(guò)搖桿，左右拖拉，觀察過(guò)渡的過(guò)程是否有問(wèn)題出現(xiàn)。
⑤做好第一個(gè)和最大的適配后，開(kāi)始調(diào)整網(wǎng)頁(yè)元素的對(duì)齊參考點(diǎn)。我們可以看到，目前這個(gè)標(biāo)題是居中對(duì)齊為參考的，那么在頁(yè)面縮小或者擴(kuò)大的時(shí)候，他就會(huì)以網(wǎng)頁(yè)的中心為參考點(diǎn)，進(jìn)行縮放;也可以是向左固定，參考元素到網(wǎng)頁(yè)左邊的距離，但左右固定通常是logo和菜單用的。
⑥開(kāi)始適配768px平板寬度和375px手機(jī)寬度的布局同樣是先調(diào)整布局，然后縮放元素，設(shè)置元素的對(duì)齊參考點(diǎn)。
⑦觀察內(nèi)容是否超出當(dāng)前斷點(diǎn)的編輯區(qū)域通常在不同的斷點(diǎn)下，由于元素的縮放模式?jīng)]有選擇對(duì)，通常都會(huì)超出了斷點(diǎn)編輯范圍內(nèi)，在超出后需要按照你需要進(jìn)行調(diào)整。
⑧最后檢查不斷斷點(diǎn)縮放的過(guò)程中，圖片的縮放規(guī)則是否恰當(dāng)。選擇元素后，我們可以在Resize看到，圖片的縮放模式，我們可以通過(guò)搖桿調(diào)整的過(guò)程中去觀察，選擇一種最合適的縮放方式;而類(lèi)似LOGO之類(lèi)的，就可以固定不變。
商品已成功加入購(gòu)物車(chē)