如何設置我的網站以適應越來越小的屏幕尺寸？

我想知道是否有人可以幫助解決問題，我試圖讓我的網站適合多種屏幕尺寸？我一直在做一些研究和嘗試不同的方法（如「adjust-your-website-to-fit-all-resolutions」和「html-css-to-fit-all-screen-resolution」），並且一直嘗試使用不同的CSS代碼和Javascript代碼，但沒有成功。我甚至在我的主css文件中嘗試了不同的響應網站代碼，如<meta name="viewport" content="width=device-width">和@media screen and (min-width: 700px)，它們都不起作用。我只是不知道爲什麼它不起作用。如何設置我的網站以適應越來越小的屏幕尺寸？

我想知道的另一件事是，它可能是我現有的HTML和CSS代碼。你看到我的不同圖像，標題，內容等，我一直在使用position:absolute;，我想知道是否影響我適合所有屏幕尺寸。另外我想知道這可能會導致我的問題，就是我在當時基於計算機屏幕設計我的網站的方式。當我第一次設計網站時，我使用的電腦是1366 x 768（分辨率屏幕尺寸），當我第一次注意到我的網站存在問題時，我使用的電腦爲1600 x 900（分辨率屏幕尺寸）。想知道如果position:absolute;可能會傷害我的網站能夠適應不同的屏幕尺寸。

任何人都可以建議或推薦任何使用CSS，HTML和/或Javascript的方式來使我的網站適應更大或不同的尺寸？

預先感謝您！

P.S. - 這裏是一些從我的網站的代碼示例：

代碼@media屏幕（最小寬度：1600像素）//電腦尺寸從我的CSS文件1600 X900：

#wel { 
    position:absolute; 
    top: 108px; 
    left: 278px; 
} 
@media screen and (min-width: 700px) { 
    #wel { 
     position:absolute; 
     top: 108px; 
     left: 250px; 
    } 
} 
@media screen and (min-width: 1600px) { 
    #wel { 
     position:absolute; 
     top: 108px; 
     left: 400px; 
    } 
}

代碼，我把我的HTML使響應代碼工作：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

任何人有任何建議嗎？

來源

2017-04-17 Mike

我強烈建議您使用自舉等響應式框架。它肯定會幫助您生成漂亮的響應式網頁。如果您使用引導程序，您不需要擔心媒體查詢 – lhavCoder

您可以複製您迄今在jsfiddle中的內容嗎？ –

由於您已經爲同一個div id（#wel）定義了兩個不同的最小寬度媒體查詢，因此它無法正常工作，請根據您的要求嘗試更新&。

#wel { 
    position:absolute; 
    top: 108px; 
    left: 278px; 
} 
@media screen and (min-width: 700px) { 
    #wel { 
     position:absolute; 
     top: 108px; 
     left: 250px; 
    } 
} 
@media screen and (min-width:701px) and (max-width: 1600px) { 
    #wel { 
     position:absolute; 
     top: 108px; 
     left: 400px; 
    } 
}

在這裏的例子中，直到寬度700像素它將調用被定義爲第一媒體查詢（最小寬度：700像素）和from701-1600它將調用被定義爲從701-媒體查詢1600。

來源

2017-04-18 11:05:38

是的，那工作！我使用最大化，並擺脫「和」，然後它的工作。謝謝你指出我的代碼中有很多「min」。 – Mike

我不知道你的佈局是怎麼樣的，我只是說，的確，你可以使用@media screen和meta viewport，並嘗試使用相對大小和位置。

來源

2017-04-17 21:00:41 JulianSoto

謝謝JulianSoto的回答。您可以幫助驗證@media屏幕和元視口的工作原理。 – Mike

如何設置我的網站以適應越來越小的屏幕尺寸？

回答

相關問題