Question

我正在尝试以响应式的方式调整布局的主体，但是当我转到移动布局时，尺寸保持在屏幕的px但不在所有移动屏幕上。看看底部的图片，移动尺寸是一个，蓝色区域说的是空间不同。

我在这里看到了一些像这样的问题并尝试了所有解决方案，但仍然无效。

另一个问题：

html, body {
/*font-size: 40px;*/
margin:0; /* remove default margin */
padding:0; /* remove default padding */
width:100%; /* take full browser width */
height:100%; /* take full browser height*/
}

/*(set the full width window [width = device-width])*/

.content{
border-style: outset;
border-width: 3px;
border-radius: 7px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 0px 0px 40px 3px rgba(199,191,199,1);
-moz-box-shadow: 0px 0px 40px 3px rgba(199,191,199,1);
box-shadow: 0px 0px 40px 3px rgba(199,191,199,1);
max-width: 70%;
margin: 1% auto;
background-color: #F6F6F6;
}

Here the Layout Error

Answer 1

只是一个猜测，但你没有关闭html, body {标签

Answer 2

尝试申请

SELECT ID, Name = STUFF((SELECT ' ' + Name
                     FROM [dbo].[a] AS a2
                     WHERE a2.ID = a.ID
                     ORDER BY ID
                     FOR XML PATH('')),1,1,'')
                  FROM [dbo].[a] AS a
GROUP BY ID
ORDER BY ID;

而不是

width: 100vw;

100vw 表示元素的宽度必须窗口宽度的<100％。我不确定这种解决方案在这种情况下是否正确，但您必须尝试。

Answer 3

对我来说问题出在媒体查询：

属性“font-size”

字母和单词比她的容器大，单调调整

Answer 4

您忘记关闭html，body标记，因此请在结尾处添加}。

另外：因为您使用的是chrome的开发工具，所以在切换设备后可能需要刷新页面。例如，对我来说默认是iphone 5，但是当我切换到iphone 6时，布局被搞砸了，就像放大了一样。所以我只是双击＆＃34;切换设备模式＆＃34;在右侧重新启动设备模式，当它正确显示时，它以iphone 6作为默认设备启动。

HTML /正文宽度不适合100％设备屏幕

4 个答案: