如何僅將樣式應用於移動設備？

我正在創建新的網站。我的目的是爲桌面和移動設備創建一個頁面，並根據設備（手機或臺式機）設置樣式。我知道我可以用純JavaScript實現一切，但我也想使用CSS和媒體查詢。我的問題是：如何才能爲使用CSS媒體查詢的移動設備設置樣式？我試圖使用：如何僅將樣式應用於移動設備？

@media only screen{ 
    style... 
}

但它適用於移動和dekstop瀏覽器。

來源

2015-06-01 Shagohad

有一個「移動設備」和「桌面」之間沒有嚴格的區分。有塢站和外接顯示器的平板電腦可以同時使用，也可以同時使用兩者。相反，您應該確定設備的特徵，例如您想要針對特定格式設置的屏幕大小，然後使用['@ media'指令]（https://developer.mozilla.org/en-US/docs/Web/指南/ CSS/Media_queries）來定位這些特定的屏幕尺寸。 – jfriend00

沒有確切的方法只針對移動設備，但正如其他人所說，你可以依靠屏幕寬度。有一點需要記住，媒體類型「屏幕」專用於彩色計算機屏幕，「手持」專用於手持設備。雖然這不會單獨用於定位移動設備;你仍然需要包含規則。 [有關媒體類型的更多信息]（http://www.w3.org/TR/CSS21/media.html）。 – chRyNaN

您是否嘗試過根據屏幕大小而不是設備設置您的樣式？

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

來源

2015-06-01 17:23:44

是的，我正在嘗試。 – Shagohad

你不能簡單地針對移動，但必須給破發點，以便爲它工作。你將不得不使用最小寬度或最大寬度爲工作

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
/* Styles */ 
} 

/* Smartphones (landscape) ----------- */ 
@media only screen and (min-width : 321px) { 
/* Styles */ 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen and (max-width : 320px) { 
/* Styles */ 
}

舉例：這將隱藏帶班側邊欄DIV，並設置容器寬度爲100％，在較小的屏幕

@media only screen and (max-width : 321px) { 
     .sidebar { 
       display:none; 
     } 

     .container{ 
      width:100%; 
      } 

    }

來源

2015-06-01 17:23:46 Nakib

我知道，我也在嘗試，但這仍然適用於桌面和手機。 – Shagohad

所以你想在桌面屏幕上顯示 – Nakib

@Shagohad檢查我的編輯 – Nakib

如果樣式，甚至內容完全不同，從移動到桌面，使用像Bootstrap這樣的框架使得這非常容易。您可以使用自己的媒體查詢創建hidden-xs和visible-xs類，並將這些類應用於不同的div。不是DRYest的做法，而是完成工作。

@media only screen 
 
    and (min-device-width: 375px) 
 
    and (max-device-width: 667px) 
 
    and (-webkit-min-device-pixel-ratio: 2) 
 
    and (orientation: portrait) { 
 
    
 
    .hidden-xs { 
 
     display: none; 
 
    } 
 
    
 
    .visible-xs { 
 
     display: block; 
 
    } 
 
    
 
}

來源

2015-06-01 17:35:17

如何僅將樣式應用於移動設備？

回答

相關問題