首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >响应式css仅在小型设备上不起作用

响应式css仅在小型设备上不起作用
EN

Stack Overflow用户
提问于 2018-06-19 08:08:17
回答 1查看 1.4K关注 0票数 1

我希望下面的css只适用于小型设备(移动),但也适用于移动和平板电脑。我怎么才能让它只在手机上工作呢?

代码语言:javascript
复制
@media (max-width: 980px) {
  h2 {
    font-size: 3em;
  }

  p {
    font-size: 2.3em;
    line-height: 1.7em;
  }

  button {
    width: 400px;
    height: 80px;
    font-size: 30px;
  }
}

根据postcss的说法,如果我使用@media (max-width: 30em),它只能在小型设备上运行。但是它不起作用,我也不知道为什么。

提前谢谢。

EN

回答 1

Stack Overflow用户

发布于 2018-06-19 09:40:08

对于CSS单位,em是基于继承的font-size的相对大小。因为您是初学者,所以我现在还是坚持使用px值。就像@MichaelSorensen说的,设置一个较低的值。对于您发布的媒体查询,您说的是“所有max-width980px的窗口都应该应用这些值”。希望它只适用于小型设备吗?设置一个较低的值。

Here are some standard device widths [CSS Tricks]

值得一提的是,“移动优先”是一个你会经常看到的概念。这是一个过于简单的例子。

代码语言:javascript
复制
/* this applies to .my-class no matter what size until you override */
.my-class {
    background-color: #f00; /* red */
}

/* this applies starting at 768px, many tablets */
@media screen and (min-width: 768px) {
    .my-class {
        background-color: #0f0 /* green */
    }
}

/* this applies starting at 1200px, many larger devices */
@media screen and (min-width: 1200px) {
    .my-class {
        background-color: #00f /* blue */
    }
}

就像我说的,这过于简单了。但是,如果你正在阅读关于媒体查询的博客文章,但没有得到它,希望这会有所帮助。

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50918987

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档