响应式css仅在小型设备上不起作用
响应式css仅在小型设备上不起作用
提问于 2018-06-19 08:08:17
我希望下面的css只适用于小型设备(移动)，但也适用于移动和平板电脑。我怎么才能让它只在手机上工作呢？
@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)，它只能在小型设备上运行。但是它不起作用，我也不知道为什么。
提前谢谢。
回答 1
Stack Overflow用户
发布于 2018-06-19 09:40:08
对于CSS单位，em是基于继承的font-size的相对大小。因为您是初学者，所以我现在还是坚持使用px值。就像@MichaelSorensen说的，设置一个较低的值。对于您发布的媒体查询，您说的是“所有max-width为980px的窗口都应该应用这些值”。希望它只适用于小型设备吗？设置一个较低的值。
Here are some standard device widths [CSS Tricks]。
值得一提的是，“移动优先”是一个你会经常看到的概念。这是一个过于简单的例子。
/* 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 */
}
}就像我说的，这过于简单了。但是，如果你正在阅读关于媒体查询的博客文章，但没有得到它，希望这会有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50918987
复制相关文章
相似问题
腾讯云开发者
