Question

我正在尝试编写响应式网站的代码。我在head标签中使用了max-device-width属性，但我希望HTML完全忽略默认的css并完全接受我的移动css。现在它正在接受移动css，但它并没有完全取消主要的CSS，因此当我不想要它时，它会在移动设备上查看它的样式。那有意义吗？这就是我的头像代码

<head>
  <title>Website</title>
  <link href="stylesheet_website.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" type="text/css"
     media="only screen and (max-device-width: 768px)"
     href="mobile_website.css"/>
</head>

如何完全忽略stylesheet_website.css并在移动设备上查看时完全使用mobile_website.css？感谢

Answer 1

如果您希望仅在具有屏幕且最大设备宽度为768px的设备上加载一个样式表，而在所有其他设备（台式计算机，打印机等）上加载另一个样式表，则需要使用与...相反的媒体查询＆＃34;只有屏幕和（最大设备宽度：768px）＆＃34;。

幸运的是，有这样的媒体查询。

<head>
  <title>Website</title>
  <link href="stylesheet_website.css" rel="stylesheet" type="text/css"
     media="(not screen), (min-device-width: 769px)">
  <link rel="stylesheet" type="text/css"
     media="only screen and (max-device-width: 768px)"
     href="mobile_website.css"/>
</head>

请注意使用逗号表示or。

忽略移动设备的默认样式表

1 个答案: