iT邦幫忙

0

不同裝置網頁排版問題

html 網頁設計 bootstrap
阿薩姆 2021-01-25 13:35:38 ‧ 5091 瀏覽

  • 分享至 

  • xImage

Hi all,
目前網頁設計為左右排版, 以兩個div各佔30% 70%寬度, 左div含A與B, 右div為C
https://ithelp.ithome.com.tw/upload/images/20210125/20121046wCF3Ybz38C.png

但換成手機裝置後會因為padding關係導致沒對齊
https://ithelp.ithome.com.tw/upload/images/20210125/20121046cqy5A6pwCG.png

請問這部份該如何調整, 可以使用bootstrap class來設計嗎?或是要判斷裝置來寫css? 目前需求裝置只分PC與Mobile

tony iT邦新手 5 級 ‧ 2021-01-25 14:43:10 檢舉
不知道你對margin跟padding的了解是否透徹
因為你文中標示padding的部份照理來說都是margin才對

如果單純回答你的問題的話
可以把C的padding-left刪除
改成在左div身上寫padding-right
但這只是快速的做法
正確還是要用Media Query處理
阿薩姆 iT邦新手 4 級 ‧ 2021-01-25 14:48:43 檢舉
看來是還未透徹...
感謝建議, 看起來目前是@media用法比較符合需求
登入發表討論
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

3 個回答

4
通靈亡
iT邦高手 1 級 ‧ 2021-01-25 14:14:05
最佳解答

這種情況可以用 Media Query 另外處理：

/* 手機裝置的樣式 */
.xxx {
    padding-left: 0px;
}

/* 電腦裝置的樣式 (看你是用md的 768px 還是 lg的 992px) */
@media screen and (min-width: xxx px) {
  .xxx {
    
  }
}

或者你可以使用 Bootstrap 的 Grid System，另外在自定義Gutter間距的css。
Bootstrap 4 可以參考這篇，Bootstrap 5 可以參考官方文件

阿薩姆 iT邦新手 4 級 ‧ 2021-01-25 14:49:22 檢舉

原來有Media Query這種用法, 感謝建議

登入發表回應
2
㊣浩瀚星空㊣
iT邦大神 1 級 ‧ 2021-01-25 14:37:56

一般有兩招來處理

第一招：用程式判斷裝置，來載入不同的css對應
這招比較麻煩，會需要兩份css來處理。
但好處是可以針對各別情來細項設定。
對於不知該如何處理rwd的人，用這招會比較直覺點。

第二招：css的 media 規劃設定
如 通靈亡 那樣的規劃，利用css本身的media。來決定要呈現的處理方式為何。
一般用這招的，需要有一點空間運用的辨識力。
也就是說，需要有美工排版的能力來處理。
這也是rwd的基本功夫。

看更多先前的回應...收起先前的回應...
阿薩姆 iT邦新手 4 級 ‧ 2021-01-25 14:50:16 檢舉

由於不是很複雜的網頁, 會先採用Media Query作法, 謝謝建議

通靈亡 iT邦高手 1 級 ‧ 2021-01-25 15:44:01 檢舉

幫補充一下星空大提到的第一個作法細節：
<link> 可以像 CSS 一樣寫 media query 的條件

<!--手機裝置-->
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 991px)">

<!--電腦裝置-->
<link rel="stylesheet" href="pc.css" media="screen and (min-width: 992px)">

如果對於細節有興趣的話可以參考這篇 Stackoverflow 第二個回答

至於用 Javascript 引入的部分，如果有興趣理解可以參考這篇，不過可以的話建議用 Media Query 或 <link media>。

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2021-01-25 16:09:48 檢舉

LINK法我之前用的是程式化法就是了。

如

<link rel="stylesheet" href="css.php" />

然後在其php內做判斷包入，在用readfile的方式來解讀出來。
不過當時用這招是因為手機跟pc版的css相差很大。
不得已只能分開處理。

阿薩姆 iT邦新手 4 級 ‧ 2021-01-25 17:20:46 檢舉

感謝兩位熱心補充~~

登入發表回應
1
yanzhong
iT邦新手 4 級 ‧ 2021-01-26 09:55:45

margin為box與box的位置調整
我建議直接用media query一勞永逸 而且你可以學習怎麼判斷 手機 平板 跟電腦 的螢幕尺寸～

登入發表回應

我要發表回答

立即登入回答
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22183 篇
完賽人數
597 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙