我有一些CSS，它使整个网站的内容左右两边都有5em的边距。
.content {
margin-left: 5em;
margin-right: 5em;
}
然而，当我在手机或触摸板上进入网站时，我希望空白不起作用（没有空白）或只有1em的空白。我尝试了以下代码，但没有任何结果。更具体地说，我希望在使用我在每页上设置的初始比例的屏幕上，在1em上没有空白或只有空白。我想这只是手机和平板电脑。
@media screen
{
.content {
margin-left: 1em;
margin-right: 1em;
}
}
@media print
{
.content {
margin-left: 1em;
margin-right: 1em;
}
}
@media screen,print
{
.content {
margin-left: 1em;
margin-right: 1em;
}
}
您可以使用具有指定width的媒体查询来实现：
@media (max-width: 640px){
.content {
margin-left: 1em;
margin-right: 1em;
}
}
请参阅此处的通用设备宽度以选择所需的宽度：http://mydevice.io/devices/
另外，不要忘记在<head></head>标签中包含视口元，使其在手机上工作：
...
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
...
用于媒体查询的语法不正确。必须指定媒体查询将触发的宽度，换句话说，媒体查询中的代码将覆盖默认代码的屏幕宽度。
@media属性的语法为
`@media not|only *mediatype* and (*media feature*) {
CSS-Code;
}`
因此，您必须使用此代码来实现所需的结果：
@media (max-width: 667px){
.content {
margin-left: 1em;
margin-right: 1em;
}
}