我有一些 html 和 css，如下所示。我想让它适应移动屏幕。 并添加到 Google 网站 block 。
当我为 container 和 form__field 添加 width: 100% 时，我给出了:
网站谷歌
只有代码，没有网站谷歌
如果删除 width: 100% 看起来像这样。没错。
如果在 Google 网站上插入已经适用于移动设备的内容 - 它会正确显示。适当缩放。
:root {
background: #f5f6fa;
color: #9c9c9c;
font: 1rem "PT Sans", sans-serif;
}
.container {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
a {
color: inherit;
}
a:hover {
color: #7f8ff4;
}
.uppercase {
text-transform: uppercase;
}
.padding_p{
padding-left: 18px
}
.btn {
display: inline-block;
background: transparent;
color: inherit;
font: inherit;
border: 0;
outline: 0;
padding: 0;
-webkit-transition: all 200ms ease-in;
transition: all 200ms ease-in;
cursor: pointer;
margin: 9px
}
.btn--primary {
background: #7f8ff4;
color: #fff;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
border-radius: 2px;
padding: 12px 36px;
}
.btn--primary:hover {
background: #6c7ff2;
}
.btn--back--primary:hover {
background: #9c9c9c2d;
}
.btn--primary:active {
background: #7f8ff4;
box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.2);
}
.btn--inside {
margin-left: -96px;
}
.form__field {
width: 100%;
background: #fff;
color: #a3a3a3;
font: inherit;
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1);
border: 0;
outline: 0;
padding: 22px 114px 22px 18px;
}
.form__textarea {
width: 440px;
height: 300px;
background: #fff;
color: #a3a3a3;
font: inherit;
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1);
border: 0;
outline: 0;
padding: 18px 18px;
margin: 18px;
resize: none;
}
.box div {
align-content: center;
display: inline-block;
}
@media (max-width: 400){
.container{
width: 100%
}
.form__field{
width: 100%
}
.btn{
width: 100%
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=PT+Sans'>
<link rel="stylesheet" href="static/style.css">
</head>
<body>
<div class="container">
<form class="form" action="/submit" method="POST">
<input name="playlist_url" type="text" class="form__field" placeholder="Ссылка на плейлист" />
<button type="submit" class="btn btn--primary btn--inside uppercase">Загрузить</button>
</form>
</div>
</body>
</html>更新
根据answer .我可以改变比例吗？否则，结果是被剪掉了。
这是未嵌入网站时的样子。你能把它设为全宽吗？
最佳答案
尝试添加第一个或第二个片段。
/************* short way **************/
form {
white-space: nowrap;
}
.form__field {
box-sizing: border-box;
}
/************* better way **************/
.btn--inside {
position: absolute;
top: 0;
right: 0;
margin-left: 0;
}
.form__field {
box-sizing: border-box;
width: 90%;
}
form {
position: relative;
width: 100%;
}
关于html - 使两个元素适应智能手机屏幕，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57508763/