Question

为了管理有关CSS的样式表，我对screen size处理感到有点迷失。我正在开发一个Django网站项目，我面对的是一个非常微妙的情况。

我的项目是在非常好的屏幕（Retina屏幕）上开发的，具有非常高的分辨率。但是，当我在一个非常糟糕的屏幕分辨率上观看我的项目时，一些元素不在应有的位置。

我举例说明了与HTML基本模板对应的.css文件中的部分：

/* ############################################# */
/* CSS File about Home application properties */
/* ############################################# */

@import url("http://bootswatch.com/flatly/bootstrap.min.css");

 /* If screen less than 1440px */
    @media screen and (max-width: 1440px) {
    .navbar-right {
        /*padding-left: 250px;*/
        position:absolute; 
        right:2%;
    }
}
     /* If screen bigger than 1440px */
    @media screen and (min-width: 1450px) {
    .navbar-right {
        /*padding-left: 400px;*/
        position:absolute; 
        right:2%;
    }
}

/* Define background color from upper navbar */
.navbar-inverse {
    background-color: #007A5E !important;
    }

/* DatasystemsEC tab */
.navbar-inverse .container-fluid .navbar-header .navbar-brand {
    color : white;
    }

/* Tab properties from navbar */
.navbar .nav > li > a {
    color:  white;
    }

footer {
    text-align: center;
    margin-top: 35%;
}

如何处理CSS样式表以使文件适应屏幕分辨率？

您能否告诉我以下想法的正确与错误：

为了考虑屏幕分辨率，我必须只写％而不是px
我必须首先编写CSS文件，以便在 a 和 b 之间进行屏幕分辨，然后在 b 和 c之间，...

例如，我的Django网站中的主要内容对应class = "col-sm-8"。我添加了margin-top = -68%，以便将内容准确定位到我想要的位置。但是在我朋友的屏幕上，同一个区块不在应有的位置。

我对CSS（以及Django）也很陌生，因为我在学习的过程中同时学习以实现我的项目。

谢谢你能帮我解决这个问题。

Answer 1

目前的共识是将网络开发“移动优先”。这意味着从最小的屏幕尺寸开始，一直工作到最大。 Bootstrap正是如此。

要确定项目的最适合media次查询，请参阅MDN上的this tutorial和this documentation。由于您使用的是Bootstrap，我建议您使用相同的breakpoins来避免不一致。

此外，请考虑在适当时使用vw和vh而不是百分比（我相信这可能是margin-top问题的一部分）。百分比是相对于容器的尺寸。 vw和vh相对于视口的宽度和高度（see in MDN）。

以帐户屏幕大小显示Django网站

1 个答案: