Question

我为我制作的某个网络应用程序构建了一个网页。我想仅为智能手机用户添加特定选项，并且不希望非智能手机用户看到它。是否有任何方法可以定义只为智能手机用户显示的部分（div）？

提前致谢。

Answer 1

您可以使用响应式设计方法，并使用媒体查询实现您想要的只有css：

//THIS CSS CLASS IS APPLIED ALWAYS
div.my-option {
    display: none;
}

//THIS MEDIA QUERY APPLIES ITS STYLES ONLY WHEN THE SCREEN WIDTH IS <= 767, SO IT'S A SMARTPHONE DISPLAY.
//IT OVERRIDES THE ONE ABOVE
@media only screen and ( max-width: 767px ) {
    div.my-option {
        display: inline;
    }
}

如果您对自适应设计感兴趣，最常用的两个选项是Bootstrap和Zurb Foundation

网页部分仅适用于手机

1 个答案: