1.如果要想把图片文字整个整体变成响应式的，图片就必须使用img标签引入的方式外边用div包裹，而背景图片是做不了响应式的。
2.首先引入meta标签适应各种屏幕分辨率
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
3.在使用bootstrap框架首先引入jq，在引入bootstrap.js
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
4.在使用时候首先总体定义每个的样式，然后分别定义每种形式屏幕中的样式（使用媒体查询定义）
5.当设置的横向内容的宽度大于屏幕的宽度而会出现滚动条，这时我们要给父盒子加overflow:hidden或者是不是padding之类的影响给符合死设置box-sizing:border-box.
6.当设置显示隐藏及按钮切换时：
尽可能的定位时的left，top值也设置为百分比的形式
$(function (){
var isOpenMap=true;
var width=$(".anniu").width();
$(".sign").width(width);
$("#lamp").click(function (){
if(isOpenMap){
$(this).attr("src","images/打开地图.png")
$(".anniu").css("opacity","0");
$(".sign").attr("style","60%");
$(".sign").css({"position":"absolute","left":"80px","top":"180px"});
$(".sign").css("display","block");
isOpenMap=false;
}else {
$(this).attr("src","images/收起地图.png");
$(".anniu").css("opacity","1");
$(".sign").css("display","none");
isOpenMap=true;
}
});
$("#onceOpen").on('click',function () {
alert(111);
localStorage.setItem('isOpen','true');
});
$("#onceClose").on('click',function () {
localStorage.setItem('isOpen','false');
});
$("#onceQingOpen").on('click',function () {
localStorage.setItem('isOpen','true');
});
$("#onceQingClose").on('click',function () {
localStorage.setItem('isOpen','false');
});
});
7.当首页想控制别的所有页面的内容时：
window.localStorage.removeItem('isOpen');//移除浏览器缓存内容
var secondPageIsOpen = window.localStorage.getItem('isOpen')；//获取本地存储的状态
每个页面进行比较有相同的就会执行此按钮执行的逻辑
if(secondPageIsOpen == 'true'){
var btn1Arr = $(".btn1");
var videoArr=$(".video");
var btn3Arr=$(".btn3");
$.each(btn1Arr,function (index,ele) {
$(ele).attr("src",arrClick2[0]);
});
var imgArr = $(".imgPlay");
$.each(imgArr,function (index,elem) {
$(elem).attr("src",arrClick1[0]);
});
$.each(videoArr,function (index,ele) {
$(ele).attr("src",arrClick1[0]);
});
$.each(btn3Arr,function (index,ele) {
$(ele).attr("src",arrClick3[0]);
});
}
8.不让设备出现滚动条，只显示屏幕的大小的内容：
var $height=$(window).height();
$("body").css("min-height",$height,"height",$height);
$(".container-fluid").css("height",$height);
// 自适应页面大小
$(window).resize(function (){
var $height=$(window).height();
$("body").css("min-height",$height,"height",$height);
$(".container-fluid").css("height",$height);
});
9.点击按钮进行高亮，兄弟元素不点击没变化，点击了会高亮
首先定义按钮要高亮的数组：
var arrClick= ["images/开音量（点击）.png", "images/静音（点击）.png", "images/音量加（点击）.png", "images/音量减（点击）.png"];
var arrClicked = ["images/开音量（未点击）.png", "images/静音（未点击）.png", "images/音量加（未点击）.png", "images/音量减（未点击）.png"];
点击的操作：
$("#video_btn img").click(function() {
var clicked = $("#video_btn img[clicked]").index();
$("#video_btn img[clicked]").removeAttr("clicked").attr("src",arrClicked[clicked]);
$(this).attr("clicked","clicked");
var index = $(this).index();
$(this).attr("src",arrClick[index]);
});
10.一键控制的状态：
// 强电页面的一键开启一键关闭
$(".qiangdianOpen>img").click(function (){
$(".container-fluid").find(".btn1").attr("src",arrClick2[0]);
$(".container-fluid").find(".btn1").siblings(".btn2").attr("src",arrClicked2[1]);
});
$(".qiangdianFalse>img").click(function (){
$(".container-fluid").find(".btn2").attr("src",arrClick2[1]);
$(".container-fluid").find(".btn2").siblings(".btn1").attr("src",arrClicked2[0]);
});
11.一键强电后别的页面也不会受到影响：
$("#switch1 img").click(function() {
if(secondPageIsOpen == 'true'){
if (this.className == 'btn2'){
$(this.parentNode).children(":first").attr("src",arrClicked2[0]);
} else if(this.className == 'btn1'){
$(this.parentNode).children(":last").attr("src",arrClicked2[1]);
}
}else {
var clicked = $("#switch1 img[clicked]").index();
$("#switch1 img[clicked]").removeAttr("clicked").attr("src",arrClicked2[clicked]);
$(this).attr("clicked","clicked");
}
var index = $(this).index();
$(this).attr("src",arrClick2[index]);
});
12.大的父盒子的设置：
body{
100%;
min-height: 100%;
height:auto;
position: relative;
}
.container-fluid{
background-size: 100% 100%;
height:100%;
margin: 0;
padding: 0;
position: relative;
}
.first{
background-image: url(../images/背景.png);
background-repeat: no-repeat;
100%;
background-size: 100% 100%;
min-height: 100%;
}