Question

我想为我的网站制作，这是我的问题：

如果用户使用计算机查看我的网页，则css应为

 <link rel="stylesheet" href="/pc.css" type="text/css" media="all" />

但是如果他们使用移动设备，则css应该是

 <link rel="stylesheet" href="/mobile.css" type="text/css" media="all" />

我将如何做到这一点。我想要html而不是php

Answer 1

你可以通过媒体查询做这样的事情

<link rel="stylesheet" media="screen and (min-device-width: 1024px)" href="pc.css" />
<link rel="stylesheet" media="screen and (max-device-width: 1024px)" href="mobile.css" />

如果您想要使用Javascript路线

function adjustStyle(width) {
    width = parseInt(width);
    if (width < 1024) {
        $("#size-stylesheet").attr("href", "css/mobile.css");
    } else {
       $("#size-stylesheet").attr("href", "css/pc.css"); 
    }
}

$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});

Answer 2

使用CSS中的媒体查询完成此操作可能更可靠。由于某些浏览器未启用JavaScript，尤其是移动浏览器，因此在没有JavaScript的情况下支持基本功能被视为最佳做法。有关详情，请参阅this answer by Haylem。

this SmashingMagazine.com article, "How to Use CSS3 Media Queries"中提供了对CSS3媒体查询的一个很好的解释。在您的示例中，您可以按如下方式快速实现：

<style>
@import url(/pc.css) (min-width:480px);
@import url(/mobile.css) (max-width:480px);
</style>

当然，这在旧版本的Internet Explorer中不起作用，因此您可能还需要考虑这一点：

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="/pc.css"/>
<![endif]-->

但是，如果您没有丰富的响应式网页设计（RWD）经验，那么最好考虑使用像Foundation或Bootstrap这样的CSS框架。查看this Mashable.com article for a good overview。

您可能还想查看更全面的快速入门套件HTML5 Boilerplate中使用的INIT。

使用用户代理的PC和移动站点代码

2 个答案: