不同的CSS工作表，取決於屏幕大小，使用javascript

Question

我已經創建了2個不同版本的網站，一個用於筆記本電腦屏幕尺寸，另一個用於手機屏幕尺寸（平板電腦屏幕尺寸，正在使用中）。 因此，我想知道您是否可以告訴我我應該如何使用javascript（因為我感覺可以通過javascript完成），以便將應該用於筆記本電腦和如果用戶通過手機打開我的網站，則打開的文件將是手機尺寸屏幕上的文件。 希望你能回答我的問題。

提前非常感謝您！

PS：我讀了一些有關@media的內容，但仍在設法弄清楚。 PS2：如果您需要我發布任何代碼，請告訴我您可能需要的部分，我將很樂意發布。

Answer 1

在CSS文件中使用媒體查詢 ：

@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}

@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

示例和更多， 在這里

Answer 2

當涉及到響應時，請盡量避免使用JavaScript，可以使用CSS媒體查詢來做到這一點，您可以在此處了解更多信息： https : //www.w3schools.com/css/css3_mediaqueries_ex.asp或可以去對於框架方法，例如引導程序。

Answer 3

您可以使用媒體查詢來導入不同的CSS文件，具體取決於屏幕大小。 這將在沒有javascript的情況下工作，並且在我看來將是首選方法。

您的網站的標頭中的標記中可能包含以下代碼：

/* Everything 1000px and lower */ @import url("./mobile.css") only screen and (max-width: 1000px);

如果滿足媒體查詢，則將加載另一個樣式表。

您可以在此處閱讀有關媒體查詢的更多信息： https : //developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Answer 4

我認為，如果您使用引導程序，則可以輕松快速地管理您的需求。 請參考以下鏈接以了解想法-https: //getbootstrap.com/docs/3.3/css/

Answer 5

您可以使用媒體查詢來處理網頁上的CSS

//對於Ipad縱向和橫向

@media screen and (min-width: 768px) and (max-width: 1024px) {

}

//對於iPhone和較小的設備

@media screen and (max-width: 767px) {

}

還處理JavaScript，您需要在jQuery中使用設備寬度

if ($(window).width() < 767) {
   alert('Less than 767');
}
else {
   alert('More than 767');
}