Question

我想知道我是否能以某种方式创建if语句，如果屏幕低于800，则运行 mobile.css ，否则运行另一个CSS文件。

我的想法是创造这样的东西：

if (screen.width <= 800) {
  run.this.css = "<link rel="stylesheet" type="text/css" href="mobile.css" />";
}
else {
  run.this.css = "<link rel="stylesheet" type="text/css" href="desktop.css" />";
}

Answer 1

只需使用1个CSS文件并使用媒体查询覆盖：

/* DESKTOP.CSS CODE HERE */

@media screen and (max-device-width: 800px) {
    /* MOBILE.CSS CODE HERE */
}

如果你真的想要它们在单独的CSS文件中，你可以执行以下操作：

<link rel="stylesheet" type="text/css" media="screen and (max-width: 800px)" href="mobile.css" />

Answer 2

使用媒体查询，如下所示：

<link rel="stylesheet" type="text/css" href="mobile.css"
    media="screen and (max-width: 800px)" />
<link rel="stylesheet" type="text/css" href="desktop.css"
    media="screen and (min-width: 801px)" />

您要实现的目标称为responsive design 完整的教程在这里：http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
媒体查询教程：http://css-tricks.com/css-media-queries/

Answer 3

只需按照CSS中的媒体查询即可。例如：

/* Media queries in css */
@media(max-width: 800px) {
    // for 800px screen
}
@media(min-width: 801px) {
    // for larger then 800px screen
}

Answer 4

检查一下： What does @media screen and (max-width: 1024px) mean in CSS?

@media screen and (max-width: 1024px) { }

这样的事情会有所帮助。

Answer 5

如果您不能像所有人一样提及媒体查询（例如，如果您需要支持IE8），您可以尝试这样的事情：

$(document).ready(function() {

    function adjustStyle(width) {
        width = parseInt(width);
        if (width < 480) {
            $("body").removeClass("c800 c600");
            $("body").addClass("c400");

        } else if ((width >= 481) && (width < 600)) {
            $("body").removeClass("c400 c800");
            $("body").addClass("c600");

        } else if ((width >= 601) && (width < 800)) {
            $("body").removeClass("c400 c600");
            $("body").addClass("c800");

        } else {
            $("body").removeClass("c800 c400 c600");

        }
    }

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

此代码不是加载不同的样式表，而是在body标记中添加一个类，然后您可以创建＆＃39; fake＆＃39; mediaqueries：

.container {width:900px}
.c800 .container {width:700px;}
.c600 .container {width:500px;}

Answer 6

建议您使用media query进行回复

/* MEDIA QUERY FOR MOBILE DEVICES **********/    
@media (max-width: 767px) {
}

但是，如果您担心性能问题，并且只想为移动设备加载响应式代码css，那么就可以使用javascript。

<!-- mobile.css will load only if the resolution is less than 768 -->
if(screen.width<768)
{
    file = location.pathname.split( "/" ).pop();
    link = document.createElement( "link" );
    link.href = "mobile.css";
    link.type = "text/css";
    link.rel = "stylesheet";
    link.media = "screen,print";
    document.getElementsByTagName( "head" )[0].appendChild( link );
}

如果屏幕低于800运行此CSS，否则运行此CSS

6 个答案: