如何让我的网站在平板电脑上运行？

Question

我终于在手机，风景和肖像上工作了我的网站，但我仍然无法在平板电脑上使用它！

我使用媒体查询让我的网站在手机上运行，​​这就是我所做的：

＆＃13;

＆＃13;

@media screen and (max-width: 1024px) {
	
	body{
		position: relative;
		left: 100px;
	}
	.pintro{
		position: relative;
		top: 180px;
		width: 500px;
	}
	.hintro{
		position: relative;
		top: 180px;
	}
	
    /* The rest of my code */
}



@media screen and (max-width: 1024px) and (max-height: 400px) {
	body{
		font-family: 'Noto Sans', sans-serif;
		background: url("nature-blur-tree-greenex.jpg") no-repeat center center fixed;
		width: 100%;	
		max-width: 900px;
		margin: 0 auto;
		position: relative;
		right: 8%;
	}
	
	.pintro{
		position: relative;
		line-height: 50px;		
		left: -100px;
	}

	/* The rest of my code */
}

＆＃13;

＆＃13;

＆＃13;

然后我尝试使用这种形式的平板电脑：

＆＃13;

＆＃13;

@media only screen and (min-device-width: 768px){
	.footer{
		position: reltive;
		top: 1000px;
	}
}

＆＃13;

＆＃13;

＆＃13;

但是，这没有用。如果有人向我提供了媒体查询，我可以将其放入我的网站，以便我的网站在平板电脑上工作，我将非常感激。

感谢。

Answer 1

尝试使用此codepen

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
/* iPhone 6 landscape */
@media only screen and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2)
{ }

/* iPhone 6 portrait */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 2)
{ }

/* iPhone 6 Plus landscape */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 3)
{ }

/* iPhone 6 Plus portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 3)
{ }

/* iPhone 6 and 6 Plus */
@media only screen
  and (max-device-width: 640px),
  only screen and (max-device-width: 667px),
  only screen and (max-width: 480px)
{ }

/* Apple Watch */
@media
  (max-device-width: 42mm)
  and (min-device-width: 38mm)
{ }