如何在移动设备上固定位置

时间:2016-01-21 16:17:22

标签: css css3

通常情况下,我有响应导航div。所以我想为它编写CSS,以便仅在移动设备上修复位置。我该怎么做?

2 个答案:

答案 0 :(得分:0)

您可以使用CSS媒体查询。

在这里您可以找到更多信息: Using media query

您案例的一个例子:

@media only screen and (max-width: 40em) and (orientation: portrait){ // your code}

答案 1 :(得分:0)

我无法举一个例子,因为您的问题非常模糊,但您可以使用css媒体查询来更改手机的样式。您可以设置应用这些样式的最大宽度,这意味着小于该宽度的任何内容都将使用这些样式。 (媒体查询还有很多其他选项,如宽高比;您可以看到更多这些选项here,以及如何使用它们。)

以下是您可以使用的媒体查询的一个非常基本的示例:

@media only screen and (min-width: 480px) {
    /* Styles here */
}

您可以在以下网站了解更多相关信息:

  1. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
  2. Common CSS Media Queries Break Points
  3. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
  4. https://responsivedesign.is/articles/why-you-dont-need-device-specific-breakpoints
  5. [还有更多,只是谷歌它,你会发现无数的教程和例子。]