首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

关于移动端适配,你必须要知道的

上面这些问题可能我们在开发中已经知道如何解决,但是问题产生的原理,以及解决方案的原理可能会模糊不清。...在解决这些问题的过程中,我们往往会遇到非常多的概念:像素、分辨率、 PPI、 DPI、 DP、 DIP、 DPR、视口等等,你真的能分清这些概念的意义吗?...四、视口 视口( viewport)代表当前可见的计算机图形区域。在 Web浏览器术语中,通常与浏览器窗口相同,但不包括浏览器的 UI, 菜单栏等——即指你正在浏览的文档的那一部分。...而在 dpr>1的屏幕上,位图的一个像素可能由多个物理像素来渲染,然而这些物理像素点并不能被准确的分配上对应位图像素的颜色,只能取近似值,所以相同的图片在 dpr>1的屏幕上就会模糊: ?...如:在 dpr=2的屏幕上展示两倍图 (@2x),在 dpr=3的屏幕上展示三倍图 (@3x)。 ?

2K20

关于移动端适配,你必须要知道的

上面这些问题可能我们在开发中已经知道如何解决,但是问题产生的原理,以及解决方案的原理可能会模糊不清。...在解决这些问题的过程中,我们往往会遇到非常多的概念:像素、分辨率、 PPI、 DPI、 DP、 DIP、 DPR、视口等等,你真的能分清这些概念的意义吗?...四、视口 视口( viewport)代表当前可见的计算机图形区域。在 Web浏览器术语中,通常与浏览器窗口相同,但不包括浏览器的 UI, 菜单栏等——即指你正在浏览的文档的那一部分。...而在 dpr>1的屏幕上,位图的一个像素可能由多个物理像素来渲染,然而这些物理像素点并不能被准确的分配上对应位图像素的颜色,只能取近似值,所以相同的图片在 dpr>1的屏幕上就会模糊: ?...如:在 dpr=2的屏幕上展示两倍图 (@2x),在 dpr=3的屏幕上展示三倍图 (@3x)。 ?

2.1K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    关于移动端适配,你必须要知道的

    上面这些问题可能我们在开发中已经知道如何解决,但是问题产生的原理,以及解决方案的原理可能会模糊不清。...在解决这些问题的过程中,我们往往会遇到非常多的概念:像素、分辨率、 PPI、 DPI、 DP、 DIP、 DPR、视口等等,你真的能分清这些概念的意义吗?...四、视口 视口( viewport)代表当前可见的计算机图形区域。在 Web浏览器术语中,通常与浏览器窗口相同,但不包括浏览器的 UI, 菜单栏等——即指你正在浏览的文档的那一部分。...而在 dpr>1的屏幕上,位图的一个像素可能由多个物理像素来渲染,然而这些物理像素点并不能被准确的分配上对应位图像素的颜色,只能取近似值,所以相同的图片在 dpr>1的屏幕上就会模糊: ?...如:在 dpr=2的屏幕上展示两倍图 (@2x),在 dpr=3的屏幕上展示三倍图 (@3x)。 ?

    1.9K41

    表格布局和绝对布局

    /*****************2016年4月28日 更新*************************************/ 知乎:为什么Android没有像iOS一样提供autolayout...Android中的RelativeLayout, layout_weight属性,dp/sp单位,mdpi/hdpi/xdpi等一系列文件夹,提供了各种手段解决适配问题,小到Android Wear,大到...Android TV都可以完美适配… /******************************************************/ 表格布局类似网页中的table tr td,android...中是和 TableRow中的每个控件相当于单元格,并排显示,效果不好,设置layout_width=”0dp”和设置layout_weight这个属性代表的是当前控件渲染的权重...,控件的内容如果你想剧中显示,那么设置gravity重心center 格式化快捷键 ctrl+shift+f 表格布局测试: <?

    96720

    【软件开发规范七】《Android UI设计规范》

    2.2 材质与空间 材质 ​编辑 Material Design 中,最重要的信息载体就是魔法纸片。纸片层叠、合并、分离,拥有现实中的厚度、惯性和反馈,同时拥有液体的一些特性,能够自由伸展变形。...编辑 **卡片集**是**卡片**的一个平面布局 ​编辑 即使在同一个列表中,卡片的内容和布局方式也可以不一样。 ​编辑 卡片统一带有2dp的圆角。...编辑 ​编辑 网格由单元格构成,单元格中的瓦片用来承载内容 ​编辑 瓦片可以横跨多个单元格 瓦片内容包括主要内容(primary content)和次要内容(secondary content)...网格中的单元格间距是2dp或8dp。 列表(Lists) ​编辑 列表作为一个单一的连续元素来以垂直排列的方式显示多行条目。...列表由单一连续的列构成,该列又等分成相同宽度称为行(rows)的子部分。行是瓦片(tiles)的容器。瓦片中存放内容,并且在列表中可以改变高度。 如果列表项内容文字超过3行,请改用卡片。

    5.1K20

    探讨移动端适配

    在探讨移动端适配前我们先要了解下面几个概念 像素 分辨率 物理像素 CSS像素 像素 像素(Pel,pixel;pictureelement),为组成一幅图像的全部亮度和色度的最小图像单元。...当修改图像的某区域,实际上是在修改该区域内的像素。对这些像素修改的好与坏将决定最终图片的质量。单位面积内的像素越多,图像的效果就越好。...就相同大小的屏幕而言,当屏幕分辨率低时(例如 640 x 480),在屏幕上显示的像素少,单个像素尺寸比较大。...答案是否定的,我们在css中只给盒子规定了100x100的像素,而在浏览器放大两倍后盒子变成了200x200 从这里也验证了css中的像素只是一个相对单位,浏览器在对html解析时会将css像素转换为物理像素在进行呈现...980/移动端宽度 布局视口带来的问题是 如果我们直接在网页中编写移动端代码,在980的视口下像素比是非常不友好的 也就是 1px =0.几物理像素,这样就会导致网页中的内容非常非常小 因此在编写移动端页面时

    1.4K10

    Android之布局详解

    这个布局会将它所包含的控件在线性方向上依次排列。 既然是线性排列,肯定就不仅只有一个方向,那为什么上一节中的控件都是在垂直方向排列的呢?...其实从名字就可以看出来 android:gravity用于指定文字在控件中的对齐方式,而android:layout_gravity用于指定控件在布局中的对齐方式。...他可以通过相对定位的方式让控件出现在布局的任何位置,,也正因为如此,RelativeLayout中的属性非常多,不过这些属性都是有规律可循的,其实不难理解和记忆。...android:layout_row 指定该单元格在第几行显示 android:layout_columnSpan 指定该单元格占据的列数 android:layout_rowSpan 指定该单元格占据的行数...android:layout_gravity 指定该单元格在容器中的位置 android:layout_columnWeight (API21加入)列权重 android:layout_rowWeight

    2K10

    解决安卓中XML文件声明高度 宽度无效的问题

    但是添加到ListView的时候,却发现在手机上显示的高度明显大于45dp。 image 根据图片我们可以看到,下面三个按钮显示的高度跟第一个显示的高度,差了差不多两倍多的高度。...原来原因在这里: 我们在是使用 inflater.inflate(R.layout.item_popumenu, root, attachToRoot); 来添加到父布局中,但是对于这几个参数却没有去研究...如果root不为null,attachToRoot设为true,则会给加载的布局文件的指定一个父布局,即root。 3....如果root不为null,attachToRoot设为false,则会将布局文件最外层的所有layout属性进行设置,当该view被添加到父view当中时,这些layout属性会自动生效。 4....在不设置attachToRoot参数的情况下,如果root不为null,attachToRoot参数默认为true。 其实也看得我云里雾里,但是大概知道解决的方法了。

    2.1K30

    【Android从零单排系列三十一】《Android布局介绍——TableLayout》

    前言 小伙伴们,在上文中我们介绍了Android布局RelativeLayout,本文我们继续盘点介绍Android开发中另一个常见的布局,相对布局TableLayout。...下面是TableLayout的使用方法: 在XML布局文件中定义TableLayout: <TableLayout android:layout_width="match_parent"...-- 可以添加多个TableCells --> 可以在TableCells中添加任何视图,例如TextView、Button等。...android:stretchColumns:指定要拉伸的列索引(从0开始),使其占据可用空间的比例均衡分配,默认情况下所有列都具有相同的权重。...setGravity(int gravity):设置TableLayout中所有单元格的对齐方式。 getLayoutParams():获取当前TableLayout的布局参数。

    24320

    SOLIDWORKS 基于浏览器的角色 TOP 10 增强功能

    在直观的参数化和细分建模、照片级渲染和结构仿真功能的基础上,所有数据都安全地保存在 3DEXPERIENCE 平台,3DEXPERIENCE 平台可添加无缝协同工作新角色的特性,使得设计师和工程团队能够在共享协作的工作环境下随时在设备上进行访问...•通过在 3D 和 2D 之间无缝地共享注解,在创建 2D 工程图时消除代价高昂的错误,并保持产品定义同步。•利用各种有助于在 Web 浏览器中创建工程图的简化工程图工具,提高工作效率。...05 3D 打印和嵌套优化 | 3D Creator优点:利用自动优化和嵌套,降低材料成本,充分利用您的 3D 打印机,并创建最高效的布局。•为 3D 打印装配体自动创建和优化零部件布局。...•将实体、曲面和厚度均匀的几何体转换为钣金。•自定义折弯、壁、分割、缝隙距离等,并且只需一个命令即可完成所有这些操作。...•使用迷你工具栏中的“选择折痕”,选择所有具有相同折痕的连接边线。10 厚度分析 | 3D Mold Creator优点:通过确保厚度均匀来防止缩痕,并通过验证零件是否正确填充来提高设计完整性。

    1.3K20

    Android布局优化:include 、merge、ViewStub的详细总结

    一、include的用法以及注意点 在开发Android布局时,我们常将一些通用的视图提取到一个单独的layout文件中,然后使用标签在需要使用的其他layout布局文件中加载进来,比如我们自己...这样,便于对相同视图内容进行统一的控制管理,提高布局重用性。...3,如果我们给include所加载的layout布局的根容器设置了id属性,也在include标签中设置了id属性,同时需要在代码中获取根容器的控件对象时,最好将这两个id设置相同的名称!...其实这种情况下:在主界面中,标签的parent ViewGroup与包含的layout根容器ViewGroup是相同的类型,这里都是LinearLayout,那么则可以将包含的layout...看到了吧,我们自己布局减少了一层嵌套,从而提升了UI的渲染速度。

    2.2K50

    WPF 源代码 从零开始写一个 UI 框架

    本文不会直接告诉大家 WPF 的源代码是如何写的,而是从零开始一起来写一个 UI 框架,在写的过程就会了解到为什么 WPF 可以这样写,为什么需要这样写,和 WPF 这样写的好处。...好在本文是 WPF 的源代码,而不是手把手教大家如何写一个 UI 框架,所以本文不会写三年。为什么我会询问前端的小伙伴这些问题?...框架的元素已经完成,只是在 WPF 中调用 DrawContext 也不是进行立刻绘制,是需要发送到另一个线程进行绘制,和上面使用的方法差不多。...当然本文不会考虑旋转,不规则元素和透明元素的布局。 刚才看到了画布和容器都有相同的概念,于是可以将画布和容器抽象为容器 ?...现在容器的概念已经清楚了,布局做的就是解决容器内部的元素如何排列的问题 ? 在 WPF 中有很多布局的控件,布局的控件如 Grid 等这些,实际上就是按照一定的规则排列元素 ?

    3.7K40

    应用开发进阶必经之路之性能优化(上)

    使用各种性能工具有助于快速定位问题,这比凭感觉要靠谱得多; 使用低配置的设备:同样的程序,在低端配置的设备中,相同的问题会暴露得更为明显;高配的设备很多时候会让你忽略掉性能问题; 权衡利弊:在能够保证产品稳定...这样做的优点是逻辑清晰,但缺点是耗费资源,在布局文件中将某个视图默认设置为invisable或者gone,在Inflate布局文件的时候仍然会被infalte,同样会被实例化、设置属性,但有可能默认被隐藏的视图用户在某一次操作中很可能不会去触发它...为了提高布局文件加载效率和减少额外的资源消耗,强烈建议使用ViewStub标签,ViewStub是一个用于在运行时加载布局资源、不可见、宽高为0的View,在布局文件中使用它只是用于占位,在代码中没有手动加载它时...如果默认没有去掉window的背景,并且在布局文件中给Activity设置了背景,就会存在过渡绘制的问题,具体情况可以看下面的实例: activitybackgroundlayout.xml (这里为了演示在布局文件中为每个视图设置了背景...,所以也会有多种对应的解决方案: 1、merge标签可以解决相同布局嵌套导致的过渡绘制问题; 2、ViewStub标签可以解决动态加载页面布局,避免默认加载不必要布局的问题; 3、Space标签可以解决只占位

    72320

    Android UI优化全解析

    由于前端中UI展示的特殊性和重要性,Android团队也是在不断想办法提高UI方面的渲染速度,所以也是更新了很多系统优化方案,比如: 硬件加速、黄油计划、RenderThread。...优化方案 java代码布局 我们一般都是用XML文件进行布局,但是XML解析也是很耗时的,并在这个解析过程在主线程进行。...在写xml布局文件的时候,我们要做的也有很多,比如: 减少布局嵌套。...但是dpi有可能会被人为调整(比如几部相同分辨率不同尺寸的手机的ppi可能分别是是430,440,450,那么在Android系统中,可能dpi会全部指定为480),所以还是有可能在一些设备上出现适配问题...它相对于Android其实是另外一套APP架构了,它没有基于系统本身的渲染引擎,而是app中自带Skia引擎,虚拟机也是使用的Dart虚拟机。

    1.2K40

    Gephi网络图极简教

    到了2012年,Barberán等科学家在ISME发文,通过构建土壤中微生物的网络关系来研究其共生模式(Barberán et al. 2012)。...网络直径(Diameter):网络图直径最大测量长度,即任意两点都有 1 个最短距离,这些最短距离之中的最大值即为该网络图直径。...节点设置 7.边设定 在【外观】中选择【边】Partition 渲染方式选择pn即我们数据中相关性标签;Ranking选择【度】。...厚度:根据显示需要修改边线厚度,此处改为5。 重新调整权重:打勾,根据边线权重显示不同厚度。 另外的选项可根据需要自行调整。在之前的设置中也可以通过预览来查看效果,一步一步调整。...布局与配色 Gephi 没有生成图例 参考: gephi 中文教程|视频 gephi 官网 Co-occurrence网络图在R中的实现 从《你的名字》学做“网络关系图”——Gephi篇 R||Network

    4.7K41

    Android六大布局

    的区别 为什么 XML 资源文件要从文本格式编译成二进制格式 Android 资源管理框架又是如何快速定位到最匹配资源的 LinearLayout(线性布局) 线性布局是程序中最常见的布局方式之一,线性布局可以分为水平线性布局和垂直线性布局两种...--是本元素所有子元素的对齐方式,设置在父元素上,多个值用|隔开--> android:padding="10dp" 的与父元素边缘的距离,设置在父元素上--> android:layout_marginLeft="10dp" 的列的序号,收缩是用于在一行中列太多或者某列的内容文本过长,会导致某列的内容会被挤出屏幕,这个属性是可以帮助某列的内容进行收缩,用于防止被挤出的。...Android 资源管理框架又是如何快速定位到最匹配资源的 // 主要基于两个文件: 资源 ID 文件 R.java:赋予每一个非 assets 资源一个 ID 值,这些 ID 值以常量的形式定义在

    2.6K20

    Android样式的开发:shape篇

    一般用shape定义的xml文件存放在drawable目录下,若项目没有该目录则新建一个,而不要将它放到drawable-hdpi等目录中。...line: 线形,可以画实线和虚线 ring: 环形,可以画环形进度条 rectangle rectangle是默认的形状,也是用得最多的形状,一些文字背景、按钮背景、控件或布局背景等,以下是一些简单的例子...实现上面的那些效果,都用到了以下这些特性: solid: 设置形状填充的颜色,只有android:color一个属性 android:color 填充的颜色 padding: 设置内容与形状边界的内间距...表示在正中间 android:centerY 渐变中心的相对X坐标,放射渐变时才有效,在0.0到1.0之间,默认为0.5,表示在正中间 android:gradientRadius 渐变的半径,只有渐变类型为...,默认为3,表示内环半径为环的宽度除以3,该值会被android:innerRadius覆盖 android:thickness 环的厚度 android:thicknessRatio 浮点型,以环的宽度比率来表示环的厚度

    1.9K30

    Material Design技术分享

    API,而设计规范就是官方文档中的移动设计定则,并且在不断完善中,截止到今天为止google更新了20+章的内容。   ...,每个Material 元素在 z 轴上占据一定的位置并且厚度默认只有1dp,厚度是其次,最重要的z轴是用来分层,进而实现更加有序或者更为复杂的交互设计。...二、Material 属性   Material即材料,被定义为一种有固定行为且特性不可变的实体,Material Design的设计构想亦是如此,材料的长宽随意变化,但是厚度保持均匀,即1dp。...材料能改变形状,能沿水平或者竖直方向拉长或者增高,能在环境中的任何地方自动产生或消失。 ? 三、高度   高度是针对Z轴上不同平面的相对深度或距离。高度的测量单位其实和XY轴相同,这里主要是DP。...因为所有的Material元素有一个厚度为1单位的DP,高度的度量是从一个平面到另一顶端的距离,并且子对象的高度与父对象高度相关。 ?

    2.2K60
    领券