这里是针对容器是1136*640的背景,关于rem的处理也是以1136*640为背景,并且横屏时页面不能上下滚动的情形 采用的swiper3,如下是背景图片
<!DOCTYPE html>
<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>
html, body {
margin: 0;
padding: 0;
outline: none;
list-style: none;
width: 100%;
height: 100%;
/*max-width: 6.4rem;*/
}
p, h3, ul, li {
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
}
a {
color: #333;
text-decoration: none;
}
img {
width: 100%;
/*height: 100%;*/
border: none;
}
input {
border: none;
margin: 0;
padding: 0;
font-size: 0.24rem;
color: #d4b079;
outline: none;
background: none;
}
body {
font-family: "微软雅黑";
font-size: 0.24rem;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
#content {
//若不是单屏h5 需要滚动
//min-width=6.4rem
position: relative;
}
.swiper-container {
width: 100%;
//height: 100%;
height:100vh;
}
#content .bg1 {
background: url(/custom/img/act/act190228/demo/bg4.jpg) no-repeat center/cover;
height: 6.4rem;
position: relative;
}
.swiper-container-vertical .swiper-pagination-bullet {
width: 1rem;
height: 0.3rem;
border-radius: 0px;
text-align: center;
line-height: 0.3rem;
color: #FFFFFF;
z-index: 999;
font-size: 0.22rem;
background: none;
opacity: 1;
}
.a1 {
position: absolute;
top: 1.45rem;
left: 0.8rem;
}
.a2 {
position: absolute;
top: 2.05rem;
left: 0.8rem;
}
.a3 {
position: absolute;
top: 2.61rem;
left: 0.92rem;
}
.a4 {
position: absolute;
top: 3.16rem;
left: 1rem;
}
.a5 {
position: absolute;
top: 3.74rem;
left: 0.95rem;
}
.a6 {
position: absolute;
top: 4.3rem;
left: 0.9rem;
}
.a7 {
position: absolute;
top: 4.85rem;
left: 0.6rem;
}
.swiper-pagination-custom .active {
font-weight: bold;
}
#content .nav {
background: url(/custom/img/act/act190228/demo/sidebar.png) no-repeat center/cover;
width: 2.19rem;
height: 6.4rem;
left: 0 !important;
position: absolute;
top: 50%;
margin-top: -3.2rem;
}
#content .home {
position: relative;
margin: 0 1.67rem;
border: 0.01rem solid red;
}
</style>
</head>
<body>
<div id="content">
<div class="swiper-container" id="big-swiper">
<div class="swiper-wrapper">
<!--首页-->
<div class="swiper-slide">
<div class="home-page bg1">
<div class="home">
<div class="logo ani fadeInDown animated" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:2s;-webkit-animation-duration:2s;"></div>
<div class="slogan ani fadeInLeft animated" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.5s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:2s;-webkit-animation-duration:2s;animation-delay:0.5s;-webkit-animation-delay:0.5s;"></div>
<div class="off ani fadeInLeft animated" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.8s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:2s;-webkit-animation-duration:2s;animation-delay:0.8s;-webkit-animation-delay:0.8s;"></div>
<a class="btnwsq" href="https://tlbb.qq.com/ingame/all/index.shtml#/index"></a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="home-page bg1">
<div class="home">
<div class="logo ani fadeInDown animated" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:2s;-webkit-animation-duration:2s;"></div>
<div class="slogan ani fadeInLeft animated" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.5s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:2s;-webkit-animation-duration:2s;animation-delay:0.5s;-webkit-animation-delay:0.5s;"></div>
<div class="off ani fadeInLeft animated" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.8s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:2s;-webkit-animation-duration:2s;animation-delay:0.8s;-webkit-animation-delay:0.8s;"></div>
<a class="btnwsq" href="https://tlbb.qq.com/ingame/all/index.shtml#/index"></a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="home-page bg1">
<div class="home">
<div class="logo ani fadeInDown animated" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:2s;-webkit-animation-duration:2s;"></div>
<div class="slogan ani fadeInLeft animated" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.5s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:2s;-webkit-animation-duration:2s;animation-delay:0.5s;-webkit-animation-delay:0.5s;"></div>
<div class="off ani fadeInLeft animated" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.8s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:2s;-webkit-animation-duration:2s;animation-delay:0.8s;-webkit-animation-delay:0.8s;"></div>
<a class="btnwsq" href="https://tlbb.qq.com/ingame/all/index.shtml#/index"></a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="home-page bg1">
<div class="home">
<div class="logo ani fadeInDown animated" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:2s;-webkit-animation-duration:2s;"></div>
<div class="slogan ani fadeInLeft animated" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.5s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:2s;-webkit-animation-duration:2s;animation-delay:0.5s;-webkit-animation-delay:0.5s;"></div>
<div class="off ani fadeInLeft animated" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.8s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:2s;-webkit-animation-duration:2s;animation-delay:0.8s;-webkit-animation-delay:0.8s;"></div>
<a class="btnwsq" href="https://tlbb.qq.com/ingame/all/index.shtml#/index"></a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="home-page bg1">
<div class="home">
<div class="logo ani fadeInDown animated" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:2s;-webkit-animation-duration:2s;"></div>
<div class="slogan ani fadeInLeft animated" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.5s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:2s;-webkit-animation-duration:2s;animation-delay:0.5s;-webkit-animation-delay:0.5s;"></div>
<div class="off ani fadeInLeft animated" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.8s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:2s;-webkit-animation-duration:2s;animation-delay:0.8s;-webkit-animation-delay:0.8s;"></div>
<a class="btnwsq" href="https://tlbb.qq.com/ingame/all/index.shtml#/index"></a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="home-page bg1">
<div class="home">
<div class="logo ani fadeInDown animated" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:2s;-webkit-animation-duration:2s;"></div>
<div class="slogan ani fadeInLeft animated" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.5s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:2s;-webkit-animation-duration:2s;animation-delay:0.5s;-webkit-animation-delay:0.5s;"></div>
<div class="off ani fadeInLeft animated" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.8s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:2s;-webkit-animation-duration:2s;animation-delay:0.8s;-webkit-animation-delay:0.8s;"></div>
<a class="btnwsq" href="https://tlbb.qq.com/ingame/all/index.shtml#/index"></a>
</div>
</div>
</div>
</div>
<!--左侧导航-->
<div class="swiper-pagination nav"></div>
</div>
<script>
window.onload = function() {
var tabText = ['首页', '家园介绍', '家具展示', '家园互动', '空间优化', '侠侣PK', '战力榜单'];
var navStyle = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7'];
var mySwiper = new Swiper('#big-swiper', {
observer: true, //修改swiper自己或子元素时,自动初始化swiper
observeParents: true, //修改swiper的父元素时,自动初始化swiper
direction: 'vertical',
fadeEffect: true,
// 如果需要分页器
pagination: '.swiper-pagination',
paginationClickable: true,
paginationType : 'custom',
paginationCustomRender: function (swiper, current, total) {
// return '<span class="' + className + '">' + (index + 1) + '</span>';
var _html = '';
for (var i = 0; i <= total; i++) {
if (current == i) {
_html += '<span class="swiper-pagination-custom active '+navStyle[i]+'">'+ tabText[i] + '</span>';
}else{
_html += '<span class="swiper-pagination-custom '+navStyle[i]+'">'+ tabText[i] + '</span>';
}
}
return _html;//返回所有的页码html
return '<span class="' + className + ' ' + navStyle[index] + '">' + tabText[index] + '</span>'
}
})
}
//rem转换 此时背景是1136*640
(function(win, doc) {
if(!win.addEventListener) return;
var html = document.documentElement;
function setFont() {
var cliWidth = html.clientWidth;
var cliHeight = html.clientHeight;
if (cliWidth>cliHeight){
html.style.fontSize = 100 * (cliWidth / 1136) + 'px';
} else {
html.style.fontSize = 100 * (cliWidth / 640) + 'px';
}
}
win.addEventListener('resize', setFont, false)
doc.addEventListener('DOMContentLoaded', setFont, false)
})(window, document);
// 利用 CSS3 旋转 对根容器逆时针旋转 90 度
var detectOrient = function () {
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
$wrapper = document.getElementById("content"),
style = "";
if (width >= height) { // 横屏
style += "width:" + width + "px;"; // 注意旋转后的宽高切换
style += "height:" + height + "px;";
style += "-webkit-transform: rotate(0); transform: rotate(0);";
style += "-webkit-transform-origin: 0 0;";
style += "transform-origin: 0 0;";
console.log("横屏")
}
else { // 竖屏
style += "width:" + height + "px;";
style += "height:" + width + "px;";
style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
// 注意旋转中点的处理
style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
console.log("竖屏")
}
$wrapper.style.cssText = style;
}
window.onresize = detectOrient;
detectOrient();
</script>
</body>
</html>
效果图
正常横屏显示
image.png
竖屏显示横屏样式