我如何製作使用CSS的響應式設計？

當我從智能手機或平板電腦上查看時，如何使響應式設計成爲可能。它應該正確對齊並在任何設備中顯示確切的輸出。以下是我試圖在彈出窗口中實現的代碼。我不確定如何使其作爲基於CSS的響應。任何建議都會很棒。我如何製作使用CSS的響應式設計？

 <div id="ptechsolfb"> 
      <div id="fb-close"></div> 
      <div id="ptechsolfblike"> 
       <div id="fbclose"></div> 
       <div id="ptechsolinside"> 
      </div> 
      </div> 
     </div> 

     <style type="text/css"> 
      #ptechsolinside { 
       background-image:url(https://www.google.com/images/srpr/logo4w.png); 
background-repeat:no-repeat; 
       } 
      #ptechsolfblike {width:500px;height:500px; position:absolute;top:50%;left:50%;margin:-135px 0 0 -210px;border-width: medium medium 71px;} 
    #ptechsolinside {background-color:#FFF;} 
     #ptechsolinside { border-width: medium medium 71px; border-style: none; border-color: blue; -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none; margin-top: -4px; width: 500px; height: 500px; margin-left: 8px;} 
      </style>

這裏是Fiddle

來源

2013-07-08 Vignesh Pichamani

一些敏感場所mediaquery

http://mediaqueri.es/ 
http://css-tricks.com/css-media-queries/ 
http://webdesignerwall.com/tutorials/css3-media-queries 

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ 
@media screen and (min-width: 240px) and (max-width: 319px) {} 
@media screen and (min-width: 320px) and (max-width: 480px) {} 
@media screen and (min-width: 481px) and (max-width: 768px) {} 
@media screen and (min-width: 769px) and (max-width: 959px) {}

DEMO

在這裏，我剛纔設置以下媒體查詢，那麼你必須寫別人這樣

@媒體屏幕和（最小寬度：240px）和（最大寬度：480px）{}

來源

2013-07-08 10:44:19