如何写一个HTML响应式日历

设置嵌入内容具有响应式的CSS样式本质上是相同的，但不同的内容具有不同的纵横比例，这意味着，你要设置相应的padding-bottom值。

设置嵌入内容具有响应式的CSS样式本质上是相同的，但不同的内容具有不同的纵横比例，这意味着，你要设置相应的padding-bottom值。

下面是一个嵌入Google日历的网站的屏幕的截图。正如你所看到的，在小屏幕上，日历打破了整个布局。在这种情况之下，日历在网站上显示正确的宽度，但日历超出屏幕的宽度。

Web中内嵌内容实现响应式效果

嵌入日历的结构如下：

<iframe src="" style=" border-width:0 " width="800" height="600" frameborder="0" scrolling="no"></iframe>

要制作响应式日历，需要给iframe外添加一个命名为.calendar-container的div容器：

<div>

<iframe src="" style=" border-width:0 " width="800" height="600" frameborder="0" scrolling="no">

</iframe>

</div>

接下来的步骤是给这个div写css样式。

写在日历上的CSS和视频的样式基本一致，但有两个例外：宽高的比例有所不同，而且不需要设置padding-top的值。

将下面的样式添加到样式表中：

.calendar-container {
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
}

在这个例子中，iframe的宽度为800px,高度为600px，他们的宽高比例为4:3。所以设置padding-bottom的值为75%。

这样做之后，我们需要给容器中的iframe设置样式：

.calendar-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}

这跟应用在视频上的样式是相同的。

现在日历可以根据浏览器窗口调整大小，下图是Android手机上Opera浏览器中的日历效果：

Web中内嵌内容实现响应式效果

只要你记得使用适当的元素来包裹嵌入进来的日历和视频，那么这个CSS将适应于任何嵌套到你的网站中的视频与日历。

有个最大的问题就是，在我们设置完日历后确实可以在整个页面是显示，但是它几乎是无法使用，因为点击目标太小，甚至重要信息也看不到。如果你想完全显示日历，你也可以，你可以通过一些简单的CSS设置来实现(例如设置display:block或者table)，或者使用w3widgets Responsive calendar或者Calendario在你自己的日历上，你的用户会喜欢上。