移动样式表与主样式表

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文件定位到使用屏幕的任何设备，任何样式应该适用于窄设备，因为它适用于宽设备。您可能需要重构您的样式规则。

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