Question

该网站是：Vivascoaching所以我试图优化我的网站移动，但无济于事。我想知道我可以添加到我的代码中来解决这个问题。除非我的浏览器最大化，否则我的网站似乎也有问题。你们介意看看吗？这是我的HTML和CSS：

html{
   height:100%;
   width:100%
}

header{
   margin-left: 20px;
   margin-bottom:5px;
}

body{
   background-color: #00B8E5;
   font-family: "Comic Sans MS", sans-serif;
}

h1,h2,h3{
   color: #112C84;
}

a:link {
   color: #112C84;
   text-decoration: none;
   font-size: 120%;
}
 

object {
   border-style: solid;
}



/*-------NAV STYLING------------*/

#mainlinks li{
   float:left;
   margin-left:150px;
}

#secondarylinks li{
   margin-bottom:20px;
   margin-top:40px;
   padding-right:5px;
}

#secondarylinks ul{
   padding-left:20px;
}




/*---------- COLUMN STYLING ----------*/

.left_column{
   float:left;
   width:8%;
   margin-left:5px;
}


.middle_column{
   float:left;
   background-color:white;
   text-align:center;
   width:70%;
   margin:2px;
   padding:10px;
   border-style: solid;
}


.right_column{
   float:left;
   text-align:center;
   width:10%;
   margin:5px;
}




/*---------- MOBILE --------------*/


/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
/* iPhone 6 landscape */
@media only screen and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2)
{ }

/* iPhone 6 portrait */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 2)
{ }

/* iPhone 6 Plus landscape */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 3)
{ }

/* iPhone 6 Plus portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 3)
{ }

/* iPhone 6 and 6 Plus */
@media only screen
  and (max-device-width: 640px),
  only screen and (max-device-width: 667px),
  only screen and (max-width: 480px)
{ }

/* Apple Watch */
@media
  (max-device-width: 42mm)
  and (min-device-width: 38mm)
{ }

<!DOCTYPE HTML>
<html>
<head>
   <title>Vivas Coaching-Main</title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="../style/main.css">
   <link rel="stylesheet" href="../style/normalize.css">

</head>


<body>
   <header>
      <img src="Images/logo.png" alt="logo" width="465" height="135">
   </header>
   
   <div class="left_column">
   <nav id="secondarylinks">
      <ul>
         <li><a href="register.html" title="Register">Register</a></li>
         <li><a href="dates.html" title="Dates">Dates</a></li>
         <li><a href="pricing.html" title="Pricing">Pricing</a></li>
         <li><a href="forms.html" title="Forms">Forms</a></li>
      </ul>
   </nav>
   </div>
   
   <div class="middle_column">
   <nav id="mainlinks">
      <ul>
         <li><a href="index.html" title="Main">Main</a></li>
         <li><a href="classes.html" title="Classes">Classes</a></li>
         <li><a href="teambuilding.html" title="Team Building">Team Building</a></li>
      </ul>
   </nav>

  <img src="Images/SAT_summer_flyer.jpg" alt="SAT_summer_flyer" width="800" height="800">
   <footer>
      <p>&copy;VivasCoaching 2016</p>
   </footer>
   </div>

   <div class="right_column">
   <h2>Contact Us</h2>
   <p>(646)316-8481/<br>(403)718-0159</p>
   <p>Please fill out the information below and we will get back to you as soon as possible!<p>

   <form method="post" action="callback.php">

      <label for="firstname">First Name: </label>
      <input name="firstname" id="firstname" type="text" />

      <label for="lastname">Last Name: </label>
      <input name="lastname" id="lastname" type="text" />

      <label for="email">Email: <span class="required"></span></label>
      <input name="email" id="email" type="text" />

      <label>*What is 2+2? (Anti-spam)</label>
      <input name="human" placeholder="Type Here">
      
      <label for="message"> Message:  <span class="required"></span></label>
      
      <textarea id="message" name="message" cols="25" rows="10" placeholder="Type your message here!"></textarea>
      <input type="submit" id="submit"/>
   </form>
   </div>

</body>
</html>

Answer 1

您的网站没有响应（即适合移动设备），如果您无法手动设置网站响应，请使用bootstrap创建您的网站。如果您可以使用媒体查询，如下面的示例代码。你必须单独定位每一个。

@media only screen and (max-width : 480px){

/*Optimize your css code here for device  <= 480px*/

}

可以帮助您的非常好的教程就在这个链接上https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

网站问题。我的网站在移动设备和其他东西上看起来很糟糕

1 个答案: