詢問手機板網頁排版問題

css html

姜義新 2021-10-20 20:28:54 ‧ 1050 瀏覽

分享至

我用css @media screen 分辨手機板的網頁，在電腦上拉網頁都無問題，正常顯示，但到了手機上就會出現排版問題，請問要如何解決?
先感謝各位大大!!

上圖為電腦拉伸網頁

上圖為手機板看網頁

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>姜義新 | 個人網站</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>姜義新 個人網站</title>
   <link rel"stylesheet" href = "style.css">
 </head>
 <body>
   <section>
     <img src="https://i.imgur.com/khDyxAs.jpg" class="mosque" >
     <header>
       <a href="https://www.jamesworkstation.cf" class="logo">Jamesworkstation</a>
       <div class = "toggle"></div>
       <ul class = "navigation">
         <li><a href="content.html" style="--i:1;" class="active">Content</a></li>
         <li><a href="https://www.jamesch.cf/" style="--i:2;">Blog</a></li>
         <li><a href="https://github.com/jabee0228" style="--i:3;" >Github</a></li>
        </ul> 
     </header>  
     
     <div class="content">
       <div class="textBox">
         <h2>歡迎來到姜義新的</h2>
         <h2>個人網站</h2>
         <p>Junior Programmer | Web Developer / APP Developer</p>
         <a href="content.html">Content</a>  
       </div>
     </div>
     <ul class="sci">
       <li><a href="https://www.instagram.com/jabee0228/" ><img src="https://i.imgur.com/96BFIGF.png" height="40" width="35"></a><li>
       <li><a href="https://github.com/jabee0228" ><img src="https://i.imgur.com/xQ3hVFh.png" height="40" width="40"></a><li>
       <li><a href="https://www.youtube.com/channel/UCbg0HQ82YygkxFxiLtBWwtQ" ><img src="https://i.imgur.com/EX7h8dI.png" height="40" width="40"></a><li>
     </ul>  
   </section>  
   <script>
     const menuToggle = document.querySelector('.toggle');
     const navigation = document.querySelector('.navigation');
     menuToggle.onclick = function(){
       menuToggle.classList.toggle('active');
       navigation.classList.toggle('active');
     }
   </script>  
 </body>
 </html>
<!-- partial -->
  
</body>
</html>
© 2021 GitHub, Inc.
Terms
Privacy
Security
Status
Docs
Contact GitHub
Pricing
API
Training
Blog
About

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800&display=swap');
*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Nunito', sans-serif;
}
section
{
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 220px 70px;
  display: flex;
  justify-content: flex-start;
  aligh-items: center;
}
header
{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 40px 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
}
header .logo
{
  position: relative;
  color: #ffc0cb;
  display: inline-block;
  font-size: 2em;
  text-decoration: none;
  font-weight: 800;
  opacity: 0;
  animation: slide_l 0.5s linear forwards;
  animation-delay: 0.2s;
  
}
@keyframes slide_l
{
  0%
  {
    transform: translateX(-100px);
    opacity: 0;
  }
  100%
  {
    transform: translateX(0px);
    opacity: 1;
  }
}
header ul
{
  position: relative;
  display: flex;
}
header ul li
{
  list-style: none;
}
header ul li a
{
  display: inline-block;
  color: #ffc0cb;
  font-size:1.1em;
  margin-left: 10px;
  display: inline-block;
  padding: 8px 18px;
  text-decoration: none;
  user-selcet: none;
  opacity: 0;
  animation: slide_t 0.5s linear forwards;
  animation-delay: calc(0.2s * var(--i));
}
@keyframes slide_t
{
  0%
  {
    transform: translateY(100px);
    opacity: 0;
  }
  100%
  {
    transform: translateY(0px);
    opacity: 1;
  }
}
header ul li a.active,
header ul li a:hover
{
  background: #0169b2;
  color: #fff;
  border-radius: 30px;
}
.content
{
  position: relative;
}
.content .textBox
{
  position: relative;
  max-width: 550px;
}
.content .textBox h2
{
  color: #0169b2;
  font-size: 3.5em;
  margin-bottom: 10px;
  line-height: 1.2em;
  font-weight: 700;
  opacity: 0;
  animation: slide_l 0.5s linear forwards;
  animation-delay: 0.2s;
} 
.content .textBox h3
{
  color: #0169b2;
  font-size: 2em;
  margin-bottom: 10px;
  line-height: 1.2em;
  font-weight: 700;
  opacity: 0;
  animation: slide_l 0.5s linear forwards;
  animation-delay: 0.2s;
} 
.content .textBox p
{
  font-size: 1.2em;
  color: #333;
  opacity: 0;
  animation: slide_l 0.5s linear forwards;
  animation-delay: 0.2s;
} 
.content .textBox a
{
  display: inline-block;
  margin-top: 20px;
  padding: 15px 30px;
  background: #ff5e8e;
  color: #fff;
  font-size: 1.2em;
  border-radius: 1.2em;
  font-weight: 700;
  Letter-spacing: 1px;
  text-decoration: none;
  opacity: 0;
  animation: slide_l 0.5s linear forwards;
  animation-delay: 0.2s;
} 
.sci
{
  position: absolute;
  bottom: 40px;
  display: flex;
  justify-content: center;
  aligb-items: center;
}
.sci li
{
  list-style:none;
}
.sci li a
{
  position: relative;
  display: inline-block;
  margin-right: 15px;
  opacity: 0;
  animation: slide_t 0.5s linear forwards;
  animation-delay: 0.2s;
}
.sci li a:hover
{
  background: #ff5e8e;
  transform: translateY(-10px);
}
.mosque
{
  position: absolute;
  bottom: 0;
  right: 0;
  max-width: 600px;
  animation: fi 1s linear forwards;
  animation-delay: 0s;
}
.mosque1
{
  position: absolute;
  bottom: 0;
  right: 0;
  max-width: 745px;
  animation: fi 1s linear forwards;
  animation-delay: 0s;
}
@keyframes fi
{
  0%
  {
    opacity: 0;
  }
  100%
  {
    opacity: 1;
  }
  
}
@media (max-width: 990px)
{
  section
  {
    padding: 150px 20px;
  }
  header
  {
    padding: 20px;
  }
  .navigation
  {
    display:none;
  }
   .navigation.active
  {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  header ul li
  {
    margin: 10px 0;
  }
  header ul li a
  {
    margin-Left: 0;
  }
  .toggle
  {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: #0169b2 url(menu.png);
    background-size: 30px;
    background-repeat: no-reapeat;
    background-position: center;
    cursor: pointer;
    z-index: 1000;
    border-radius: 2px;
  }
  .toggle.active
  {
    background: #0169b2 url(close.png);
    background-size: 25px;
    background-repeat: no-reapeat;
    background-position: center;
    
  }
  .mosque
  {
    max-width: 500px;
  }
  .mosque1
  {
    max-width: 500px;
  }
  .content .textBox h2
  {
    font-size: 2.5em;
  }
  .content .textBox p
  {
    font-size: 1rem;
  }
}
@media (max-width: 1120px)
{
  .mosque
  {
    opacity: 0.4 !important;
  }
  .mosque1
  {
    opacity: 0.4 !important;
  }
}

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

純真的人

iT邦大師 1 級 ‧ 2021-10-21 10:05:45

最佳解答

你手機版面的宣告在Head少放這個~
版面寬度根據手機寬度而設定~

<meta name="viewport" content="width=device-width" />

回應 7
分享
檢舉

看更多先前的回應...收起先前的回應...

Mao iT邦新手 1 級 ‧ 2021-10-21 14:21:55 檢舉

對耶！我都沒注意到使用 RWD 卻沒放這個 meta
平常 emmet 太習慣忽略了

姜義新 iT邦新手 4 級 ‧ 2021-10-21 23:03:12 檢舉

不過我發現蘋果手機無法正常顯示ㄟ用安卓手機正常但用iphone下面照片沒有虛化

想詢問大大這個怎麼解決?
謝謝

姜義新 iT邦新手 4 級 ‧ 2021-10-21 23:46:37 檢舉

剛剛查了一下似乎opacity無法用在蘋果系統上但我使用webkit仍然無法正常用想詢問大大們這個要如何解決?
謝謝

純真的人 iT邦大師 1 級 ‧ 2021-10-21 23:51:44 檢舉

姜義新
基本你查Google的opacity 在IOS問題就可以找到答案了~
參考網址
https://stackoverflow.com/questions/7548833/ios-css-opacity-visibility-transition

.mydiv {
        visibility:hidden;
        opacity: 0;
        transition: all 1s ease-out; 
        -webkit-transition: all 1s ease-out;
        -moz-transition: all 1s ease-out;
        -o-transition: all 1s ease-out;
}
.mydiv:hover {
            visibility:visible;
            opacity: 1;
}
.mydiv:active {
            -webkit-transition: opacity 1s ease-out;
}

姜義新 iT邦新手 4 級 ‧ 2021-10-21 23:58:56 檢舉

不太懂您的意思是要加入 visibility:visible; 嗎?
因為我剛剛又翻了一下 opacity 這個屬性蘋果應該支援呀
是否能示範給我看?
萬分感謝!

純真的人 iT邦大師 1 級 ‧ 2021-10-22 00:41:05 檢舉

你要確認一下~是否你的手機剛好不支援opacity 這個屬性
https://www.itread01.com/p/642674.html

姜義新 iT邦新手 4 級 ‧ 2021-10-25 20:40:52 檢舉

因為我後來查了很久目前蘋果系統應該支援opacity才對但我的卻無法使用目前猜測有可能是!important 的問題不過我想請問大大為何我的網頁把!important拿掉就會出錯呢？

登入發表回應

Mao

iT邦新手 1 級 ‧ 2021-10-20 21:18:46

———— 10 / 21 更新————
如同樓下大大說的沒錯
使用 RWD @media screen 這個語法，
需要再 <head> 下 <meta name="viewport" ...> 標籤

<head>
    <meta charset="UTF-8">
    <title>姜義新 | 個人網站</title>
    <meta name="viewport" content="width=device-width" />
</head>

把最佳解答給樓下的大大吧～

平常 emmet 用習慣了，沒注意到 RWD 要使用的 <meta> 標籤，著實太慚愧了...

———— 舊的 ————

應該是 max-width 這個語法影響了顯示

看你的排版方式，應該是想讓圖片滿版
可以考慮別用 max-width 改用 height: 100%; 應該就好
記得 @media screen 裡面的 max-width 刪掉

如果導航條想要白色背景，就幫導航條上 background-color

.mosque
{
  position: absolute;
  bottom: 0;
  right: 0;
  /* max-width: 600px; 改成使用 height*/
  height: 100%;
  animation: fi 1s linear forwards;
  animation-delay: 0s;
}

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

姜義新 iT邦新手 4 級 ‧ 2021-10-20 21:24:19 檢舉

先感謝大大回答
但我不太懂您說的特定斷點是?
能舉例或是示範嗎?
謝謝

Mao iT邦新手 1 級 ‧ 2021-10-20 22:17:14 檢舉

把 max-width 換成 height: 100% 應該能達到你想要的效果。

Mao iT邦新手 1 級 ‧ 2021-10-21 14:30:20 檢舉

更新，用樓下大大的方法就能解決 RWD 的問題。

姜義新 iT邦新手 4 級 ‧ 2021-10-21 18:46:23 檢舉

好的不過還是感謝您的解答

登入發表回應

我要發表回答

立即登入回答

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js

IT邦幫忙