Question

当我更改窗口大小时，一个简单的flex-wrap设置可以正常工作（按预期，更窄的窗口强制换行）。但是，当我切换到移动设备仿真（在Chrome 70.0上）时，尽管尺寸有所变化，但根据我转而使用移动设备之前的配置，这两个框会并排显示或堆叠（包装）。换句话说，如果开始时的窗口很宽，那么这些框将不自动换行，并排在一起。

尽管在模拟移动页面的宽度很窄，但我直接在移动模拟模式下加载，所以并排显示框。

不确定我在这里想念什么。下面的代码：

<!DOCTYPE html>
<html lang="en-US">

<head>
<style type="text/css">
  div.flexrow { display: flex; flex-wrap: wrap; padding-left: 20px }
  div.header { border: 1px solid black; min-width: 320px; flex-grow: 1 }
  div.content { border: 1px solid black; min-width: 320px; flex-grow: 1 }
</style>
</head>

<body>
<div class="flexrow">
  <div class="header">
    <h3>Section H3 header</h3>
    <p>text</p>
  </div>
  <div class="content">
    <ol>
      <li>List item 1. Lorem ipsum dolor sit amet, consectetur adipiscing 
elit.</li>
      <li>List item two. Lorem ipsum dolor sit amet, consectetur adipiscing 
elit.</li>
      <li>List item the third. Lorem ipsum dolor sit amet, consectetur 
adipiscing elit.</li>
    </ol>
  </div>
</div>
<body>
</html>

我正在使用Pixel 2XL或iPhone X，或在Chrome上使用任何其他其他模拟的移动选项。

Answer 1

很明显，移动Chrome太聪明了，以至于无法处理移动字体的大小。解决方案：通过添加来关闭该功能

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

位于HTML的开头。

切换到移动设备时，Flex-wrap失败

1 个答案: