我如何制作使用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