android适配

页面中那些内容需要适配 一、图片高清适配 图片适配的目的是为了在页面中可以高清还原设计图中用到的图片。 页面中用到的图片是否清晰和展示页面的硬件设备的dpr以及图片分辨率这两个因素有关，下面会通过三个例子来说明这个问题。 1、示例一 例如dpr=2的设备，1个设备无关像素(android中的1dp，ios中的1pt)需要4个设备物理像素点填充。对于尺寸为100 x 120 (px)的图片，如果用 <img> 来展示，图片显示时会产生模糊现象。 原因：渲染图片时，宽度是100px，所以横向会占用100个设备无关像素，高度是120px,所以纵向会占用120个设备无关像素，每个设备无关像素又需要2x2个物理像素点来填充，而图片在每个设备无关像素(px)单位上提供的像素点只有1x1个，这时，系统通过一定的算法在这1个像素点上就近取色，取到4个颜色(这4种颜色接近但是有一定区别)之后，当成4个像素点，然后填充到1个设备无关像素点上，这样就导致图片显示时模糊，dpr越大，这种方式显示的图片越模糊。 2、示例二 还是dpr=2的设备，但是准备了一个尺寸为200 x 240 (px)的图片，还是用 <img> 来展示，这时显示的图片就比较清晰了。 原因：这时图片本身可以在一个设备无关像素单位上提供2x2个物理像素点，设备展示图片时直接拿图片提供的像素点来填充就可以了，不用对像素点进行处理

适配的基础知识 一、理解单位 px、pt、pc、sp、em、rem、dpr、dp、dip、ppi、dpi、ldpi、mdpi、hdpi、xhdpi、xxhdpi 如果你是ios开发，你需要了解的单位：pt，px，ppi；实际开发中用到的单位：pt。 如果你是android开发，你需要了解的单位：dip/dp，sp，px，dpi/ppi，ldpi，mdpi，hdpi，xhdpi，xxhdpi；实际开发中用到的单位：dp，sp。 如果你是前端开发，你需要了解的单位：px，em，rem，dpr；实际开发中用到的单位：px，em，rem，dpr 1、dpi / ppi dpi：dot per inch ，每英寸的点数；打印或印刷领域使用的单位，代表打印机每英寸可以打印出的点数 。 ppi：pixel per inch ，每英寸的像素数，像素密度；表示图像或者显示器单位面积上像素数量。 dpi 和 ppi 都是描述分辨率的单位，但是两者是有区别的，但是在描述手机分辨率时，可以认为两者意义相同，以前android设备偏向于使用 dpi ，ios设备偏向于使用 ppi ，目前android和ios统一使用 ppi 描述手机屏幕的像素显示密度。 2、ldpi、mdpi、hdpi、xhdpi、xxhdpi android对移动设备不同屏幕分辨率的分类 3、pt，pc，sp pt：磅（point的音译

目录 移动端的适配方案 百分比适配 viewport缩放适配 DPR缩放适配 rem适配 hotcss适配(使用dpr+rem,简单好用) vw/vh适配(为适配而生，最优方案) 移动端的适配方案 不同的尺寸的手机设备上，页面相对合理的展示（自适应）或者保持统一效果的等比缩放 百分比适配 根据父级计算百分比，需要配合其他布局使用 <div class="container"> <div></div> <div></div> <div></div> <div></div> </div> html,body{ width:100%; .container{ width:100%; div{ float:left; width:25%; } } } viewport缩放适配 把所有机型的css像素设置成一致的,需要动态设置 缩放比公式: 缩放比 = css像素/375 <script> (function(){ //获取CSS像素,需要确保缩放为1(minimum-scale=1,maximum-scale=1) let pageWidth = document.documentElement.clientWidth; let pageWidth = window.innerWidth; let pageWidth = window.screen.width; //求缩放比 var

rem适配布局 rem基础 rem是一个单位 rem（root em）是一个相对单位，类似于em，em是父元素字体大小 不同的是rem的基准是相对于html元素的字体大小 比如，根元素（html）设置font-size=12px；非根元素设置width:2rem;则换成px表示就是24px； rem的优点就是可以通过检测媒体查询来修改html里面的文字大小来改变元素的大小 媒体查询 媒体查询（Media Query）是CSS3新语法。 1.使用@media查询，可以针对不同的媒体类型定义不同的样式 2.@media可以针对不同的屏幕尺寸设置不同的样式 3.当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面 4.目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询 语法规范 @media mediatype and not|only (media feature){ CSS-Code; } 1.用@media开头 注意@符号 2.mediatype媒体类型 将不同的终端设备划分成不同的类型，称为媒体类型 all 用于所有设备 print 用于打印机和打印预览 screen 用于电脑屏幕，平板电脑，只能手机等 3.关键字and not only 关键字将媒体类型或多个媒体特性链接到一起作为媒体查询的条件 1.and：可以将多个媒体特性连接到一起

以我新建的一个标准测试程序为例， （1）src ——源代码（Source）管理节点。 （2）gen——自动生成（Generated）的文件点。 （3）Referenced Libraries——工程的参考库管理节点。 该节点主要管理Android工程需要引入的其他的一些外部库。 （4）assets——工程资产（Assets）管理节点。 （5）res——工程资源（Resource）管理节点。 该节点用于管理工程所引入的资源素材。 1. drawable子节点，用于管理可绘制的资源。 图标的目录： 大 res/drawable-hdpi 72×72 中 res/drawable-mdpi 48×48 小 res/drawable-ldpi 36×36 2. layout子节点，用于布局的管理。 3. value子节点，用于常量值的管理。 （6）“AndroidManifest.xml”——工程清单文件节点。 （7）“default.properties”——工程属性文件节点。 上述是通常标准形式，但是随着SDK的更新与成熟，Android目录结构也有了部分的改变，以下举几个例子说明。 1，引入doc节点 大家可以把一些说明性的文档或者log文件放在这个目录下，是个不错的选择，培养了良好的代码习惯也为后人带去了便利。 2，多种分辨率尺寸适配 大家都是专业的

讨论适配方案之前，先了解几个移动端的概念。 基础概念 设备像素(device pixels)： 又称为物理像素，是显示屏的最小物理单位。在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。 设备独立像素(device independent pixels): 基于计算机控制的坐标系统和抽象像素（虚拟像素），由底层系统的程序使用，转换为物理像素的应用。例如meta里面设置width=device-width，这个device-width就是设备独立像素。 在chrome里 看到的375x667 320x480等等都是设备独立像素，其数值上等于CSS像素数组。 设备像素比(device pixel ratio)： 简称dpr，定义了设备像素和设备独立像素的对应关系，它的值可以按公式得到： 设备像素比 = 设备像素/设备独立像素 目前了解到有三种方法实现适配： 固定高度，宽度自适应 利用rem布局，viewport缩放 vw适配 固定高度，宽度自适应 垂直方向用定值，水平方向用百分比、定值、flex都行。这样设置之后就可以不用管手机屏幕的尺寸进行开发。该方法使用了完美视口： <meta name="viewport" content="width=device-width,initial-scale=1"> 但是该方法有个缺点，由于高度固定，会导致页面产生横向拉伸的视觉效果。

是否还在为你的应用程序适配PC端，移动端，平板而苦苦思索呢，是否在寻找如何一套代码适配多终端方式呢，是否希望快速上手实现你的跨终端应用程序呢，是的话，那就看过来吧，本文阐述响应式UI设计相关理论基础，包括：屏幕尺寸，物理，设备独立，CSS像素，dpr，视口等相关概念，还有响应式设计基础，常见设计模式，及响应式UI实现基本思路，希望能加深对响应式的理解和实践思路。 欢迎访问我的个人博客 响应式（Responsive） 响应式是什么呢？顾名思义，响应式，肯定会自动响应，响应什么？应用程序是在终端屏幕窗口中展示给用户，被用户访问的，那么就是响应屏幕的变化，不同终端屏幕尺寸大小不一致，需要针对不同尺寸屏幕进行不同的展示响应。 响应式（Responsive web design, RWD） ，是指一套应用程序用户界面（User Interface）能自动响应不同设备窗口或屏幕尺寸（screen size）并且内容，布局渲染表现良好。 自适应（Adaptive） 在响应式设计（RWD）之外，还有一种适配多设备屏幕的方式， 自适应设计（Adaptive web design， AWD） 。 自适应设计(AWD)，是指一个应用程序使用多版本用户界面，针对不同设备屏幕，服务器端返回不同版本用户界面，供用户访问。 自适应vs响应式 自适应和响应式设计的不同主要概括如下： 自适应是多套用户界面

移动端页面适配———多方案解析 在移动互联网快速发展的今天，手机的种类和尺寸越来越多，作为前端的小伙伴们可能会越来越头疼，但又不得不去适配一款又一款的新机型。对于移动端适配，不同的公司、不同的团队有不同的解决方案。我在项目中也用了一部分解决方案，也看到了一些解决方案，对比下，总结一些自己的理解，希望对各位有帮助，找到最适合你们项目的适配方案。 下面是一些基础概念的讲解，帮助理解各种适配方案实现。 像素： 1、物理像素（设备像素） 屏幕的物理像素，又被称为设备像素，他是显示设备中一个最微小的物理部件。任何设备屏幕的物理像素出厂时就确定了，且固定不变的。 2、设备独立像素 设备独立像素也称为密度无关像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)，然后由相关系统转换为物理像素。 3、设备像素比 设备像素比简称为dpr，其定义了物理像素和设备独立像素的对应关系 设备像素比 ＝ 物理像素 / 设备独立像素 以iphone6为例： iphone6的设备宽和高为375pt * 667pt，可以理解为设备的独立像素，而其设备像素比为2.固有设备像素为750pt * 1334pt 通过：window.devicePixelRatio获得。 设备像素比是区别是否是高清屏的标准，dpr大于1时就为高清屏，一般情况下dpr为整数

关于dimens适配的好处和方法，我就不介绍了，请点击： android各版本分辨率适配（项目亲测） 本文重点说下，当遇到文中提供的dimens文件没有的分辨率如何去添加，比如(新分辨率)新机发布。 第一步：下载 文件 ，解压到D盘 第二步：使用cmd命令进入文件夹。 第三步：输入以下代码 java -jar autolayout .jar 750 1334 720 , 1184 _1080, 1812 _1080, 1776 720,1184 1080,1812 1080,1776 分别为特殊分辨率，这里举例是3组，想要几个自己写 这样就成功了，我们进入res文件夹下看 至于如何使用，请看前面链接文章 文章来源: Android dimens适配，特殊分辨率dimens文件生成教程

一、引言 　　因为Android的开源，所以厂商无需自行研发OS操作系统，由于各自厂商存在竞争，导致手机的生产存在差异，与此同时的是相继出现不同分辨率的版本手机，给广大开发者的苦不堪言痛苦，各种神奇的小板儿考验着app的兼容性，各种定制的rom不经意间就让app崩溃，光是界面上的调整就已经够你喝一壶了，为了解决这一问题，这段时间，无意间，在github上找到了一个开源框架，我在这里做了一些整理，经过测试，目前这个框架，兼容sdk最低到11,最高到23，其他的范围还没有测试，还有待测试。 二、说明 　　由于Google开始支持百分比的方式布局了，所以今后可能越来越流行这种布局适配，我把核心的东西抽出，做了一个整理。 　　 　　 三、集成步骤： 1.res/value/values.xml <?xml version="1.0" encoding="utf-8"?> < resources > < declare-styleable name = "PercentLayout_Layout" > < attr name = "layout_widthPercent" format = "fraction" /> < attr name = "layout_heightPercent" format = "fraction" /> < attr name = "layout