网站在不同屏幕尺寸下的显示方式不同

Question

I am really new to web design. 我真的是网页设计的新手。 I am building a website for students at my school. 我正在为学校的学生建立一个网站。 However, on my mac, the content is displayed at the center. 但是，在我的Mac上，内容显示在中间。 But on windows, the content has more room on the right than left. 但是在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

Check this code it may help you 检查此代码可能对您有帮助

 <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