在桌面按钮/链接上显示移动隐藏

时间:2017-07-14 14:29:15

标签: html css

我正在尝试在我的网页中创建点击通话链接,我有以下

<a class="mobile-only" href="tel:+534306464456"><p class="">Click Here to call us</p></a>

我希望它只能在移动设备手机上专门显示 在我的CSS中我试过

@media (max-width: 991px) {
    .mobile-only {
        display:block !important;
    }

}
.mobile-only{
    display:none !important;
}

但它有效还没有办法实现这个目标吗?

3 个答案:

答案 0 :(得分:0)

CustomAnalyzer customAnalyzer = new CustomAnalyzer();    
        Directory directory = FSDirectory.open(Paths.get("directoryPath"));
        IndexWriter writer = new IndexWriter(directory, new IndexWriterConfig(customAnalyzer));
        Document doc1 = new Document();
        doc1.add(new TextField("text", "WAS_sample_tc", Field.Store.YES));
        writer.addDocument(doc1);
        writer.close();

        QueryBuilder queryBuilder = new QueryBuilder(customAnalyzer);
        Query query = queryBuilder.createPhraseQuery("text", "sample", 15);

        IndexSearcher searcher = new IndexSearcher(DirectoryReader.open(directory));

        TopDocs topDocs = searcher.search(query, 10);
        for (ScoreDoc scoreDoc : topDocs.scoreDocs) {
            Document doc = searcher.doc(scoreDoc.doc);
            System.out.println(doc.toString());
        }

答案 1 :(得分:0)

仅将.mobile-only类移至您的媒体查询上方,即级联样式表,这意味着媒体查询将放置在文件的末尾,或者您可以将.mobile - 仅限于仅影响桌面分辨率的媒体查询内部。顺便说一句,避免在你的CSS中使用!important语句。

.mobile-only{
    display: none;
}

@media only screen and (max-width: 991px) {
    .mobile-only {
        display: block;

    }
}

其他方法将是:

@media only screen and (max-width: 991px) {
    .mobile-only {
        display:block;

    }

}
@media only screen and (min-width: 991px) {
     .mobile-only{
         display: none;
    }
}

答案 2 :(得分:0)

这应该有用。

.mobile-only {
    display: block;
}

@media screen and (min-width: 768px){
    .mobile-only {
        display: none;
    }
}