为3个特定分辨率开发网站

Question

我的任务是为我的公司开发一个wordpress网站，几乎有0个网站开发经验。我已经习惯了一点CSS，我已经拿出了这堆垃圾。

无论如何，我只需要开发3个分辨率（公司标准）。但是，自动缩放网站对我来说是完全神奇的。因此，我决定对3种特定分辨率（1920x1080,1440x900,1024x768）中的每一种进行硬编码。

以下是代码：

768位用户

 @media (min-width : 768px) 
 {
    .sidebar 
    {
        right: 115px;
        bottom: 40px;
    }
 }

900位用户

 @media only screen and (min-width : 900px) and (max-width: 900px)
 {
    .sidebar 
    {
        right: 155px;
        bottom: 65px;
    }
 }

1080位用户

 @media only screen and (min-width : 1080px) 
 {
    .sidebar 
    {
        right: 155px;
        bottom: 65px;
    }
 }

图  

  

问题：

     

问题是，我所做的硬编码缩放仅适用于    / 768用户/ 和 / 1080用户/ 。

     

我在 / 900 Users / 部分中所做的每一项更改都不起作用，我该如何解决？

Answer 1

在您的代码中，(min-width : 900px) and (max-width: 900px)仅定位900px的宽度，这是不可取的。

一种技术是使用＆＃34;移动优先实现＆＃34;首先从最小尺寸开始，然后继续前进。首先将其视为最小视口的样式，然后为越来越大的视口添加这些样式。

例如：

＆＃13;

＆＃13;

/* start with smallest "mobile viewport" styles here, as a default */

@media (min-width : 768px) {
    /* add styles for 768px and up */
}
@media (min-width : 900px) { 
    /* add styles for 900px and up */
}
@media (min-width : 1080px) {
    /* add styles for 1080px and up */
}

＆＃13;

＆＃13;

＆＃13;

您可能会发现这篇文章内容丰富：An Introduction to Mobile-First Media Queries

Answer 2

@media only screen and (min-width : 900px) and (max-width: 900px)意思是900px到900px ....所以没有任何意义。

如果我理解你的问题，这应该有效：

@media only screen and (min-width : 900px) and (max-width:  1080px)  

Answer 3

您将使用CSS3媒体查询来实质上定义您支持的每个视口;从内部写出你的风格。有几种方法可以调用它 - 但我发现以下最简单的测试开始...您还必须确保HTML文档中的元视口标记已正确定义。

@media (max-width:900px) and (min-width:400px) {
    .foo {
        display:none;
    }
}​