如何讓網站適應手機和iPad屏幕的尺寸？

我正在一個新的網站上工作，並把設置的寬度放到我的css文件中。我有一個要求，使網站的適應性和可調整大小，以適應手機和各種平板設備的小屏幕。如何讓網站適應手機和iPad屏幕的尺寸？

什麼在我的CSS樣式必須設置，以便該網站最適應其他屏幕尺寸？

2011-10-03 Genadinik

查找到響應式設計正如在回答中得到文件檔案化管理。關於這個問題的一個很好的入門知識是http://www.abookapart.com/products/responsive-web-design –

您將需要使用媒體查詢。這是響應式設計背後的全部基礎。

@media only screen and (max-device-width: 480px) { 
    /* write smartphone styles here */ 
} 

@media only screen and (max-device-width: 768px) { 
    /* tablets in portrait mode */ 
} 

@media only screen and (max-device-width: 1024px) { 
    /* tablets in landscape mode and smaller/older monitors */ 
}

到這裏看看： http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

來源

2011-10-03 19:34:46 swatkins

阿好，所以網站本身仍然可以設置爲一些靜態寬度，對不對？ – Genadinik

這取決於你的方法。通過這種方式，是的，您可以爲容器設置一個靜態寬度，然後在媒體查詢中覆蓋該寬度（確保媒體查詢最後列出 - 並且順序相反）。否則，您可以選擇「移動優先」路線（http://www.abookapart.com/products/mobile-first），首先定義較小的屏幕，然後再適應較大的屏幕。訣竅是知道什麼和什麼時候重寫，以獲得你想要的佈局。 jist是你可以改變你的網站以適應任何屏幕（只要瀏覽器支持媒體查詢）。 – swatkins

如何讓網站適應手機和iPad屏幕的尺寸？

回答

相關問題