html - 响应式 html 平板分辨率 css 搞乱了桌面分辨率 css-6ren

html - 响应式 html 平板分辨率 css 搞乱了桌面分辨率 css

转载作者：太空宇宙更新时间：2023-11-04 02:51:49

我正在制作一个响应式演示网站，但我在使用中等分辨率时遇到了问题，因为当我将它的 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>

最佳答案

这是因为:

/* 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) {

关于html - 响应式 html 平板分辨率 css 搞乱了桌面分辨率 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32865851/

文章推荐： html - 删除链接但使用 CSS 保留图像

文章推荐： python sklearn : oneclassSVM never converges

文章推荐： html - 打印 CSS 分页符

Matlab 2012b 桌面 - 重新激活旧的 "retro style"桌面？
这显然有可能导致一场激烈的 war ，但无论如何，我试一试……(目前)还没有任何明确的答案。在我的一台机器上，我确实被切换/升级到 Matlab 2012b。这是一个漂亮的新桌面，好吧。但出于很多原
Docker 桌面 - 关于性能不佳的文件共享通知
当我的 Docker 容器启动时，我收到以下通知: Docker Desktop has detected that you shared a Windows file into a WSL 2 co
php - 连接到远程计算机 - 桌面
我希望能够(从服务器)连接到远程 PC 并能够访问其文件。我正在尝试使用 PHP 或 JavaScript 来完成此操作。所以我想知道 1) 是否可能以及 2) 如何做到。有人有任何示例/解决方案
c# - DirectX 桌面
我想使用 DirectX 为 Windows 7 制作动画桌面背景。我正在使用 C#、SlimDX 和几个 Windows API 函数的 P/Invoke 导入。我对 native Windows
macos - Mac 上的实时动态壁纸(桌面)
是否可以为 Mac 开发动态桌面？我所说的“动态”是指其图像采用系统参数(例如时间和作业信息)并使用此信息来更新图像的桌面。有关图像状态的信息也将在 session 之间保留。我不是在谈论电影或随机但
java - LibGDX 防止应用程序关闭(桌面)
我正在 LibGDX 中构建一个仅限桌面的应用程序。该游戏内置了一个 map 编辑器，您可以切换到并更改游戏 map 。我想添加一个功能，如果用户单击关闭窗口并且有未保存的编辑，它会提示您是否要在关闭
json - 桌面 JSON 行查看器？
有没有像样的Windows桌面JSON lines (JSONL)格式查看器？这种格式也称为: 行分隔的 JSON (LDJSON) 换行符分隔的 JSON (NDJSON) 我正在寻找至少能够从
带有大量图像的 iPhone 桌面 View
我有一个UITableView，它在单元格中显示大量图像，并且我对滚动性能并不满意。我的 UITableView 类似于 iPhone 上的照片应用程序。有谁知道为什么 iphone 照片应用程序滚动
javascript - 桌面 Chrome 中的图像加载
let img1 = document.createElement('img'); img1.setAttribute('src', 'https://caniuse.com/img/browsers
VB.net(桌面)上下文菜单分配给多个控件所有者问题
我在同一窗体上有两个不同的网格控件。它们共享相同的上下文菜单。当我选择上下文菜单项时，我无法确定哪个控件是所有者。最佳答案 ContextMenuStrip 类的 SourceControl 属性将
Docker 桌面 - kubernetes 无法启动
我已经安装了 Docker Desktop ( version : 2.3.0.4 ) 并启用了 Kubernetes . 我部署了几个 PODS，一切正常，从昨天开始，我遇到了下面提到的一个奇怪的问
titanium - 桌面 View 钛的背景图像
我正在制作需要实现TableView的应用程序。我想将背景图像应用到桌面 View 。谁能帮我解决这个问题。我正在使用下面的代码来创建 TableView Titanium.UI.setBackg
VB.net(桌面)上下文菜单分配给多个控件所有者问题
我在同一窗体上有两个不同的网格控件。它们共享相同的上下文菜单。当我选择上下文菜单项时，我无法确定哪个控件是所有者。最佳答案 ContextMenuStrip 类的 SourceControl 属性将
java - 桌面 Java 应用程序的雷达图
您能建议一些库在我的桌面 Java 应用程序中创建雷达图吗？谢谢最佳答案似乎JFreeChart提供了SpiderWebPlot 。 images for which看起来像雷达图。关于jav
Java 桌面 API 无法使用网络路径？
这个问题已经有答案了: 已关闭10 年前。 Possible Duplicate: Not possible to launch a file on a network using Java Desk
java - 桌面 Java 编程书籍
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
java - 如何识别来自PDA/桌面/服务器的Web请求？
我想知道是否可以(使用JAVA)识别用于发出请求的计算机类型，例如:服务器、台式机、PDA(平板电脑、手机等)？谢谢! 最佳答案取决于您使用什么来接受请求。对于 http 请求，信息位于请求 he
JavaFX 桌面 View 滚动条事件未触发
我添加了一个事件处理程序，用于滚动到我的桌面 View ，但它仅在我使用滚轮滚动时才起作用，但我也需要它在您单击并拖动滚动条时起作用。任何想法有什么问题吗？我尝试使用不同的方法来处理该事件，但没有一个
c# - 桌面 Java 应用程序替代方案
我想开始开发桌面 Java 应用程序，并且我想知道 Java 社区使用什么。我从 Swing 开始，但发现它非常初级。我习惯于在 Visual Studio 2010 中使用 .net c# WP
qt - 桌面 GUI 应用程序的垃圾收集语言
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 响应式 html 平板分辨率 css 搞乱了桌面分辨率 css