使用CSS媒體查詢

最近，我問了一個有關決議，以及如何我可以修復它在我的ASP.NET Web應用程序的問題。使用CSS媒體查詢

有了一些答案，我得到了我發現媒體查詢是一個很好的地方去。

我已經建立了我的CSS文件類似如下：

@media only screen and (max-width: 640px) { 
} 

@media only screen and (min-width: 641px) and (max-width: 800px) { 
} 

@media only screen and (min-width: 801px) and (max-width: 1024px) { 
} 

@media only screen and (min-width: 1025px) { 
}

我在1600x800一直在開發，我想知道我怎麼知道我需要改變對象的大小。我是否必須在較小的瀏覽器中重新開發應用程序，還是有更簡單的方法。

HTML：

<link rel="stylesheet" type="text/css" href="Style/StyleSheet.css"/>

來源

2014-05-06 Ben Clarke

的做法是基本相同的，當你不使用媒體查詢寫CSS的。你仍然需要處理不同的窗口大小。

拖動窗口邊緣，以使瀏覽器更小
看看如何設計可容納
調整CSS
刷新頁面

來源

2014-05-06 08:37:38 Quentin

當我運行了一個程序，我拖動窗口我怎麼知道它指的是什麼尺寸？ –

在Firefox瀏覽器中，您可以選擇以不同窗口大小查看您的網頁。您可以使用該選項「響應式設計」。在chrome中，當你縮小窗口時，你可以將鼠標懸停在div上查看實際大小。 – AppleBud

我通常做一個打印屏幕並使用photoshop進行測量，您的瀏覽器的瀏覽器像素標尺插件也可以提供幫助 – valerio0999

你需要改變您的圖像和字體的大小，並根據您使用媒體查詢設置的不同屏幕尺寸更改其位置。要檢查不同的代碼，您可以調整窗口大小，拖動邊框並查看效果是否正常。

而且也跟隨其** @昆汀**寫這將有助於

來源

2014-05-06 08:43:46 adi

這是不完全遵循正確的方法步驟。你應該用一個流暢的CSS佈局網格來開始你的網站，谷歌它是一個適合你的選擇。這是流體網格的一個例子：http://onepcssgrid.mattimling.com/。

當您設置的一切，設計，舒展你的瀏覽器，在設計時就「休息」，加上媒體查詢斷點。在開發之前決定你的斷點並不是一個好主意。

一個很好的工具來測試您的設計可能是：http://bradfrostweb.com/demo/ish/?url=http%3A%2F%2Fwww.mediaqueri.es#random（請在左上框中輸入網址），但我通常喜歡手動拉伸我的瀏覽器。

來源

2014-05-06 08:50:01 valerio0999

這是我在我的網站已經做了，它是工作的罰款：

<head> 
<meta name="viewport" content="width=device-width"> 
<style> 
@media screen and (max-width:1900px) 
{ 
    #content{ 
     margin-left:251px; 
     margin-top: -197px; 
    } 
} 
@media screen and (min-width: 420px) and (max-width: 1000px) { 
    #sidebar { 
     margin-left: -30px; 

    } 
    #content{ 
     margin-left:221px; 
     margin-top: -197px; 
    } 

    #separator 
    { 
     height: 50px; 
    } 

} 
</style> 
</head>

我檢查通過調整自己的Chrome窗口，然後相應地應用寬度。希望它能幫助你。

來源

2014-05-06 09:11:29 AppleBud

如果你無法看到你的CSS被應用，請檢查沒有別的東西在覆蓋它。否則，你的代碼很好。 – AppleBud

CSS媒體查詢是解決與不同尺寸的瀏覽器和設備的工作問題的最佳選擇。您可以使用可用的不同工具來檢查您的應用程序，以顯示應用程序在不同設備和瀏覽器上的外觀。

您可以通過重新調整您的瀏覽器窗口中勾選或者您可以使用瀏覽器擴展來檢查你的工作

谷歌瀏覽器：
https://chrome.google.com/webstore/detail/responsive-web-design-tes/objclahbaimlfnbjdeobicmmlnbhamkg?hl=en
火狐：
https://developer.mozilla.org/en/docs/Tools/Responsive_Design_View
歌劇：
https://addons.opera.com/en/extensions/details/responsive-web-design-tester/?display=en
Safari：
http://www.midwinter-dg.com/downloads_safari-extension_responsive-resize.html

要了解更多關於CSS媒體查詢訪問：http://letsdopractice.com/css-media-queries/

來源

2015-05-21 19:14:31

使用CSS媒體查詢

回答

相關問題