标签: responsive-design

这可能听起来像一个愚蠢的问题.

如果我使用这个CSS片段进行常规显示(其中box-bg.png200px乘200px);

.box{
    background:url('images/box-bg.png') no-repeat top left;
    width:200px;
    height:200px
}

如果我使用这样的媒体查询来定位视网膜显示(使用@ 2x图像作为高分辨率版本);

@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 

    .box{background:url('images/box-bg@2x.png') no-repeat top left;}
}

我是否需要将.boxdiv 的大小加倍到400px乘以400px以匹配新的高分辨率背景图像？

我有这个代码:

<footer class="row">
  <nav class="col-sm-3">
    <ul class="list-unstyled">
      <li>Text 1</li>
      <li>Text 2</li>
      <li>Text 3</li>
    </ul>
  </nav>
  <nav class="col-sm-3">
    <ul class="list-unstyled">
      <li>Text 4</li>
      <li>Text 5</li>
      <li>Text 6</li>
    </ul>
  </nav>
  <nav class="col-sm-3">
    <ul class="list-unstyled">
      <li>Text 7</li>
      <li>Text 8</li>
      <li>Text 9</li>
    </ul>
  </nav>
  <nav class="col-sm-3">
    <ul class="list-unstyled">
      <li>Text 10</li>
      <li>Text 11</li>
      <li>Text 12</li>
    </ul>
  </nav>
</footer>

里面有一些文字的四个街区.它们的宽度相等,我已经设置col-sm-3了所有这些,我想要做的就是nav在超小设备上隐藏最后一个.我试图使用hidden-xs它nav并隐藏它,但同时我希望其他块扩展(将类更改col-sm-3为col-sm-4)col-sm-4 X 3 = 12.

有解决方案吗

从Bootstrap 3开始,不再有用于响应式和标准样式表的单独文件.那么如何轻松删除响应功能呢？

我试图创建一个如下图所示的形状,仅在一侧(例如,底侧)具有倾斜边缘,而其他边缘保持笔直.

我尝试使用border方法(代码如下),但我的形状的尺寸是动态的,因此我不能使用这种方法.

.shape {
    position: relative;
    height: 100px;
    width: 200px;
    background: tomato;
}
.shape:after {
    position: absolute;
    content: '';
    height: 0px;
    width: 0px;
    left: 0px;
    bottom: -100px;
    border-width: 50px 100px;
    border-style: solid;
    border-color: tomato tomato transparent transparent;
}

<div class="shape">
    Some content
</div>

我也尝试使用渐变作为背景(如下面的代码所示),但随着尺寸的变化,它会变得混乱.你可以通过悬停在下面代码片段中的形状来看到我的意思.

.gradient {
  display: inline-block;
  vertical-align: top;
  height: 200px;
  width: 100px;
  margin: 10px;
  color: beige;
  transition: all 1s;
  padding: 10px;
  background: linear-gradient(45deg, transparent 45%, tomato 45%) no-repeat;
}
.gradient:hover {
  width: 200px;
} …

我下载了Twitter Bootstrap示例并使用它创建了一个简单的rails项目.我在需要的地方复制了css,显示效果很好.我也复制了js,一切都在我的桌面上运行得很好:当我改变浏览器的大小时,它会重新整理页面.当使用一些不同大小的"响应式设计测试工具"时,效果很好.

我遇到的问题是我的iPhone:它在我的桌面上显示juste.

当我尝试Bootstrap Hero示例页面(这是我开始使用的)时,它在我的iPhone上运行良好.

怎么可能出错？我几乎没有碰到任何CSS,我只是在页脚上添加了一个填充.

仅供参考,我改变的CSS是我将我的应用程序链接到application.css以下内容:

/* Application stylesheet */

@import url(bootstrap.css);
@import url(bootstrap-responsive.css);

/* Body */
body {
    padding-top: 60px;
    padding-bottom: 40px;   
}   

/* Footer */
footer {
    padding: 20px 0;
}

在一些css类中使用less来为不同的分辨率包装css样式会很不错.

我想做点什么:

footer {
  width: 100%;
}

.tablet {
  footer {
    width: 768px;
  }
}

.desktop {
  footer {
    width: 940px;
  }
}

最后这样的结果应该是结果:

footer {
  width: 100%;
}

@media screen and (min-width: 768px) {
  footer {
    width: 768px;
  }
}

@media screen and (min-width: 992px) {
  footer {
    width: 940px;
  }
}

.tablet可能看起来像这样:

@media screen and (min-width: 768px) {
  .tablet {

  }
}

希望有人有个好主意!

我们如何准确地隔离媒体查询以避免重叠？

例如,如果我们考虑代码:

@media (max-width: 20em) {
    /* for narrow viewport */
}

@media (min-width: 20em) and (max-width: 45em) {
    /* slightly wider viewport */
}

@media (min-width: 45em) {
    /* everything else */
}

在所有支持的浏览器中,准确的20em和45em会发生什么？

我见过人们使用:像799px然后800px的东西,但屏幕宽度为799.5像素呢？(显然不是常规显示器,而是视网膜显示器？)

考虑到规格,我对这里的答案最感兴趣.

编辑: 当屏幕缩小到480px宽度以下时,我可能会问哪个选择器设置了侧边填充？我一直在浏览bootstrap-responsiveness.css一段时间来找到它,但似乎没有任何影响这一点.

原始 我基本上想要删除任何默认填充或边距设置,以便在较小的设备屏幕上响应.

我有一个background color重写上container-fluid选择器和用于更大的屏幕他们完全呈现100%横跨宽度,但它们的屏幕被减小到更小的尺寸,在默认情况下,自举似乎添加余量或填充上container-fluid或container.

<div class="container-fluid">
    <div class="row-fluid">
      test
    </div>
</div>

如果我使用自定义css覆盖Bootstrap的默认样式,我应该覆盖哪些媒体查询或选择器来删除较小屏幕上的填充？

使用CSS媒体查询,您可以使用max-device-width目标设备宽度(例如iPhone或Android设备)和/或max-width以页面宽度为目标.

如果您使用max-device-width,当您更改桌面上浏览器窗口的大小时,CSS将不会更改,因为您的桌面不会更改大小.

如果您使用max-width,当您更改桌面上浏览器窗口的大小时,您可能会看到面向移动的样式,例如触摸友好元素和菜单等等.

现在不推荐使用针对特定浏览器(和设备？),您应该对目标设置更加不可知.这也适用于媒体查询吗？

你为什么要瞄准另一个？推荐哪一个？

这是我在生产网站上使用的媒体查询示例:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (min-device-height: 480px) and (max-device-height: 640px) {  
    /* Change a menu to fit the screen better, etc... */
}

我倾向于使用max-device-width和max-width.

我正在围绕"响应式设计"概念开发一个网站,但facebook社交插件是静态宽度,并在重新调整大小时"打破"布局.

使用媒体查询,我已将插件设置为隐藏在低分辨率浏览器(移动设备等)上.但是,在桌面浏览器上,当浏览器窗口的大小较小,但不是很小以隐藏插件时,它们会突破布局.

有什么办法为Facebook社交插件设置一个流畅的宽度？