欢迎光临
我们一直在努力

如何写一个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在你自己的日历上,你的用户会喜欢上。

赞(0) 打赏
未经允许不得转载:新起点博客 » 如何写一个HTML响应式日历

评论 抢沙发

评论前必须登录!