响应html平板电脑分辨率css搞砸了桌面分辨率css

时间：2015-09-30 12:16:50

标签： html css resolutions

我正在制作一个响应式演示网站，我遇到了中等分辨率的问题，因为当我把css放在我的样式表中时，高分辨率不再有效。任何人都知道为什么这是/如何解决它？我的代码如下：

@charset "utf-8";
/* CSS Document */
/* low res or phone */
@media only screen and (max-width: 480px) {
	
.LoginStuff li
{
	display: inline;
	float: right!important;
	position:relative;
	top: -50px;
	right: 10px;
}

.reg1 a
{
	border-radius: 0px 3px 3px 0px;
	border-left-width: 1px;
	border-left-style:solid;
	border-left-color:#ce542c;
	padding: 5px 5px;
	font-size:15px;
	font-family:Arial;
	font-weight:bold;
	color: #fff;
	background-color:#f7cf1c;
	text-decoration:none;
}

.log1 a
{
	border-radius: 3px 0px 0px 3px;
	border-right-width: 0.5px;
	border-right-style:solid;
	border-right-color:#ce542c;
	padding: 5px 12px;
	font-size:15px;
	font-family:Arial;
	font-weight:bold;
	color: #fff;
	background-color:#f7cf1c;
	text-decoration:none;
}

.nav
{
	visibility: hidden;
}


/*start menu*/

.clearfix a
{
	background-color:#f7cf1c;
	margin-right:auto;
	margin-left:auto;
	width:277px;
	height:30px;
	position:relative;
	left: -34px;
}

.AMenu
{
	margin-right:auto;
	margin-left:auto;
	padding-left: 100px;
	position:relative;
	left:35px;
}

.menu-wrap
{
	width:100%;
	background-color:#f7cf1c;
	align-content:center;
	margin-right:auto;
	margin-left:auto;
}

.menu
{
	width:100%;
	height:40px;
	background-color:#f7cf1c;
	position:relative;
	margin-left:auto;
	margin-right:auto;
}
	
.menu li {
    margin:0px;
	text-decoration:none;
    list-style:none;
    font-family:"Alfa Slab One";
	margin-right:auto;
	margin-left:auto;
}
 
.menu a {
    transition:all linear 0.15s;
	text-decoration:none;
    color:#fff;
	margin-right:auto;
	margin-left:auto;
}
 
.menu .arrow {
    font-size:11px;
    line-height:0%;
}
 
/*----- Top Level -----*/
.menu > ul > li {
    display:inline-block;
    position:relative;
    font-size:19px;
}
 
.menu > ul > li > a {
    padding:10px 40px;
    display:inline-block;
}
 
 
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
 	z-index:1;
    opacity:1;
}

.menu li:active .sub-menu {
    z-index:1;
    opacity:1;
}
 
.sub-menu {
    width:160%;
    padding:5px 0px;
    position:absolute;
    top:100%;
    left:0px;
    z-index:-1;
    opacity:0;
    transition:opacity linear 0.15s;
    background:#f7cf1c;
}
 
.sub-menu li {
    display:block;
    font-size:16px;
}
 
.sub-menu li a {
    padding:10px 30px;
    display:block;
}
 

/*finish menu*/


.topnav
{
	margin-bottom: 10px;
}

.mobistrip
{
	width: 200px;
	height: 200px;
	margin-right:auto;
	margin-left:auto;
	background-color:#f7cf1c;
	position:relative;
	left: 0px;
}

.createYearbook
{
	position:relative;
	left:0px;
	margin-right:auto;
	margin-left:auto;
	padding-bottom:20px;
	width:350px;
	height:50px;
	font-family:"Alfa Slab One";
	font-size: 15px;
	font-weight:lighter;
	text-align:center
}

.createYearbook a
{
	color: #000;
	text-decoration:none;
	background-color:#ce542c;
	padding: 5px 15px;
	border-radius: 3px 3px 3px 3px;
}

.continue
{
	position:relative;
	left:0px;
	margin-right:auto;
	margin-left:auto;
	width:340px;
	height:50px;
	text-align:center;
}

.continue a
{
	font-size:24px;
	font-family:Arial;
	font-weight:bolder;
	color: #fff;
	background-color:#ce542c;
	text-decoration:none;
	padding: 10px 10px;	
	border-radius: 3px 3px 3px 3px;
}

.undernav li
{
	position:relative;
	top: -150px;
	display:inline;	
	height: 50px;
}


.ach
{
	width:450px;
	height:50px;
	padding-top:20px;
	padding-bottom:20px;
	position:relative;
	left:0px;
	top: 140px;
}

.ach a
{
	font-family:Arial;
	font-size:25px;
	color:#4e4d4d;
	font-weight:bold;
	text-decoration:none;
	padding-right: 25px;
	padding-left: 25px;
	padding-bottom:20px;
	border-bottom-width:8px;
	border-bottom-color:#4e4d4d;
	border-bottom-style:solid;
}


.jumbotron
{
	visibility: hidden;	
	padding: 0px;
}



/*choose size Stuff*/
.ChooseSizeA2
{
	width:237px;
	font-family:Arial;
	font-size:15px;
	color:#4e4d4d;
	font-weight:bold;
	background-color:#fff;
	position:relative;
	top:-900px;
	margin-right:auto;
	margin-left:auto;
}

.ChooseSize
{
	align-content:center;
	background-color:#fff;
}

.picksize
{
	position:relative;
	top:-900px;
	left: -15;
	margin-right:auto;
	margin-left:auto;
}

.sizepics img
{
	background-color:#fff;
	border-width:6px;
	border-color:#f7cf1c;
	border-style:solid;
	margin-right:auto;
	margin-left:auto
}


}




/* med res or ipad */
@media only screen and (min-width: 481px) {
	
	
.nav
{
	visibility:hidden;	
}

.LoginStuff li
{
	display: inline;
	float: right!important;
	position:relative;
	top: -50px;
	right: 10px;
}

.reg1 a
{
	border-radius: 0px 3px 3px 0px;
	border-left-width: 1px;
	border-left-style:solid;
	border-left-color:#ce542c;
	padding: 10px 10px;
	font-size:20px;
	font-family:Arial;
	font-weight:bold;
	color: #fff;
	background-color:#f7cf1c;
	text-decoration:none;
}

.log1 a
{
	border-radius: 3px 0px 0px 3px;
	border-right-width: 0.5px;
	border-right-style:solid;
	border-right-color:#ce542c;
	padding: 10px 20px;
	font-size:20px;
	font-family:Arial;
	font-weight:bold;
	color: #fff;
	background-color:#f7cf1c;
	text-decoration:none;
}

.nav
{
	visibility: hidden;
}


/*start menu*/

.clearfix a
{
	background-color:#f7cf1c;
	margin-right:auto;
	margin-left:auto;
	width:300px;
	height:20px;
	padding-bottom:10px;
	position:relative;
	left: -30px;
}


.AMenu
{
	margin-right:auto;
	margin-left:auto;
	padding-left: 100px;
	position:relative;
	left:40px;
}

.menu-wrap
{
	width:100%;
	background-color:#f7cf1c;
	align-content:center;
	margin-right:auto;
	margin-left:auto;
}

.menu
{
	width:100%;
	height:68px;
	background-color:#f7cf1c;
	position:relative;
	margin-left:auto;
	margin-right:auto;
}
	
.menu li 
{
    margin:0px;
	text-decoration:none;
    list-style:none;
    font-family:"Alfa Slab One";
	margin-right:auto;
	margin-left:auto;
	position:relative;
	top: 15px;
}
 
.menu a 
{
    transition:all linear 0.15s;
	text-decoration:none;
    color:#fff;
	margin-right:auto;
	margin-left:auto;
}
 
.menu .arrow 
{
    font-size:24px;
    line-height:0%;
}
 
/*----- Top Level -----*/
.menu > ul > li 
{
    display:inline-block;
    position:relative;
    font-size:24px;
}
 
.menu > ul > li > a 
{
    padding:0px 20px;
    display:inline-block;
}
 
 
/*----- Bottom Level -----*/
.menu li:hover .sub-menu 
{
 	z-index:1;
    opacity:1;
}

.menu li:active .sub-menu 
{
    z-index:1;
    opacity:1;
}
 
.sub-menu 
{
    width:500px;
	height:300px;
    padding:0px 0px;
	padding-bottom:60px;
	padding-top:20px;
	padding-left:35px;
    position:absolute;
    top:100%;
    left:-100px;
    z-index:-1;
    opacity:0;
    transition:opacity linear 0.15s;
    background:#f7cf1c;
	border-radius: 0px 0px 3px 3px;
}
 
.sub-menu li 
{
    display:block;
    font-size:25px;
}
 
.sub-menu li a 
{
    padding:20px 20px;
    display:block;
}
 

/*finish menu*/


.topnav
{
	margin-bottom: 10px;
}


.createYearbook
{
	position:relative;
	left:-10px;
	bottom:90px;
	margin-right:auto;
	float:left;
	padding-bottom:50px;
	width:500px;
	height:70px;
	font-family:"Alfa Slab One";
	font-size: 14px;
	font-weight:lighter;
	text-align:center
}

.createYearbook h1
{
	width:380px;	
}

.createYearbook a
{
	color: #000;
	text-decoration:none;
	background-color:#ce542c;
	padding: 15px 30px;
	border-radius: 3px 3px 3px 3px;
}

.continue
{
	position:relative;
	right:-10px;
	bottom: 209px;
	float:right;
	margin-left:auto;
	width:400px;
	height:70px;
	text-align:center;
}

.continue a
{
	font-size:28px;
	font-family:Arial;
	font-weight:bolder;
	color: #fff;
	background-color:#ce542c;
	text-decoration:none;
	padding: 17.4px 10px;	
	border-radius: 3px 3px 3px 3px;
}

.undernav li
{
	position:relative;
	top: -300px;
	display:inline;	
	height: 50px;
}


.ach
{
	width:600px;
	height:50px;
	padding-top:20px;
	padding-bottom:20px;
	position:relative;
	left:-10px;
	top: 140px;
	margin-right:auto;
	margin-left:auto;
}

.ach a
{
	font-family:Arial;
	font-size:32px;
	color:#4e4d4d;
	font-weight:bold;
	text-decoration:none;
	padding-right: 25px;
	padding-left: 25px;
	padding-bottom:20px;
	border-bottom-width:8px;
	border-bottom-color:#4e4d4d;
	border-bottom-style:solid;
	margin-right:10px;
	margin-left:10px;
}

.circlesT
{
	visibility:hidden;	
}

.jumbotron 
{
  padding-top: 20px;
  background-image:url(http://yourprintsolution.co.uk/littlechickdemo/pics/pic_1.gif);
  height: 200px;
  background-repeat: no-repeat;
  background-size: cover;
  position:relative;
  top: 10px;
}

.jumbotron .container 
{
  position: relative;
   background-color:transparent;
}

.jumbotron h1 
{
  color: #fff;
  font-size: 20px;  
  font-family:"Alfa Slab One";
  text-outline:#DFDFDF;
  background-color:transparent;
  padding-left:140px;
  position:relative;
  bottom:50px;
  display: inline;
  float: left!important;
  margin-right: auto;
}


/*choose size Stuff*/
.ChooseSizeA2
{
	width:237px;
	font-family:Arial;
	font-size:15px;
	color:#4e4d4d;
	font-weight:bold;
	background-color:#fff;
	position:relative;
	top:-0px;
	margin-right:auto;
	margin-left:auto;
}

.ChooseSize
{
	align-content:center;
	background-color:#fff;
}

.picksize
{
	position:relative;
	top:0px;
	left: -15;
	margin-right:auto;
	margin-left:auto;
}

.sizepics img
{
	background-color:#fff;
	border-width:6px;
	border-color:#f7cf1c;
	border-style:solid;
	margin-right:auto;
	margin-left:auto
}


	
	
}




/* high res or computer */
@media only screen and (min-width: 1024px) {
	
.menu-wrap
{
	visibility: hidden;
}

.bg
{
	background-color:#fff;
}

.filler
{
	width: 100%;
	height: 200px;
	background-color:#f7cf1c;
}

.fillera
{
	padding-top:30px;
	background-color:#fff;
}

* 
{
	background-color:#eae9e9;
}


.LoginStuff li
{
	display: inline;
	float: right!important;
	position:relative;
	top: 140px;
}

.reg1 a
{
	border-radius: 0px 3px 3px 0px;
	border-left-width: 1px;
	border-left-style:solid;
	border-left-color:#ce542c;
	padding: 14px 10px;
	font-size:18px;
	font-family:Arial;
	font-weight:bold;
	color: #fff;
	background-color:#f7cf1c;
	text-decoration:none;
	transition-property: background;
  	transition-duration: 0.3s;
  	transition-timing-function: ease;
  	transition-delay: 0;
}

.reg1 a:hover
{
	border-radius: 0px 3px 3px 0px;
	border-left-width: 1px;
	border-left-style:solid;
	border-left-color:#ce542c;
	padding: 14px 10px;
	font-size:18px;
	font-family:Arial;
	font-weight:bold;
	color: #000;
	background-color:#ce542c;
	text-decoration:none;
}

.log1 a
{	
	border-radius: 3px 0px 0px 3px;
	border-right-width: 1px;
	border-right-style:solid;
	border-right-color:#ce542c;
	padding: 14px 20px;
	font-size:18px;
	font-family:Arial;
	font-weight:bold;
	color: #fff;
	background-color:#f7cf1c;
	text-decoration:none;
	transition-property: background;
  	transition-duration: 0.3s;
  	transition-timing-function: ease;
  	transition-delay: 0;
}

.log1 a:hover
{
	border-radius: 3px 0px 0px 3px;
	border-right-width: 1px;
	border-right-style:solid;
	border-right-color:#ce542c;
	padding: 14px 20px;
	font-size:18px;
	font-family:Arial;
	font-weight:bold;
	color: #000;
	background-color:#ce542c;
	text-decoration:none;
}


.list
{
	padding-top:200px;
}

.nav{
	padding-top:200px;
}


.nav ul {
    padding-left: 0;
}

.nav a {
  padding: 30px 20px;
  font-size:22px;
  font-family:"Alfa Slab One";
  color: #fff;
  background-color:#f7cf1c;
  text-decoration:none;
  float: left!important;
  margin-right: auto;
  transition-property: background;
  	transition-duration: 0.3s;
  	transition-timing-function: ease;
  	transition-delay: 0;
}

.nav a:hover
{
  padding: 30px 20px;
  font-size:22px;
  font-family:"Alfa Slab One";
  color: #000;
  background-color:#ce542c;
  text-decoration:none;
  float: left!important;
  margin-right: auto;
}

.nav li {
  display: inline;
  float: left!important;
  margin-right: auto;
}

.hide
{
visibility: hidden;	
}


.createYearbook
{
	padding-top:50px;
	width:330px;
	height:70px;
	font-family:"Alfa Slab One";
	font-size:14px;
	font-weight:lighter;
	float:left;
	text-align:left;
}

.createYearbook a
{
	color:#f7cf1c;
	padding: 10px 10px;
	border-radius: 3px 3px 3px 3px;
	transition-property: background;
  	transition-duration: 0.3s;
  	transition-timing-function: ease;
  	transition-delay: 0;
	text-decoration:none;
}

.createYearbook a:hover
{
	color: #fff;
	background-color:#f7cf1c;
	padding: 10px 10px;
	border-radius: 3px 3px 3px 3px;
}

.undernav li
{
	display:inline;
	padding: 15px 20px;	
	height: 70px;
}

.ach
{
	width:500px;
	height:70px;
	float:right;
	padding-top:50px;
	padding-bottom:0px;
}

.ach a
{
	font-family:Arial;
	font-size:24px;
	color:#4e4d4d;
	font-weight:bold;
	text-decoration:none;
	padding: 28px 10px;
	border-bottom-width:8px;
	border-bottom-color:#eae9e9;
	border-bottom-style:solid;
	transition-property:all;
  	transition-duration: 0.3s;
  	transition-timing-function: ease;
  	transition-delay: 0;
}

.ach a:hover
{
	font-family:Arial;
	font-size:24px;
	color:#4e4d4d;
	font-weight:bold;
	text-decoration:none;
	padding: 28px 10px;
	border-bottom-width:8px;
	border-bottom-color:#4e4d4d;
	border-bottom-style:solid;
}

.continue
{
	width:340px;
	height:70px;
	float:right!important;
	padding-top:50px;
	text-align:right;
}

.continue a
{
	font-size:24px;
	font-family:Arial;
	font-weight:bolder;
	color: #fff;
	background-color:#f7cf1c;
	text-decoration:none;
	padding: 14px 10px;	
	border-radius: 3px 3px 3px 3px;
	transition-property: background;
  	transition-duration: 0.3s;
  	transition-timing-function: ease;
  	transition-delay: 0;
}

.continue a:hover
{
	font-size:24px;
	font-family:Arial;
	font-weight:bolder;
	color: #000;
	background-color:#ce542c;
	text-decoration:none;
	padding: 14px 10px;	
	border-radius: 3px 3px 3px 3px;
}

.pic img
{
	padding-top: 8px;
	background-color:transparent;
}

.jumbotron {
  padding-top: 20px;
  background-image:url(http://yourprintsolution.co.uk/littlechickdemo/pics/pic_1.gif);
  height: 500px;
  background-repeat: no-repeat;
  background-size: cover;
  position:relative;
  top: 130px;
}

.jumbotron .container {
  position: relative;
   background-color:transparent;
}

.jumbotron h1 {
  color: #fff;
  font-size: 44px;  
  font-family:"Alfa Slab One";
  background-color:transparent;
  padding-left:380px;
  display: inline;
  float: left!important;
  margin-right: auto;
}

.circlesT
{
	padding-top:400px;
	background-color:transparent!important;
	padding-left:80px;
	padding-right:80px;
}

.circlesT a
{
	background-color:#fff;
}* 
{
	background-color:#eae9e9;
}

.thumbnail{
	max-width: 360px;
    margin-right: auto;
	display:inline;
	float: left!important;
}

.list
{
	padding-top:200px;
}

.a1
{
	width:25%;
	display:inline;
	padding-left:6%;
	padding-right:6%;
	background-color:#fff;
}

.a1 img
{
	background-color:transparent!important;
}

.mobiBG
{
	height:91px; 
	width:100%; 
	background-color:#f7cf1c;
}

/*Teacher Login Stuff*/

.pagelogin
{
	padding-top:20px;
	padding-bottom:20px;
	padding-left:300px;
}

.Tlogin form
{
	background-color:#fff;
}

.Tlogin p
{
	background-color:#fff;
}

.Tlogin
{
	background-color:#fff;
	width:400px;
	padding: 20px;
}


/*Choose Size Stuff*/

.ChooseSize
{
	padding-top:220px;
	align-content:center;
	background-color:#fff;
}

.ChooseSize h1
{
	background-color:#fff;
}

.ChooseSizeA2
{
	width:500px;
	font-family:Arial;
	font-size:27px;
	color:#4e4d4d;
	font-weight:bold;
	background-color:#fff;
}

.picksize
{
	width:100%;
	background-color:#fff;	
}

.sizepics
{
	width:30%;
	display:inline;
	padding: 10px;
	background-color:#fff;
}

.sizepics a
{
	background-color:#fff;
	border-width:6px;
	border-color:#fff;
	border-style:solid;
}

.sizepics img
{
	background-color:#fff;
	border-width:13px;
	border-color:#fff;
	border-style:solid;
	transition-property:all;
  	transition-duration: 0.3s;
  	transition-timing-function: ease;
  	transition-delay: 0;
}

.sizepics img:hover
{
	background-color:#fff;
	border-width:13px;
	border-color:#f7cf1c;
	border-style:solid;
}

/*Year Group YG*/

.ChooseYG
{
	padding-top:220px;
	align-content:center;
	background-color:#fff;
}

.ChooseYG h1
{
	background-color:#fff;
}

.ChooseYGA2
{
	width:800px;
	font-family:Arial;
	font-size:27px;
	color:#4e4d4d;
	font-weight:bold;
	background-color:#fff;
}

/*Choose Cover 8x8 Stuff*/

.choosecover8x8
{
	padding-top:220px;
	align-content:center;
	background-color:#fff;
}

.choosecover8x8 h1
{
	background-color:#fff;
}

.a2-8x8
{
	width:500px;
	font-family:Arial;
	font-size:27px;
	color:#4e4d4d;
	font-weight:bold;
	background-color:#fff;
}

.pickcover8x8
{
	width:100%;
	background-color:#fff;	
}

.cover8x8pics
{
	width:30%;
	display:inline;
	padding: 10px;
	background-color:#fff;
}

.cover8x8pics a
{
	background-color:#fff;
	border-width:6px;
	border-color:#fff;
	border-style:solid;
}

.cover8x8pics img
{
	background-color:#fff;
	border-width:13px;
	border-color:#fff;
	border-style:solid;
	transition-property:all;
  	transition-duration: 0.3s;
  	transition-timing-function: ease;
  	transition-delay: 0;
}

.cover8x8pics img:hover
{
	background-color:#fff;
	border-width:13px;
	border-color:#f7cf1c;
	border-style:solid;
}

/*Choose Cover 6x8 Stuff*/

.choosecover6x8
{
	padding-top:220px;
	align-content:center;
	background-color:#fff;
}

.choosecover6x8 h1
{
	background-color:#fff;
}

.a2-6x8
{
	width:500px;
	font-family:Arial;
	font-size:27px;
	color:#4e4d4d;
	font-weight:bold;
	background-color:#fff;
}

.pickcover6x8
{
	width:100%;
	background-color:#fff;	
}

.cover6x8pics
{
	width:30%;
	display:inline;
	padding: 10px;
	background-color:#fff;
}

.cover6x8pics a
{
	background-color:#fff;
	border-width:6px;
	border-color:#fff;
	border-style:solid;
}

.cover6x8pics img
{
	background-color:#fff;
	border-width:13px;
	border-color:#fff;
	border-style:solid;
	transition-property:all;
  	transition-duration: 0.3s;
  	transition-timing-function: ease;
  	transition-delay: 0;
}

.cover6x8pics img:hover
{
	background-color:#fff;
	border-width:13px;
	border-color:#f7cf1c;
	border-style:solid;
}


/*Build Yearbook Stuff*/


.BuildYearbook
{
	padding-top:220px;
	align-content:center;
	background-color:#fff;
}

.BuildYearbook h1
{
	background-color:#fff;
}

.BuildYearbookA2
{
	width:800px;
	font-family:Arial;
	font-size:27px;
	color:#4e4d4d;
	font-weight:bold;
	background-color:#fff;
}

.price
{
	font-family: Arial;
	font-size:32px;
	color:#e15152;
	font-weight:bold;
	background-color:#fff;
	padding: 20px;
}

.BuildButton
{
	padding: 25px;
	background-color:#fff;
}

.BuildButton a
{
	font-size:30px;
	font-family:"Alfa Slab One";
	color: #fff;
	text-decoration:none;
	background-color:#f7cf1c;
	text-decoration:none;
	border-radius: 3px 3px 3px 3px;
	padding: 25px 50px;	
	transition-property: background;
  	transition-duration: 0.3s;
  	transition-timing-function: ease;
  	transition-delay: 0;
}

.BuildButton a:hover
{
	font-size:30px;
	font-family:"Alfa Slab One";
	color: #000;
	background-color:#ce542c;
	text-decoration:none;
	text-decoration:none;
	border-radius: 3px 3px 3px 3px;
	padding: 25px 50px;	
}

.info
{
	font-family:Arial;
	font-size:24px;
	color:#4e4d4d;
	font-weight:bold;
	background-color:#fff;
	padding:30px;
}


}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Yearbooks - Size</title>
<link rel="stylesheet" type="text/css" media="all" href="styles1.css">


</head>

<body>
<div class="top">
<div class="thumbnail">
<img src="http://yourprintsolution.co.uk/littlechickdemo/pics/Logo-01.png" width="177" height="183" alt="0">
</div>
<div class="LoginStuff">
<ul>
    <div class="reg1"><li class="reg"><a href="#">Register</a></li></div>
    <div class="log1"><li class="login"><a href="#">Login</a></li></div>
</ul>
</div>
</div>


<!-- Mobile Menu -->
<div class="menu-wrap" align="center">
    <nav class="menu" align="center">
        <ul class="clearfix">
            <li>
                <div class="AMenu" align="center"><a href="#" >Menu<span class="arrow">&#9660;</span></a></div>
 
                <ul class="sub-menu">
                    <li><a href="#">Yearbooks</a></li>
                    <li><a href="#">Leaving Cards</a></li>
                    <li><a href="#">Mugs</a></li>
                    <li><a href="#">School Calendars</a></li>
                    <li><a href="#">Teachers Section</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</div>

<!-- Normal Menu -->
<div class="nav" style="height:100%; width:100%;">
<ul>
	<div class="Yearbooks"><li><a href="#">Yearbooks</a></li></div>
    <div class="LeavingCards"><li><a href="#">Leaving Cards</a></li></div>
    <div class="Mugs"><li><a href="#">Mugs</a></li></div>
    <div class="SchoolCalendars"><li><a href="#">School Calendars</a></li></div>
    <div class="TeacherSection"><li><a href="#">Teachers Section</a></li></div>
</ul>
</div>


<div class="mobiBG"></div>
<div class="undernav">
<div class="createYearbook">
<h1><a href="#">Create a Yearbook</a></h1>
</div>
<div class="continue">
<!-- same as login/register just bold -->
<h2><a href="#">Continue Your Yearbook</a></h2>
</div>
<div class="ach" align="center">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Create</a></li>
<li><a href="#">How To</a></li>
</ul>
</div>
</div>

<div class="jumbotron">
<div class="container">
        <h1>Creating a Yearbook is Easy
        <br><br>
        Simply Choose Your Options Below.
        </h1>
      </div>
      <div class="circlesT" style="background-color:#fff;">
      <div class="a1">
      <a href="#"><img src="http://yourprintsolution.co.uk/littlechickdemo/pics/circle_test.gif" width="180" height="176" alt=""/></a>
      </div>
      <div class="a1">
      <a href="#"><img src="http://yourprintsolution.co.uk/littlechickdemo/pics/circle_test.gif" width="180" height="176" alt=""/></a>
      </div>
      <div class="a1">
      <a href="#"><img src="http://yourprintsolution.co.uk/littlechickdemo/pics/circle_test.gif" width="180" height="176" alt=""/></a>
      </div>
      <div class="a1">
      <a href="#"><img src="http://yourprintsolution.co.uk/littlechickdemo/pics/circle_test.gif" width="180" height="176" alt=""/></a>
      </div>
      </div>
</div>
<div class="bg">
<div class="ChooseSize" align="center">
<div class="ChooseSizeA2">
<h1 align="center">1. Choose a Size</h1>
</div>
</div>

<div class="picksize" align="center">
<div class="sizepics" align="center">
<a href="#" align="center"><img src="http://yourprintsolution.co.uk/littlechickdemo/pics/8x6.gif" alt="" width="30%" height="30%"></a>
</div>
<div class="sizepics" align="center">
<a href="#" align="center"><img src="http://yourprintsolution.co.uk/littlechickdemo/pics/11x8.gif" alt="" width="30%" height="30%"></a>
</div>
<div class="sizepics" align="center">
<a href="#" align="center"><img src="http://yourprintsolution.co.uk/littlechickdemo/pics/8x8.gif" alt="" width="30%" height="30%"></a>
</div>
</div>
<div class="fillera"><div class="filler"></div></div>
</div>
</body>
</html>

2 个答案:

答案 0 :(得分：1)

因为这个原因：

/* med res or ipad */
@media only screen and (min-width: 481px) {

您的媒体查询只使用min-width。因此，具有更高分辨率的每个屏幕也将采用CSS规则。向其添加max-width规则：

/* med res or ipad */
@media only screen and (min-width: 481px) and (max-width: 1023px) {

答案 1 :(得分：0)

你的例子中有太多的css要经历，但也许你还没有通过桌面的css正确思考，因为它也将采用ipad风格，考虑到它也是超过481px。

尝试

@media only screen and (min-width: 481px) and (max-width: 1023px)
相关问题
最新问题