CSS3 Media Queries在iPhone4和iPad上的运用
生活随笔
收集整理的這篇文章主要介紹了
CSS3 Media Queries在iPhone4和iPad上的运用
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
?
CSS3 Media Queries的介紹在W3CPlus上的介紹已有好幾篇文章了，但自己碰到的問題與解決的文章還是相對的較少。前幾天在《修復(fù)iPhone上submit按鈕bug》上介紹了修復(fù)form中sumit按鈕的bug。同一個(gè)項(xiàng)目，為了實(shí)現(xiàn)iPhone和iPad橫板與豎板的風(fēng)格，讓我還是頭疼了一翻。
一開始按照CSS3 Media Queries模板中的介紹來運(yùn)用，雖然幫我解決了iPad的橫板與豎板的風(fēng)格渲染問題，但在iPhone4上還是存在問題的。后來結(jié)過網(wǎng)上的查找，總算是問題解決了，下面就來看看問題是如何解決的。
在具體開始之前，先來看看他的源碼：
<!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;width: 65%;}input {outline: medium none;}input:not([type="checkbox"]){width: 90%;margin-top: 4px;padding: 10px; border: 1px solid rgb(178, 178, 178);-webkit-appearance: textfield;-webkit-box-sizing: content-box;box-sizing : content-box;border-radius: 3px;box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;-webkit-transition: all 0.2s linear;transition: all 0.2s linear;}input:not([type="checkbox"]):active,input:not([type="checkbox"]):focus{border: 1px solid rgba(91, 90, 90, 0.7);background: rgba(238, 236, 240, 0.2); box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;}.form-actions {text-align: center; } .form-actions input{width: 30%;cursor: pointer; background: rgb(61, 157, 179);padding: 8px 5px;font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif;color: #fff;font-size: 24px; margin: 5px;border: 1px solid rgb(28, 108, 122); margin-bottom: 10px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);border-radius: 3px; box-shadow:0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,0px 0px 0px 3px rgb(254, 254, 254),0px 5px 3px 3px rgb(210, 210, 210);-webkit-transition: all 0.2s linear;transition: all 0.2s linear;-webkit-appearance: none; }.form-actions input:hover{background: rgb(74, 179, 198);}.form-actions input:active,.form-actions input:focus{background: rgb(40, 137, 154);position: relative;top: 1px;border: 1px solid rgb(12, 76, 87); box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;}</style> </head><body><form name="form1" method="post" action="2.html" οnsubmit="return check()" class="form-horizontal"><fieldset><div class="control-group"><label for="text1" class="control-label">用戶名：</label><div class="controls"><input id="username_reg" type="text" name="text1" οnblur="check()" required="required" /><div class="help-inline" id="div1"></div></div></div><div class="control-group"><label for="text2" class="control-label">密碼：</label><div class="controls"><input id="password_reg" type="password" name="text2" οnblur="check()" required="required"><div class="help-inline" id="div2"></div></div></div><div class="control-group"><label for="text3" class="control-label">確認(rèn)密碼：</label><div class="controls"><input id="confirm_reg" type="password" name="text3" οnblur="check()" required="required" /><div class="help-inline" id="div3"></div></div></div><div class="form-actions"><input type="button" value="提交" name="tect6" class="btn btn-primary" οnclick="reg()" /><input type="reset" value="重置" name="text7" class="btn" /></div></fieldset> </form></body> </html>現(xiàn)在在iPhone4豎板是OK的，如下圖所示
但現(xiàn)在需求是，在iPhone4的橫板以及iPad的橫板與豎板下，也需要讓表單居中顯示：
上圖顯示的是iPad豎板下的需求，橫板下也需要類似的效果。
需求明確，做法也是有思路的，首先我按照：CSS3 Media Queries模板中的模板在樣式中增加了代碼：
/*iPad豎板*/@media screen and (max-device-width: 768px) and (orientation: portrait) {form {margin: 0 25%;}}/*iPad橫板*/@media screen and (max-device-width: 1024px) and (orientation: landscape) {form {margin: 0 25%;}}/*iPhone4*/@media only screen and (max-device-width: 480px),only screen and (-webkit-min-device-pixel-ratio: 2) {form {margin: 0 ;}.controls {width: 68%;}}加上上面代碼后在iPad下是正常了，而且不會有什么問題存在。但在iPhone4上依然存在一個(gè)怪異的現(xiàn)象：當(dāng)你iPhone4加載頁面是用橫板加載，再旋轉(zhuǎn)到豎板，不會存在任何問題，而且顯示也是蠻正常的。但是初始加載頁面是豎板，然后在旋轉(zhuǎn)到橫板，就有問題了，表單給放大了
初步給我感覺就是放大了，但具體是不是因?yàn)檫@個(gè)原因，我也不太清楚，查找了一些資料，也嘗試了無解決辦法。最后也從橫板豎板的思路出發(fā)查找資料，經(jīng)過一試，給解決了，下面來看看這段代碼：
/* iPhone 4 豎板 */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:portrait), only screen and (min-device-pixel-ratio : 1.5) and (orientation:portrait){form {margin:0;}.controls {width: 68%;} }/* iPhone 4 橫板 */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:landscape), only screen and (min-device-pixel-ratio : 1.5) and (orientation:landscape){form {margin:0 10%;}.controls {width: 68%;} }這樣一來就OK了。在iPhone4和iPad的橫豎板下都能正常讓表單居中顯示。
那么以后大家在iPhone4和iPad設(shè)備上，就可以按照橫豎板來定樣式了：
1、iPhone4豎板
@mediaonly screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:portrait),only screen and (min-device-pixel-ratio : 1.5) and (orientation:portrait){/*你的樣式寫在這里*/ }2、iPhone橫板
@mediaonly screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:landscape),only screen and (min-device-pixel-ratio : 1.5) and (orientation:landscape){/*你的樣式寫在這里*/}3、iPad豎板
@media screen and (max-device-width: 768px) and (orientation: portrait) {/*你的樣式寫在這里*/}4、iPad橫板
@media screen and (max-device-width: 1024px) and (orientation: landscape) {/*你樣式寫在這里*/}上面四種CSS3 Media Queries就是用來對付iPhone4和iPad的，至于其他的運(yùn)用，大家參考下面我重新整理的CSS3 Media Queries模板：
CSS3 Media Queries 模板：
1、Smartphones (豎板和橫板)
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {/* 你的樣式寫在這里 */}//===或者====//< link rel="stylesheet" href="smartphones.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)" />2、Smartphones (橫板)
@media only screen and (min-width : 321px) {/* 你的樣式寫在這里 */}//===或者====//< link rel="stylesheet" href="smartphones-landscape.css" media="only screen and (min-width : 321px)" />3、Smartphones (豎板)
@media only screen and (max-width : 320px) {/* 你的樣式寫在這里 */}//===或者====//< link rel="stylesheet" href="smartphones-portrait.css" media="only screen and (max-width : 320px)" />4、iPad(豎板和橫板)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {/* 你的樣式寫在這里 */}//===或者====//< link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)" />5、iPad橫板
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {/* 你的樣式寫在這里 */} //===或者====//< link rel="stylesheet" href="ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)" />6、iPad的豎板
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {/* 你的樣式寫在這里 */}//===或者====//< link rel="stylesheet" href="ipad-portrait.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)" />7、Desktops and laptops
@media only screen and (min-width : 1224px) {/* 你的樣式寫在這里 */}//===或者====//< link rel="stylesheet" href="desktops-and-laptops.css" media="only screen and (min-width : 1224px)" />8、Large screens
@media only screen and (min-width : 1824px) {/* 你的樣式寫在這里 */}//===或者====//< link rel="stylesheet" href="large-screens.css" media="only screen and (min-width : 1824px)" />9、iPone4
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {/* 你的樣式寫在這里 */}//===或者====//< link rel="stylesheet" href="iphone4.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5)" />10、iPhone4豎板
@media only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:portrait), only screen and (min-device-pixel-ratio : 1.5) and (orientation:portrait){/*你的樣式寫在這里*/ }//===或者====//< link rel="stylesheet" href="iphone4-portrait.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:portrait), only screen and (min-device-pixel-ratio : 1.5) and (orientation:portrait)" />11、iPhone4橫板
@media only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:landscape),only screen and (min-device-pixel-ratio : 1.5) and (orientation:landscape){/*你的樣式寫在這里*/}//===或者====//< link rel="stylesheet" href="iphone4-landscape.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:landscape),only screen and (min-device-pixel-ratio : 1.5) and (orientation:landscape)" />上面羅列了常用的CSS3 Media Queries模板，特別是在移動(dòng)設(shè)備上的幾種，希望對大家在今后的移動(dòng)開發(fā)端上的運(yùn)用有所幫助。當(dāng)然CSS3 Media Queries的運(yùn)用條件往往不只這些，大家完全可以根據(jù)自己的需求去定義不同的條件，但個(gè)人建議，使用CSS3 Media Queries采用主流就Ok了。隨著潮流走嘛。那么今天就扯到這了。如果大家有更好的經(jīng)驗(yàn)，可以通過下面的評論與我們一起分享。
轉(zhuǎn)載于:https://www.cnblogs.com/aimyfly/p/3727904.html
總結(jié)
以上是生活随笔為你收集整理的CSS3 Media Queries在iPhone4和iPad上的运用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 模拟真实环境之内网漫游
- 下一篇： CSS中position属性（abuso