特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
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
如需转载,烦请注明出处:https://www.w3cplus.com/css3/css3-media-queries-for-iPhone-and-iPads
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!