iT邦幫忙

1

網頁響應式(已更新問題)

我想要將我的網頁,響應式化,我有加上
<meta name="viewport" content="width=device-width, initial-scale=0.5">
但仍然沒有作用,而且頁面整個縮排,希望有大大能夠幫我解惑,謝謝

以下網址為html及css,有點冗長,請見諒!

https://87jojo.github.io/Adopt-Dog-site/
https://github.com/87JoJo/Adopt-Dog-site

狀況圖: 右邊整個空白,已加上col-md-4,但仍無作用,右半部整個空白

https://ithelp.ithome.com.tw/upload/images/20200515/20126182pteFf8My7n.png

正常網頁圖:

https://ithelp.ithome.com.tw/upload/images/20200515/20126182k7tsunHaJl.png

CSScoke iT邦新手 4 級 ‧ 2020-05-16 21:47:51 檢舉
觀念有點不太OK
看起來很像是某種作業的感覺
要不要先學一下正確的觀念阿
鐵人賽的免費教學文章https://ithelp.ithome.com.tw/users/20112550/ironman/2072
no027843 iT邦新手 5 級 ‧ 2020-05-18 17:35:20 檢舉
謝謝Amos大大,我會繼續努力的
4
浩瀚星空
iT邦超人 1 級 ‧ 2020-05-15 14:41:19
最佳解答

其實這要找你的問題有點難了。

因為我發現你的css內用了很多 width+px設定
正常來說要做rwd。就盡量不要用width+px設定來規範。

建議你先開f12 debug除錯器後。
從最上層一層一層的將元件慢慢放進去找原因。
畢竟你現在的css我覺得有點雜。要整理一下才行。
免得互相干擾。

當然,如果真的不懂的話。善用 bootstrap 也是一種方式的。

no027843 iT邦新手 5 級 ‧ 2020-05-17 19:08:39 檢舉

好的,非常謝謝大大!

6
dragonH
iT邦超人 6 級 ‧ 2020-05-15 10:47:34

把你的 col-4

改成 col-md-4 類似這樣的

就有了

官方文件

codepen

看更多先前的回應...收起先前的回應...
no027843 iT邦新手 5 級 ‧ 2020-05-15 12:15:40 檢舉

非常謝謝大大,但我改了之後,好像還是有點怪怪的,怎麼說,就是我的版面沒有填滿整個畫面。右半部是空白的。
改完後變下圖這樣。
https://ithelp.ithome.com.tw/upload/images/20200515/20126182EAdEwyrJ8t.png

dragonH iT邦超人 6 級 ‧ 2020-05-15 13:31:30 檢舉

no027843

codepen

把你 index.css

body {
    margin: 0 auto;
    height: 100%;
    width: 100%
}

body {
    width: 100%;
}

拿掉

就正常了

這個你應該比我懂才對

畢竟是你寫的

/images/emoticon/emoticon07.gif

然後如果要 bootstrap 跟 custom css 一起用

就要注意 css

因為很容易就破壞 bootstrap 幫妳寫好的東西

Homura iT邦高手 1 級 ‧ 2020-05-15 13:47:31 檢舉

很多人不會改都把bootstrap的東西弄壞/images/emoticon/emoticon05.gif

dragonH iT邦超人 6 級 ‧ 2020-05-15 13:49:35 檢舉

/images/emoticon/emoticon50.gif

YoChen iT邦研究生 5 級 ‧ 2020-05-15 13:58:32 檢舉

感覺這樣應該還是不行,我看原Po把很多width都寫死了,不改回來的話,問題應該還很多~XDDD

dragonH iT邦超人 6 級 ‧ 2020-05-15 14:07:08 檢舉

這樣有解決他說的右邊空白的問題XD

其他的要靠他自己努力/images/emoticon/emoticon48.gif

咖冰拉 iT邦新手 1 級 ‧ 2020-05-15 16:02:18 檢舉

幫他解決 等於幫他重寫 放棄XD

no027843 iT邦新手 5 級 ‧ 2020-05-17 19:07:58 檢舉

謝謝各位大大的回答,我會努力排除問題的!

1
咖冰拉
iT邦新手 1 級 ‧ 2020-05-15 10:54:30

bootstrap現在推薦的,用RWD是要加沒錯,但你的問題跟他沒關係

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
no027843 iT邦新手 5 級 ‧ 2020-05-15 12:31:43 檢舉

我有加上這個了,但右半部還是呈現空白

不明
【**此則訊息已被站方移除**】
1
ted_chou12
iT邦新手 5 級 ‧ 2020-05-18 00:29:08
<style>
@media (max-width:1200px){
  .responsive_image {
    display: none;
  }
}
.header-top {
  height: auto !important;
}
.header-bottom {
  height: auto !important;
}
.header-bg-img {

}
.header-bg-image {
  width: auto !important;
}
</style>
<!doctype html>
<!-- lang代表網頁主要語言,如果有設對於搜尋引擎是友善的,對於瀏覽器在判斷是有幫助的 -->
<html lang="zh-Hant-TW">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <!-- 讓網頁響應式(RWD)設置生效 -->
    <!-- <meta name="viewport"
        content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> -->
    <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=1">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://87jojo.github.io/Adopt-Dog-site/bootstrap.min.css">
    <link rel="stylesheet" href="https://87jojo.github.io/Adopt-Dog-site/index.css">
    <!-- fontAwesome icon css -->
    <link rel="stylesheet" href="https://87jojo.github.io/Adopt-Dog-site/original/font-awesome-4.7.0/css/font-awesome.min.css">

</head>

<body>
    <!-- 導覽列 -->
    <div class="container-fluid">
        <header class="header">
            <div class="container">
                <div class="header-area">
                    <div class="header-top">
                        <div class="nav-bar">
                            <ul>
                                <li>
                                    <a href="https://87jojo.github.io/Adopt-Dog-site/about.html">關於領養寵物</a>
                                </li>
                                <li>
                                    <a href="https://87jojo.github.io/Adopt-Dog-site/adopt.html">搜尋寵物</a>
                                </li>
                                <li>
                                    <a href="#">關於我們</a>
                                </li>
                                <li>
                                    <a href="#">領養案例</a>
                                </li>
                                <li class="login">
                                    <a href="#">
                                        <i class="fa fa-unlock-alt"></i>
                                        登入</a>
                                </li>
                                <li>
                                    <a href="#">
                                        <i class="fa fa-user"></i>
                                        註冊</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="header-bottom">
                      <div class="row">
                          <div class="logo">
                              <img src="https://87jojo.github.io/Adopt-Dog-site/img/logo.png" alt="" class="img-fluid">
                              Pet Lover.
                          </div>
                        </div>
                        <div class="header-bottom-search row">
                              <div class="col-4 col-md-3">
                                <h3>尋找你的好夥伴!</h3>
                              </div>
                              <div class="col-8 col-md-6">
                              <div class="nav-item">
                                  <div class="nav-item dropdown" style="margin-right: 10px;">
                                      <i class="fa fa-paw"></i>
                                      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
                                          data-toggle="dropdown">
                                          我正在尋找...
                                      </a>
                                      <div class="dropdown-menu">
                                          <a class="dropdown-item" href="#">貓</a>
                                          <a class="dropdown-item" href="#">狗</a>
                                          <a class="dropdown-item" href="#">其他</a>
                                      </div>
                                  </div>
                              </div>
                              <div class="nav-item">
                                  <div class="nav-item dropdown">
                                      <i class="fa fa-location-arrow"></i>
                                      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
                                          data-toggle="dropdown">
                                          我所在的區域
                                      </a>
                                      <div class="dropdown-menu">
                                          <a class="dropdown-item" href="#">北區</a>
                                          <a class="dropdown-item" href="#">中區</a>
                                          <a class="dropdown-item" href="#">南區</a>
                                          <a class="dropdown-item" href="#">東區</a>
                                      </div>
                                  </div>
                              </div>
                              <a class="search-button">
                                  <p>確定</p>
                              </a>
                          </div>
                        </div>
                        <div class="col-3 responsive_image">
                          <div class="header-bg-img">
                              <h3>快來領養我~</h3>
                              <img class="header-bg-image" src="https://87jojo.github.io/Adopt-Dog-site/img/flea-treatment-dogs_full_width.jpg" alt="" class="img-fluid">
                          </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>

https://ithelp.ithome.com.tw/upload/images/20200518/20109782C7IT81u7ak.png
跟你一開始的有一點不太一樣。
你的寫法架構會有困難的原因在於沒有把上、下的位置分好,Logo 跟右邊的圖片在網頁縮起來的時候會跟其它東西打架。
其實 bootstrap 的跟 table 的概念一樣,但是上下左右要先決定縮小了,東西才知道位置要去哪。

no027843 iT邦新手 5 級 ‧ 2020-05-18 17:34:43 檢舉

非常謝謝大大!

我要發表回答

立即登入回答