Question

我想知道是否有任何方法可以根据设备类型为网页分配ID。例如，我将css设置如下

#desktop {
min-width:1200px;
min-height:500px;
}

#tablet {
min-width:600px;
min-height:480px;

#mobile {
min-width:320px;
min-height:400px;

我想要做的是将这些ID分配给body标签，我知道有办法检测设备并分配css文件，但是我可以根据设备为身体分配id吗？

Answer 1

您需要做的是使用名为媒体查询的css功能。

处理：在页面的head标签中添加下面的元标记，以正确显示设备上的页面（文字大小，宽度等...）

<meta name="viewport" content="width=device-width" />

或

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

在线查看以查看差异，启用缩放等...

然后，在你的CSS中，你必须像这样构建它

<强> CSS

Your curent css is here (for desktop)
    #the_name_of_the_div_is_the_same{
        width:100%;
        background-color:yellow;
    }

/* This are the 4 principals size of screen: */
/* No body is using this one
@media screen and (max-width: 1680px) {
    #the_name_of_the_div_is_the_same{
       Do something in css
    }
}*/

/* Then, if the width of the screen is under 960px and above 758px, your div will get this attributes */
@media screen and (max-width: 960px) {
    #the_name_of_the_div_is_the_same{
        width:80%;
        background-color:red;
    }
}

@media screen and (max-width: 758px) {
    #the_name_of_the_div_is_the_same{
        width:30%;
        background-color: black;
    }
}

@media screen and (max-width: 524px) {
    #the_name_of_the_div_is_the_same{
        width:70%;
        background-color: green;
    }
}

<强>尺寸：

iPhone 3 + 4人像w320 x 480

iPhone 5 portrait 320 x 568

Crappy Android portrait 240 x 320

Android（三星Galaxy）肖像380乘685

iPad portrait 768 x 1024

Kindle portrait 600 x 1024

或者您可以使用插件检测设备，并根据设备将它们重定向到正确的页面（3个不同的页面，或加载3个不同的css等）。注意：使用此解决方案，您的网站将无法响应，但它可以在所有设备上运行。

根据设备类型为body标记分配id

1 个答案: