目前自己了解兩種辦法:
function
bodyscale()
bodyscale()
;
如果想要不留空白,可以讓背景寬高都為100%鋪滿整個螢幕,然後讓中間的部分垂直居中對齊。
寬高比例1.7777(1920x1080 1600x900 1360x768這個大概 1280x720)
css3新增的元素,使用rem為元素設定字型大小時,相對大小對比的是html根元素
,只修改根元素就成比例地調整所有字型大小,除了ie8及更早版本外,所有瀏覽器均已支援rem。
第一步:先設定header裡面的meta標籤和script標籤
"viewport" content=
"initial-scale=1,maximum-scale=1, minimum-scale=1"
>
"text/j**ascript"
>
document.documentelement.style.fontsize = document.documentelement.clientwidth /
1920
*100
+'px'
; = window.screen.width / 1920 * 100 + 'px';
<
/script>
window.screen.width / 1920是計算當前螢幕和設計稿的比例大小,比如解析度是960px,那麼這個值應該為0.5。
之所以乘以100,是因為一般瀏覽器的最小字型是12px,如果這個數值就小於12px,會造成一些計算的錯誤,和一些奇怪的問題。注意谷歌瀏覽器支援的最小font-size大小為12px(如果有小於12px可以使用火狐檢視)。
因為前面根元素乘以100,所以如果在960寬度解析度裡(此時根元素font-size為50px)乙個設計稿div寬度為960px,那麼應該除以100設定成9.6rem。1rem=fontsize,此時9.6x50=480px剛好是原來的一半。
第二步:把頁面裡所有的px都除以100轉換成rem
如果沒解決其他幾種方式可以再嘗試下:
1.響應式布局 bootstrap
2.百分比布局
3.**查詢 @media,使用 viewport,畫素轉換
對於iPhone5解析度相容性調整問題
iphone5的新解析度著實啃爹了一把,剛下完xcode4.5想玩玩iphone5的長螢幕效果,順便研究下怎麼去相容它。繼續,開始修復黑邊 這一步只要在config裡多加一張4inch的launch就能搞定 這樣如下圖,讓layout上對齊,並且actionsheet顯示正常 最後用巨集替換掉寫死的...
iOS 對於iPhone5解析度相容性調整問題
iphone5的新解析度著實啃爹了一把,剛下完xcode4.5想玩玩iphone5的長螢幕效果,順便研究下怎麼去相容它。繼續,開始修復黑邊 這一步只要在config裡多加一張4inch的launch就能搞定 這樣如下圖,讓layout上對齊,並且actionsheet顯示正常 最後用巨集替換掉寫死的...
HTML相容性處理
注意 html 對ie7的hack 必須保證html頂部有如下宣告 二 萬能 float 閉合 關於 clear float 的原理可參見 how to clear floats without structural markup 將以下 加入global css 中,給需要閉合的div加上 cla...