css - 为什么在移动设备上调整浏览器窗口大小时我的网页看起来不同？

Question

这是我的网页在调整浏览器窗口大小时的样子

这是我的网页在手机上的样子

如您所见，移动设备上的一切看起来都一团糟，但在调整浏览器窗口大小时，它实际上看起来还不错。怎么会？有一个简单的解决方法吗？这是我的代码。当谈到 CSS 时，我有点迷茫，我只是在寻找一个快速解决这个问题的方法。

    body {
    background-image: url("https://lumiere-a.akamaihd.net/v1/images/sa_pixar_virtualbg_coco_16x9_9ccd7110.jpeg");
}

.header {

}

#heading {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  color: white;
}

#logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  width: 400px;
  min-height: 350px;
  margin: 0 auto;
}

select, input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

label {
  font-family: 'Spinnaker', sans-serif;
}

#deviceSelector select {
  width: 50%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #DDDDDD;
}

<div class="header">
    <img src="logo.png" id="logo">
    <h1 id="heading">Tidsbokning</h1>
</div>
<div class='container'>
    <form action='' method='post' id='firstForm' autocomplete='off'>
        <label for='people'>Välj antal personer</label>
        <select id='people' name='people'>
            <option value='1'>1</option>
            <option value='2'>2</option>
            <option value='3'>3</option>
            <option value='4'>4</option>
            <option value='5'>5</option>
            <option value='6'>6</option>
            <option value='7'>7</option>
            <option value='8'>8</option>
            <option value='9'>9</option>
            <option value='10'>10</option>
        </select>
        <div id='deviceSelector'>
            <label for='device1'>Välj enhet (person 1)</label><br>
            <select id='device1' name='device1'>
                <option value='VR'>Virtual Reality</option>
                <option value='RacingSim'>Racing Simulator</option>
                <option value='PC'>Dator</option>
                <option value='Switch'>Nintendo Switch</option>
            </select><br>
        </div>
        <label for='time'>Välj tid</label>
        <select id='time' name='time'>
            <option value='30'>30 min</option>
            <option value='60'>1h</option>
            <option value='90'>1h 30min</option>
            <option value='120'>2h</option>
            <option value='150'>2h 30 min</option>
            <option value='180'>3h</option>
            <option value='210'>3h 30 min</option>
            <option value='240'>4h</option>
            <option value='270'>4h 30 min</option>
            <option value='300'>5h</option>
        </select>
        <label for='priceTotal'>Pris</label>
        <input type='text' id='priceTotal' name='priceTotal' value='50 kr' disabled>
        <input type='submit' name='submit' value='Fortsätt'>
    </form>
</div>

标签： css

Answer 1

只需.container使用媒体查询更改移动设备的宽度

@media screen and (max-width: 480px) {
  .container {width: 300px;}
}

完整代码

body {
    background-image:url("https://lumiere-a.akamaihd.net/v1/images/sa_pixar_virtualbg_coco_16x9_9ccd7110.jpeg");
}

.header {

}

#heading {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  color: white;
}

#logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  width: 400px;
  min-height: 350px;
  margin: 0 auto;
}

@media screen and (max-width: 480px) {
   .container {width: 300px;}
 }

select, input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

label {
  font-family: 'Spinnaker', sans-serif;
}

#deviceSelector select {
  width: 50%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #DDDDDD;
}

<div class="header">
    <img src="logo.png" id="logo">
    <h1 id="heading">Tidsbokning</h1>
</div>
<div class='container'>
    <form action='' method='post' id='firstForm' autocomplete='off'>
        <label for='people'>Välj antal personer</label>
        <select id='people' name='people'>
            <option value='1'>1</option>
            <option value='2'>2</option>
            <option value='3'>3</option>
            <option value='4'>4</option>
            <option value='5'>5</option>
            <option value='6'>6</option>
            <option value='7'>7</option>
            <option value='8'>8</option>
            <option value='9'>9</option>
            <option value='10'>10</option>
        </select>
        <div id='deviceSelector'>
            <label for='device1'>Välj enhet (person 1)</label><br>
            <select id='device1' name='device1'>
                <option value='VR'>Virtual Reality</option>
                <option value='RacingSim'>Racing Simulator</option>
                <option value='PC'>Dator</option>
                <option value='Switch'>Nintendo Switch</option>
            </select><br>
        </div>
        <label for='time'>Välj tid</label>
        <select id='time' name='time'>
            <option value='30'>30 min</option>
            <option value='60'>1h</option>
            <option value='90'>1h 30min</option>
            <option value='120'>2h</option>
            <option value='150'>2h 30 min</option>
            <option value='180'>3h</option>
            <option value='210'>3h 30 min</option>
            <option value='240'>4h</option>
            <option value='270'>4h 30 min</option>
            <option value='300'>5h</option>
        </select>
        <label for='priceTotal'>Pris</label>
        <input type='text' id='priceTotal' name='priceTotal' value='50 kr' disabled>
        <input type='submit' name='submit' value='Fortsätt'>
    </form>
</div>