iT邦幫忙

0

不同裝置網頁排版問題

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) }}
直播中
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

一般有兩招來處理

第一招:用程式判斷裝置,來載入不同的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>

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一勞永逸 而且你可以學習怎麼判斷 手機 平板 跟電腦 的螢幕尺寸~

我要發表回答

立即登入回答