【转】WEB APP 不同设备屏幕下图片适应分辨率-低调大师

【转】WEB APP 不同设备屏幕下图片适应分辨率

2017-11-23 657

　　约翰·格鲁伯：我认为 MobileSafari 不会再逐点对应的渲染图片，因为新旧 iPhone 之间的像素尺寸极为悬殊。

戴夫·海厄特：大多数设计师仍停留在传统的思想：CSS 像素即屏幕像素。然而，当我们进入高 DPI 的世界，用户界面可能被整体放大，一个 CSS 像素会占据多个屏幕像素。

　　IPHONE 3和 IPHONE 4是最典型的了，图片或ICON，在IPHONE 3能清晰显示的时候，IPHONE 4却会变的很模糊，无奈，只能准备两套图了。好在CSS提供的Media属性，能方便的让我们识别出不同DPI的设备，并以此来应用不同的样式。

　　首先，看看，常见的IPHONE 和 Android屏幕参数。

设备	分辨率	设备像素比率
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 像素实际上表现为一块 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);
    }
}

　　注：本文转自http://bbs.blueidea.com/home.php?mod=space&uid=168495&do=blog&id=23366

本文转自Artwl博客园博客，原文链接：http://www.cnblogs.com/artwl/，如需转载请自行联系原作者

微信关注我们

原文链接：https://yq.aliyun.com/articles/399734

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

android 中resources管理

主要存在于res/value文件夹中定义： dimen.xml：主要用于设置像素默认值 <resources> res/values/dimens.xml <dimen name="sp_12">12sp</dimen> <dimen name="sp_13">13sp</dimen> <dimen name="dip_40">40dip</dimen> <dimen name="dip_45">45dip</dimen> </resources> 代码使用： int width=getContext().getResources().getDimension(R.dimen.tab_width); xml文件使用： android:layout_width="@dimen/tab_width" color.xml设置颜色 <?xml version="1.0" encoding="utf-8"?> <resources> <item ...

2017-11-23

497

　本文主要转自：移动浏览器的viewport，部分内容有补充修改。对于移动web开发，最好了解一下viewport的概念，在quirksmode.org有两篇文章详细介绍了它，A tale of two viewport(12)，感觉非常好，本来想翻译的，但这两篇文章实在太长了，没耐性，于是抽取了其中重点讲viewport的部分，用半翻译半自己写的方式写出来，这也是为了让自己能够理解得更好一些。其中CSS像素和设备像素的概念，还有js获取各种宽高和位置的内容都没有提及，要想了解得更清楚还是推荐看看那两篇文章。以下图片均来自quirksmode.org。桌面浏览器先说说桌面浏览器上viewport的概念，在桌面浏览器上viewport就是浏览器内容的可视范围，它决定了<html>元素的默认宽高。举个例子：在一个流动布局的页面上，你给侧栏设置了width:30%，放在<body>下，正常情况下你拖动浏览器，改变浏览器的大小，这个侧栏会自动调整宽度使它的宽度为浏览器宽度的30%，那么这个自动调整的过程具体是怎样的呢？这个侧栏会获取父元素的宽度，乘以30%得...

2017-11-23

538

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。