移動樣式表與主樣式表

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文件定位到使用屏幕的任何設備，任何樣式應該適用於窄設備，因爲它適用於寬設備。您可能需要重構您的樣式規則。

此外，請確保您的移動樣式表在通用屏幕之後列出，否則通用屏幕樣式表將覆蓋移動樣式表。