如何僅在平板電腦上顯示html內容而不在電話或桌面上顯示？

Question

我在html中有一個div元素，其中包含一個視頻教程，我只想在平板電腦上而不是在手機或臺式機上查看時才顯示。我如何實現這一目標？

Answer 1

您可以使用CSS媒體查詢來解決此問題。平板電腦的標準尺寸範圍是768px到992px。因此，您可以編寫兩個媒體查詢：一個用於平板電腦尺寸（手機），另一個用於平板電腦尺寸（桌面）。然後將可見性設置爲隱藏並顯示爲無。任何你想寫的平板大小的CSS你可以包括在你的正常標準的CSS。

@media screen and (max-width: 768px) { 
    .divclass { 
    visibility: hidden; 
    display: none; 
    /* your any other css styles */ 
    } 
} 

@media screen and (min-width: 992px) { 
    .divclass { 
    visibility: hidden; 
    display: none; 
    /* your any other css styles */ 
    } 
} 

Answer 2

利用屏幕寬度的媒體查詢：

@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ } 
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ } 
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ } 
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ } 
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ } 
@media (min-width:1281px) { /* hi-res laptops and desktops */ } 

這裏與特定的屏幕寬度可以設置元素的CSS display:block;否則display: none;

因此，對於你的代碼應該是

@media (min-width:320px) { display: none; } 
@media (min-width:801px) { display: block; } 
@media (min-width:1025px) { display: none; } 

Answer 3

讓我們假設你的div有一個名爲'container'的類。

@media (min-width: 768px) and (max-width: 1024px){ 
    .container{ 
    display: block; 
    } 
} 

@media (max-width: 767px){ 
    .container{ 
    display: none; 
    } 
} 

@media (min-width: 1025px){ 
    .container{ 
    display: none; 
    } 
} 

Answer 4

不用擔心。使用我放在一起的以下自定義類！請注意，對於媒體查詢（這些類使用），您將失去一些瀏覽器支持與舊版本的Internet Explorer ...所以修復與Respond.js！

在你的樣式表，添加以下內容：

//medium+ screen sizes 
@media (min-width:992px) { 
    .desktop-only { 
     display:block !important; 
    } 
} 

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

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

這給你兩個類 - 僅移動和桌面只。

顧名思義，如果您爲「僅限移動」類指定某些內容，則僅當屏幕尺寸很小（991px或更低）（智能手機，某些平板電腦）時纔會顯示，而「僅限桌面「只會顯示尺寸992像素或更高。

這些值很容易改變，整個概念可以修改沒有問題。你甚至可以添加一個「xl-desktop-only」類。爲了讓您開始...

//large resolutions only 
@media (min-width: 1200px) { 
... 
} 

媒體查詢對響應式設計非常有用。只要確保不要過度使用它，並添加太多的斷點。如果你試圖說明一切，你會讓自己頭痛。