Question

我正在使用bootstrap在div中显示一些缩略图。缩略图实际上是画布，因为我需要在客户端创建更轻的缩略图。

它实际上并不是完美的设计（我更像是一个开发人员而不是设计师），但效果非常好。

但是我想知道以下内容：当我用移动设备查看应用程序时，在纵向模式下，然后我得到了col-xs-6类，屏幕看起来很好。但是当我旋转屏幕时，看起来我仍然得到了col-xs-6及其相关的像素大小 - 看起来非常难看 - 截图：

这是手机上的错误，还是手机浏览器上的错误（使用Galaxy S3） - 或者我的代码是错误的？不能旋转浏览器给出不同的分辨率吗？我应该忽略这个问题，因为可能没有优雅的解决方案吗？这是HTML：

<div id="upload-list">
   <!-- for each image -->
   <div class="col-xs-6 col-sm-3 col-md-3">
     <div class="thumbnail">
       <div class="caption">IMG_0004.JPG<i><br>6.14 MB</i></div>
       <div style="display: none;" class="abort_upload working">
         <span class="alert-warning glyphicon glyphicon-remove-circle"></span>
       </div>
       <!-- This is for upload progress display -->
       <div class="knob-outer">
          <div class="knob-progress">
            <div style="display:inline;width:64px;height:64px;">
              <canvas height="64" width="64"></canvas>
              <input style="width: 36px; height: 21px; position: absolute; vertical-align: middle; margin-top: 21px; margin-left: -50px; border: 0px none; background: none repeat scroll 0% 0% transparent; font: bold 12px Arial; text-align: center; color: rgb(7, 136, 165); padding: 0px;" readonly="readonly" value="0" data-width="64" data-height="64" data-fgcolor="#0788a5" data-readonly="1" data-bgcolor="#3e4043" type="text">
           </div>
          </div>
       </div>
       <!-- the actual canvas with the image, is being generated client-side after file selection -->
       <canvas class="canvas-thumbnail" height="518" width="691"></canvas>
     </div>
  </div>
</div>

相关CSS：

@media (min-width: $screen-xs-min) {
  .thumbnail canvas.canvas-thumbnail { height:72px !important; width: 96px !important}
  .knob-progress {width: 64px; height: 64px}
}
$screen-xs:                  420px !default;
$screen-xs-min:              $screen-xs !default;

编辑：其他屏幕尺寸css

$screen-sm:                  768px !default;
$screen-sm-min:              $screen-sm !default;

$screen-md:                  992px !default;
$screen-md-min:              $screen-md !default;

@media (min-width: $screen-sm-min) {
  .thumbnail canvas.canvas-thumbnail { height:64px !important; width: 86px !important}
}

@media (min-width: $screen-md-min) {
  .thumbnail canvas.canvas-thumbnail { height:95px !important; width: 126px !important}
}

Answer 1

还有另外两种屏幕分辨率。你必须处理所有。例如你有分辨率：800x600，但如果你旋转手机，你现在有600x800。您必须在bootstrap中看到有关宽度和句柄的阈值。

屏幕旋转和自适应响应

1 个答案: