網站在不同屏幕尺寸下的顯示方式不同

Question

我真的是網頁設計的新手。 我正在為學校的學生建立一個網站。 但是，在我的Mac上，內容顯示在中間。 但是在Windows上，內容的右側空間大於左側。

  .inner { text-align: center; display: inline-block; position: absolute; top: 30%; left: 25%; margin: 0 auto; }

  <div class="inner"> <h1>What are you looking for?</h1> <br> <button class="button button4"><font size="6">Developer</font></button> <button class="button button4"><font size="6">Entrepreneur<font size="6"></button> <button class="button button4"><font size="6">Other<font size="6"></button> </div>

Answer 1

檢查此代碼可能對您有幫助

 <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> .inner-div { text-align: center; margin: 0 auto; background-color: #fafafa; border: 1px solid #ccc; width: 40%; min-height: 200px; } .button { background-color: #f2f2f2; border: 1px solid #ccc; padding: 10px 20px; text-align: center; font-size: 14px; } .button:hover { background-color: #f9f9f9; border: 1px solid #aaa; padding: 10px 20px; text-align: center; font-size: 14px; cursor:pointer; } @media screen and (max-width: 1024px) { .inner-div { width: 60%; } } @media screen and (max-width: 678px) { .inner-div { width: 90%; } .button { width: 100%; } } </style> </head> <body> <div class="inner-div"> <h1> What are you looking for?</h1> <br> <button class="button"> Developer </button> <button class="button"> Entrepreneur </button> <button class="button"> Other </button> </div> </body> </html>

網站在不同屏幕尺寸下的顯示方式不同

問題描述

1 個解決方案

解決方案1
0 2017-09-30 04:40:50

網站在不同屏幕尺寸下的顯示方式不同

問題描述

1 個解決方案

解決方案1 0 2017-09-30 04:40:50

解決方案1
0 2017-09-30 04:40:50