Question

我在这里一直在查看相当多的主题/问题，但找不到我正在寻找的内容。

基本上我已经做了一个普通的网站（内容位于一个960像素的区域内，因此它完全适合iPad等），这很棒，但我现在需要一个样式表，如果屏幕尺寸小于480px（适用于手机）设备）。

我遇到的问题似乎与meta视口等有关，所以我尝试了一些不同的方法，例如标题中的“<link rel="stylesheet" href="/templates/dervans/css/mobile.css" media="screen and (max-device-width: 480px)" />”，并设置了“<meta name='viewport' content='width=device-width, initial-scale=1'>”有效，但它打破了iPad和其他大于480px宽度的移动设备的网站。如果我删除视口，它在iPad等上再次正常工作，但不会通过移动css。

有什么想法吗？

Answer 1

只需在下一笔中添加到您的css文件中：

@media screen and (max-width: 480px) {
    class or id{
        background-color: lightblue;
    }
}

Answer 2

有几种选择。

我要使用的是沃伦·格里姆斯金专业回答的媒体查询，例如

@media screen and (max-width: 480px) {
.head{
    color: #000000;
}

}

或者您可以链接到html文件head部分中的单独文件，如下所示：

<link rel="stylesheet" type="text/css" href="mainstyle.css">
<link rel="stylesheet" type="text/css" href="mobilestyle.css">

后一个css文件中存在的样式将覆盖前一个

中的样式

视口元素也应如下所示：

<meta name="viewport" content="initial-scale=1" />

在不影响正常屏幕尺寸的情况下调用屏幕尺寸样式表

2 个答案: