<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wrap1{width: 320px;height:377px;}
.wrap2{width: 1370px;height: 553px;}
iframe{width: 100%;height: 100%;border: none;height: 100%;}
</style>
</head>
<body>
<h1>测试</h1>
<div class="wrap1"><iframe src="currency.html"></iframe></div>
<div class="wrap2"><iframe src="map.html"></iframe></div>
</body>
</html>
//currentcy.html 页面样式
@media screen and (max-width:767px) {
.c-width{
width: auto;
}
.custom-til .custom-til-text{
width: 268px;
}
.custom-til-fr{
display: block;
}
}
@media screen and (min-width:992px) {
.currency-container{
max-height: 377px !important;
}
}
我们有一个上线的响应式网站,想给首页留几个位置显示其他的数据模块的页面。通过iframe的方式引入。
我做了几个对应的页面也是响应式的,通过css3的@media来控制pc和移动端的显示样式。单独测试没问题,但是放到了iframe里就有问题了,iframe中的currentcy页面并不是按照浏览器的宽度来的,而是根据iframe的实际大小来定的。这个有什么方法解决吗?
原网站有jquery了,我在currentcy页面也要在引入jquery,不然没法使用,为什么iframe里的网页没能用主页面的jquery文件?
在你的主页面里再加响应样式,让iframe标签宽度响应
跨域问题,不同 jquery 只处理当前页面的内容