如何写一个HTML响应式日历

原创 新起点博客  2020-11-23 18:14 
【上云必备】上云仅?102/年
设置嵌入内容具有响应式的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在你自己的日历上,你的用户会喜欢上。

本文地址:https://www.henenseo.com/archives/3989
关注我们:请关注一下我们的微信公众号:扫描二维码新起点博客的公众号,公众号:xinqidian129
版权声明:本文为原创文章,版权归 新起点博客 所有,欢迎分享本文,转载请保留出处!
宝塔服务器面板,一键全能部署及管理,送你3188元礼包,点我领取
【腾讯云】海外1核2G服务器低至2折,半价续费券限量免费领取!

发表评论


表情