移动样式表干扰主样式表

Question

我有我的移动样式表：

<link rel='stylesheet' media='only screen and (max-device-width: 480px)' href='css/mobile.css' type='text/css' />

我的主要样式表就是这样：

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>

当我从移动设备上访问该页面时，它会混合使用移动设备和主要样式表规则。如何使移动样式表专属于移动设备，以及屏幕独有的主样式表？

Answer 1

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>

<link rel='stylesheet' media='screen and (max-device-width: 480px)' href='css/mobile.css' type='text/css' />

还要确保你的头脑中有这个：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Answer 2

嗯，你的问题是两台设备都使用屏幕。您的css / style.css文件以任何使用屏幕的设备为目标，任何样式都应该适用于窄设备和宽设备。您可能需要重构您的样式规则。

此外，请确保在通用屏幕之后列出您的移动样式表，否则通用屏幕样式表将覆盖移动样式表。