1

当我从智能手机或平板电脑查看时，如何进行响应式设计。它应该正确对齐并在任何设备中显示准确的输出。这是我尝试在弹出窗口中实现的代码。我不确定如何根据 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>

这是小提琴

4

3 回答 3

4

一些带有媒体查询的响应式网站

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)  {}

演示

这里我刚刚设置了下面的媒体查询，那么你必须像这样写其他人

@media screen and (min-width: 240px) and (max-width: 480px) {}

于 2013-07-08T10:44:19.197 回答
0

使用 CSS 媒体查询。

这是可以帮助您了解有关它的所有内容的链接。

于 2013-07-08T10:40:03.233 回答
0

你可以试试 twitter 引导程序。

http://twitter.github.io/bootstrap/

于 2013-07-08T10:40:39.430 回答