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