flexbox样式在所有移动设备上均被忽略，但可在台式机上使用

Question

我正在学习flexbox，但似乎在任何移动设备上均无法正常工作。 第一张图片是台式机的体验，第二张图片是移动的。 一切都只是缩小而包装不起作用。 弹性设定：

.search-form {
    display: flex;
    flex-wrap: wrap;
}
input[type="search"] {
    flex: 2 0 250px;
}
button[type="submit"] {
    flex: 1 0 90px;
}

这是所有HTML和CSS的代码段。 我如何将其设置为在移动设备上工作？

 /*basic styles*/ html, body { margin: 0; } html { background: #88686A; } body { font: 100% Lato, Helvetica, sans-serif; background: white; width: 80%; margin: 0 auto; padding: 2%; line-height: 1.6; } article, aside, section, nav, figure, header, footer { display: block; } h1, h2, h3, h4 { font-weight: normal; font-family: LatoLight, Helvetica, sans-serif; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); color: #575451; margin: 0; line-height: 1; } h1 { font-size: 2.6em; } h2 { font-size: 2em; } h3 { font-size: 1.8em; text-transform: uppercase; } h4 { font: 1.2em Lato, Helvetica, sans-serif; color: black; } p { margin: 0 0 1em; } a { color: #77A0B8; text-decoration: none; } a:hover { text-decoration: underline; } code { color: red; } 

 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>short forms</title> <link href="_css/base.css" rel="stylesheet" type="text/css" media="screen"> <style> .search-form{ width:80%; margin: 0 auto; } input[type="search"] { box-sizing: border-box; background: #E9E9E9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0.35em 0.75em; border: none; font-size: 1.1em; text-decoration: none; line-height: normal; max-height: 3em; } button[type="submit"] { box-sizing: border-box; border-radius: 0px 2px 2px 0px; background: #8B798C; font-weight: 300; text-transform: uppercase; color: white; padding: 0.35em 0.75em; border: none; font-size: 1.1em; text-decoration: none; cursor: pointer; } button[type="submit"]:hover { background: #C17CCF; } /*flex it*/ .search-form { display: flex; flex-wrap: wrap; } input[type="search"] { flex: 2 0 250px; } button[type="submit"] { flex: 1 0 90px; } @media (max-width:450px){ body{ width: 100%; margin:0; padding: 1em 0 2em; } header { padding: 2% 5%; } } </style> </head> <body> <header> <h1>Creating Responsive Forms with Flexbox</h1> <p><a href="http://www.w3.org/TR/css3-flexbox/" title="Flexbox">Flexible Layout Box Model</a>, better known as <strong>Flexbox</strong>, is a great tool for crafting responsive regions or UI elements. While not well-suited for complete page layouts, Flexbox excels at controlling elements along a single axis or in arranging elements within discreet regions. This makes Flexbox a fantastic tool for creating responsive page elements that are normally tricky to handle, such as forms. Often Flexbox can create responsive components with a minimal amount of code and little to no media queries.</p> <h2>Short Forms</h2> <p>Our first exercise will focus on the basic concepts of how Flexbox can help create responsive content. We'll start with a basic search form that consists of two elements, a search input and a submit button.</p> </header> <article class="example"> <form class="search-form"> <input type="search" name="search" placeholder="Search this site" class="search-input"> <button type="submit" class="search-btn">Search</button> </form> </article> </body> </html> 

Answer 1

请使用视口元标记来控制移动浏览器上的布局，请在标头部分添加元标记：

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