Question

我试图创建一个非常基本的移动网站作为测试。我一直在考虑人们如何去做这件事。我假设会使用网页的JavaScript函数onload来决定使用哪个css文件。例如

if ( window.navigate.platform === "iPhone" ) {
<link rel="stylesheet" type="text/css" link="mobile.css">
}
else {
<link rel="stylesheet" type="text/css" link="desktop.css">
}

这是正确的总体思路，还是以不同的方式完成？

为我有限的知识道歉 - 我知道这是一个相当基本的问题

Answer 1

可以这样做但很多现代网站使用bootstrap来做到这一点。 Bootstrap将执行诸如重新排列移动设备上的页面之类的操作，但您甚至可以为不同的设备指定不同的布局，而无需使用不同的css文件。

查看grid system。它可能不是你需要的简单＆＃34;网站，但如果您正在考虑将它用于两套设备，那么在其上构建您的网站可能会更容易。

Answer 2

您可以使用媒体查询在link代码中定位不同的屏幕尺寸：

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

在此处阅读更多内容：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Answer 3

使用这样的媒体查询，你可以改变每个屏幕宽度的类样式

  @media (max-width:1024px) {
   .body{color:red;}
    }

    @media (max-width:762px) {
    .body{color:blue;}
    }  

    @media (max-width:640px) {
   .body{color:orenge;}
    }
    @media (max-width:480px) {
    .body{color:orenge;}
    }
    .body{color:orenge;}
    @media (max-width:414px) {
    .body{color:orenge;}
    }
    @media (max-width:375px) {

    }

这是一个应该如何调用移动网站？

3 个答案: