杨幂13分钟视频,光身美女视频app,无内丝袜美女视频

WEB APP 不同設(shè)備屏幕下圖片適應分辨率

2015.06.22

　　約翰·格魯伯：我認為 MobileSafari 不會再逐點對應的渲染圖片，因為新舊 iPhone 之間的像素尺寸極為懸殊。

　　戴夫·海厄特：大多數(shù)設(shè)計師仍停留在傳統(tǒng)的思想：CSS 像素即屏幕像素。然而，當我們進入高 DPI 的世界，用戶界面可能被整體放大，一個 CSS 像素會占據(jù)多個屏幕像素。

　　IPHONE 3和 IPHONE 4是最典型的了，圖片或ICON，在IPHONE 3能清晰顯示的時候，IPHONE 4卻會變的很模糊，無奈，只能準備兩套圖了。好在CSS提供的Media屬性，能方便的讓我們識別出不同DPI的設(shè)備，并以此來應用不同的樣式。

　　首先，看看，常見的IPHONE 和 Android屏幕參數(shù)。

設(shè)備	分辨率	設(shè)備像素比率
Android LDPI	320×240	0.75
Iphone 3 & Android MDPI	320×480	1
Android HDPI	480×800	1.5
Iphone 4	960×640	2.0

　　由此可見，Iphone 4的一個 CSS 像素實際上表現(xiàn)為一塊 2×2 的像素。所以圖片像是被放大2倍一樣，模糊不清晰。

　　解決辦法：

　　1、頁面引用

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" /><link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" /><link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" /><link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 2.0)" href="retina.css" />

　　2、CSS文件里

#header {    background:url(mdpi/bg.png);}@media screen and (-webkit-device-pixel-ratio: 1.5) {    /*CSS for high-density screens*/    #header {        background:url(hdpi/bg.png);    }}

　　注：本文轉(zhuǎn)自http://bbs.blueidea.com/home.php?mod=space&uid=168495&do=blog&id=23366

本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊舉報。

打開APP，閱讀全文并永久保存查看更多類似文章

media type與media query前端觀察 | CSS | 前端觀察

Html 5 屏幕適配解決方案：馬太航

Css3的Media Query方法總結(jié)

移動端CSS的10個基本知識點

Android 和 iPhone 瀏覽器之戰(zhàn)，第 1 部分: WebKit 成援兵

html5/css3響應式布局介紹及設(shè)計流程

更多類似文章 >>

国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看