Question

我正在帮助设计在Alpha Anywhere中构建的应用程序的样式。目标是使用@media标签来启用不同样式，以适应纵向的小型电话，纵向的大型电话，横向的电话和平板电脑。

我的想法是使用@media screen and...定义大小范围，并在方括号内添加样式代码，以定义适当的容器和字体大小，以使每种格式都非常适合将在其上显示的设备。

因为我在Alpha Anywhere中工作，所以有一个CSS标签。我需要将所有CSS都放在这一位置，这样就无法针对每种不同的样式引用不同的.css文件。我希望将一种样式的代码放在一个媒体范围内，而将另一种样式的代码放在另一媒体范围内，依此类推。我可以根据其@media范围定义多个线/区域吗？

@media screen and (min-width: 150px) and (max-width: 350px) and (orientation: portrait) {

/* Style Code for Small Phone Portrait Orientation Here */

}


@media screen and (min-width: 351px) and (max-width: 560px) and (orientation: portrait) {

/* Style Code for Large Phone Portrait Orientation Here */

}


@media screen and (max-width: 415px) and (orientation:landscape) {

/* Style Code for Phone Landscape Orientation Here */

}


@media screen and (min-width: 561px) {

/* Style Code for Tablet Here */

}

当我这样组织样式代码时，似乎只在听4组代码（平板电脑样式）中的最后一组样式。我可以在一页上设置这些不同尺寸/方向的样式吗？

Answer 1

Start from mobile并编写您的默认样式。在下一个断点处进行小的更改，使其保持简单，并且仅覆盖必要的内容。媒体查询定向只会使事情复杂化，因此请仅使用min-width。

    /* Styles for default  */


    @media screen and (min-width: 480px) {
        /* Add styles for next size up */
    }


    @media screen and (min-width: 720px) {

        /* Add styles for next size up */

    }


    @media screen and (min-width: 960px) {

        /* Add styles for next size up */

    }

在一个文档中确定CSS方向和大小

1 个答案: