CSS3 Media Queries在iPhone4和iPad上的运用

作者：大漠 日期：2012-04-12 点击：5071
Responsive
media queries
mobile
会员专栏

特别声明：开通VIP通道，年费价格为 ¥199.00元。如果您喜欢小站的内容，可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!(^_^)

CSS3 Media Queries的介绍在本站上的介绍已有好几篇文章了，但自己碰到的问题与解决的文章还是相对的较少。前几天在《修复iPhone上submit按钮bug》上介绍了修复form中sumit按钮的bug。同一个项目，为了实现iPhone和iPad横板与竖板的风格，让我还是头疼了一翻。

一开始按照CSS3 Media Queries模板中的介绍来运用，虽然帮我解决了iPad的横板与竖板的风格渲染问题，但在iPhone4上还是存在问题的。后来结过网上的查找，总算是问题解决了，下面就来看看问题是如何解决的。

在具体开始之前，先来看看他的源码：

	<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">	
	<title>login form</title>
	<style type="text/css" media="screen">
		button,
		input{
		  margin: 0;
		  font-size: 100%;
		  vertical-align: middle;
		  *overflow: visible;
		  line-height: normal;
		}
		button::-moz-focus-inner,
		input::-moz-focus-inner {
		  padding: 0;
		  border: 0;
		}
		button,
		input[type="button"],
		input[type="reset"],
		input[type="submit"] {
		  cursor: pointer;
		  -webkit-appearance: button;
		}
	
		body {
			margin: 0;
			padding: 58px 2% 2%;
		  background: -webkit-gradient(
		  	linear, 
		  	left top, 
		  	left bottom, 
		  	color-stop(0%,rgba(61,157,179,1)), 
		  	color-stop(15%,rgba(61,157,179,0.3)), 
		  	color-stop(40%,rgba(61,157,179,.5)),
		  	color-stop(70%,rgba(239,239,239,.4)),
		  	color-stop(100%,rgba(239,239,239,0.3)));
			background: -webkit-linear-gradient(
				top, 
				rgba(61,157,179,1) 0%,
				rgba(61,157,179,0.8) 15%,
				rgba(61,157,179,.5) 40%,
				rgba(239,239,239,.4) 70%,
				rgba(239,239,239,0.3) 100%);
		  	background-repeat: no-repeat;
				background-attachment: fixed;
		}
		form {
			margin: 0;
			padding: 0;
		}
		form fieldset {
			border: none;
			border-radius: 10px;
			box-shadow: inset 0 0 2px rgba(0,0,0,0.3),0 0 5px rgba(0,0,0,0.13);
			background-color: rgba(255,255,255,0.8);
		  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,0.8)), to(rgba(216,216,216,0.8)));
		  background-image: -webkit-linear-gradient(top,rgba(255,255,255,0.8), rgba(216,216,216,0.8));
		  background-repeat: repeat-x;
		  padding:20px 5%;
		  margin: 0;
		  position: relative;
		  border: 1px solid rgba(216,216,216,0.8);
		}
		.control-group {
			margin-bottom: 15px;			
		}
		
		.control-label {
			color: #405c60;
			display:block;
			line-height: 18px;
			font-weight: normal;
			font-size: 16px;
			display:inline-block;
			min-width: 80px;
			max-width: 80px;
			text-align: right;
			margin-top: 12px;
			vertical-align: top;
		}
		.controls {
			display: inline-block;
			vertical-align: top;
			w
剩余80%内容付费后可查看

如需转载，烦请注明出处：https://www.w3cplus.com/css3/css3-media-queries-for-iPhone-and-iPads

如果文章中有不对之处，烦请各位大神拍正。如果你觉得这篇文章对你有所帮助，打个赏，让我有更大的动力去创作。(^_^)。看完了？还不过瘾？点击向作者提问！

赏杯咖啡，鼓励他创作更多优质内容！
返回顶部