我正在学习 flexbox，但它似乎无法在任何移动设备上正常工作。第一张图片是桌面体验，第二张是移动端。所有只是收缩和包装不起作用。 flex 设置:
.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>最佳答案
请使用视口(viewport)元标记来控制移动浏览器上的布局，请在头部添加元标记:
<meta name="viewport" content="width=device-width">
关于html - flexbox 样式在所有移动设备上都被忽略，但在桌面上有效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43450666/