Question

我想创建一个基于浏览器的电子书阅读器，使用.epub文件中的.xml文件作为内容。

现在的问题是，一本书有两页要查看，我遇到了一些问题，需要根据不同的屏幕尺寸重建它。特别是字体。根据屏幕尺寸的不同，动态地在最大化/全屏/调整大小的情况下，字体应该相应地改变以适合恰好两页。

下面是我尝试的一些代码。

＆＃13;

#left{
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;  // so a variable width.
  height: 100%;
}
#right{
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
}

＆＃13;

<body>
  <div id="left">Half page of text</div>
  <div id="right">Other half page of text</div>
</body>

＆＃13;

Answer 1

关于2 display:inline列50％的事情是，对于某些浏览器（ahem：IE），50％并不总是50％。因此，您会发现随机情况下，列无法正常流动，并且您的布局会被抬高。请记住，如果您构建自制程序解决方案，您还必须适应边距和填充。

我个人的偏好是使用网格系统来解决所有这些错误。其中有很多 - Bootstrap有一个好的，960 grids很好。

以下是960.gs的示例：

<div class="container_12">
   <div class="grid_6 left">
     Left Column
   </div> 
   <div class="grid_6 right">
     Right Column
   </div>   
</div>

这就是......非常简单。简而言之，您正在使用.container-12，它就像一张包含12列的表格中的一行。然后你输入两个.grid-6的div，或者每个.container-12的一半。如果您想要四分之一，四分之三的布局，那么您需要.grid-3和.grid-9网格会自动适应尺寸，因为浏览器会根据边距和填充的百分比调整大小。

Bootstrap更进一步，允许您根据大小更改布局。例如，在计算机屏幕上它可以是并排的，而在iPad或iPhone上它可以是一个在另一个之上。同样，你可以用原生CSS做到这一点，但它并不那么容易。

动态大小的div - 适合文本内部？

1 个答案: