如何爲每個設備大小編寫媒體查詢

我想使用媒體查詢開發響應式網頁。我也寫過移動媒體查詢，桌面&桌面。如何爲每個設備大小編寫媒體查詢

但是我無法理解，如果我正在爲設備最大寬度：320px編寫一組css代碼，那麼我必須再次爲另一個設備編寫相同的代碼，即640px的差分大小。

我很困惑，這是否是寫媒體查詢，我又寫了同一組的CSS代碼爲每個&每個設備尺寸再次&的正確途徑。

請幫我繼續furthur，因爲我是新的媒體查詢。而且我很困惑是否要進行自適應佈局或響應式佈局？

這真是太好了&我很感謝大家給出的有用答案。我已經給他公司的任務，他們告訴我，我不能使用任何框架設計響應式網頁，我只需要使用媒體查詢。

來源

2015-06-26 dollar

這篇文章可能會幫助您'https://css-tricks.com/snippets/css/media-queries-for-standard-devices/' –

媒體查詢的想法是，屏幕尺寸滿足語句的設備將使用css定義。設備可能在多個媒體查詢中使用css定義 –

媒體查詢和一般級聯樣式表的想法是逐步提高你的出發點。

這意味着：開始針對移動設備的設計。完成後，爲您的下一個更大的目標視口大小添加媒體查詢。

在此查詢中，覆蓋此視口需要不同的所有樣式。

等等......

只要你不想做的就是一個又再次寫入所有樣式。

查看一些流行的框架以獲取靈感，如twitter引導，html樣板或基礎框架。

來源

2015-06-26 06:21:59

這可能會清除你所有的疑惑。這個框架使你的工作變得更容易。 http://getbootstrap.com/

希望它有幫助。

來源

2015-06-26 06:31:56

隨着媒體查詢你告訴你的代碼-Bro如果寬度，如果比這個「尺寸在這裏」（320px，240em任何....）然後使用這段代碼。

否則，如果「未來在這裏大尺寸」，然後使用這個其他的代碼，並與下一個@media同一查詢

還有就是用它的兩種方式。編碼思維在移動第一（ULTRA MEGA推薦）或沒有:)

這意味着，你創建代碼的小瀏覽器，然後開始添加phablet，平板電腦，然後桌面和寬屏幕mediaqueries。

這非常有用，因爲可以幫助您在網頁中添加真正重要的內容並避免無用的信息。因爲你開始設計規模小，要壓縮所有的有用信息，並把裏面的:)

Learn more about mobile first technique

@media (min-width: 320px) { 
nav li { 
    display: inline-block; 
    } 
}

來源

2015-06-26 07:19:26

如果設計是一樣的，可以說對於臺式機到大型寬屏顯示器，我們可以做類似

@media screen and (min-device-width: 800px) and (max-device-width: 2048px) { 
    /* STYLES HERE */ 
}

假設你想爲每個桌面屏幕設計相同的設計。這將幫助您減少代碼，而不是重寫代碼。

來源

2015-06-26 15:53:06 Nofel

下面的例子你可以理解比理解媒體查詢的文章。

1) if you say - min-device-width:320PX; this is last breakpoint of your design, below your design doesn't work. 
2) if you say - max-width:420px; - this pice of code work until the 420px only after that the code which you mentioned in the breakpoint that doesn't work in remain widths. 

basic break point: 320px -mobile size 
        480px -mobile size, 640px -mobile size, 
        768px -heigh-end phones, 
        1024px - pad. 
        as remain widths may be seems to work in desktop width. 


@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px) 
    and (-webkit-min-device-pixel-ratio: 2) {

}

希望你得到一個想法，如果你讀清楚。

來源

2015-06-27 01:51:22

如何爲每個設備大小編寫媒體查詢

回答

相關問題