文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么你永远不应该在CSS中使用px来设置字体大小

在Josh Collinsworth的博客文章“永远不要用px作为字体大小”中，作者讨论了为什么不应该使用像素（px）作为网页字体大小的单位[1]。...通过使用相对单位，设计师可以确保网站在不同设备和浏览器中以合适的字体大小显示[1]。 下面是正文： 在 Web 开发领域中，有很多误解流传，即使它们被反驳了很多次也仍然存在。"...在我们讨论为什么应该避免使用 px 作为 font-size 之前，让我们确保我们都清楚我们正在谈论哪些单位，以及它们的一般行为。...现在让我们回答为什么使用哪个单位很重要。 为什么这一切都很重要 再次强调的误解是：既然 1em 和 16px 相等，那么选择哪个单位并不重要。...简而言之：在媒体查询中，除非您确定自己知道在浏览器中设置自己的字体大小会对用户产生什么影响，否则一定要避免使用 px 。

1.8K20

【约束布局】ConstraintSet 约束集 ( 简介 | 约束属性集合 | 约束集初始化 | 约束集应用到布局中 | 关键帧动画 | TransitionManager 使用 )

获取约束集 : 从 约束布局 ( ConstraintLayout ) 中 , 可以获取 约束集 ( ConstraintSet ) , 约束集可以从当前现有组件中获取 , 也可以从布局文件中获取 ,...从布局中拷贝 ConstraintSet 约束集 数据 : ① 从 约束布局文件 中拷贝约束集 : void clone(Context context, int constraintLayoutId)...ConstraintSet 约束集 应用到 约束布局 ConstraintLayout 中 ---- ConstraintSet 约束集 应用到 约束布局 ConstraintLayout 中 : ①...传统属性 与 约束属性 : 这里将属性分为 传统属性 ( Custom Attributes ) , 约束属性 , 约束属性是只有在 约束布局中使用的属性 , 其它的非约束属性就是传统属性 , 如 宽高...( 非传统属性 ) 应用到约束布局中 ; V .

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

    Constraintlayout约束布局三问

    Constraintlayout——约束布局，作为Jetpack的一个组件推出。今天的面试三问就是关于布局的： 说说constraintlayout的主要特性，为什么会设计出这一种布局？...说说你所了解的constraintlayout属性 以及这些属性的用法 说说constraintlayout的主要特性，为什么会设计出这一种布局？...ConstraintLayout名字叫约束布局，跟RelativeLayout相对布局有点像，主要使用约束的方式来指定各个控件的位置和关系，但是又远远比RelativeLayout强大。...="parent" android:layout_width="match_parent" android:layout_width="0dp" 在父布局中按比例显示 app:layout_constraintHorizontal_bias...="0.3" 通过该属性可以设置在父布局中显示的位置，按比例显示，比如0.3就代表在3/10的位置。

    1.6K10

    项目需求讨论 — ConstraintLayout 详细使用教程

    题外话 关于ConstraintLayout的文章网上一抓一大把，而且ConstraintLayout在16年就已经出来了，但是我一直没有试着去使用(别问我为什么不去使用,当然是因为懒啊)。...正文 控件如何确定自己的位置 1.直接确定控件左上角的坐标 在约束布局中，一个控件如何来确定自己的位置呢，有人可能说直接写死让它在界面的（XXX,XXX）位置不就好了么。...WRAP_CONTENT，它会要求控件计算自己的大小 使用0dp，相当于“MATCH_CONSTRAINT” WRAP_CONTENT（在1.1中添加） 如果设置为WRAP_CONTENT，则在1.1之前的版本中...但是在某些情况下，您可能需要使用WRAP_CONTENT，但仍然执行约束来限制生成的尺寸值。...我们把刚才定义的模版include到真正的布局文件中，并且在这个布局文件中添加真实的控件，注意这里的控件无需添加任何约束，因为它们的位置是由Placeholder决定的。

    1.7K20

    强烈建议！让你的团队强制推行ConstraintLayout！

    为什么推荐使用ConstraintLayout ConstraintLayout（约束布局）在2016年的Google I/O大会上就推出来了，经历这两年的迭代，功能已经非常的成熟了。...一次偶然的机会，在项目中尝试了使用约束布局，从此被它的功能所深深折服。它能很轻易的将你从使用层层的嵌套去实现复杂的布局中解放出来。...所以相信我，使用过就会爱上它。 约束布局的终极奥义！ ① 如何才能使用？...RelativeLayout中的toLeftOf或者toRightOf等属性，约束布局同样提供了一套类似的属性。...据统计，使用约束布局替代以前的嵌套结构可以提升40%的速度。如果你嵌套的层次越多，提升的效果越明显。

    93130

    Android 约束布局ConstraintLayout1.1.0 版详解

    需要使用到的属性有： app:constrainedWidth="true|false" app:constrainedHeight="true|false" 下面的例子演示了没有设置强制约束和设置了强制约束的对比...Margins and chains 在 1.1.0-beta4 版本中（已知），为链中的控件设置 marginRight/End 是无效的（个人感觉这应该是个 Bug）。...可设置的值有： none：不应用优化。 standard：仅优化直接约束和屏障约束（默认的）。 direct：优化直接约束。 barrier：优化屏障约束。 chain：优化链约束（实验）。...在设置值时，可以设置多个，如： app:layout_optimizationLevel="direct|barrier|dimensions" Barrier 当我们在布局时，有时候就会遇到布局会随着数据的多少而改变大小的情况...目的就是辅助布局。 对 Barrier 可以使用的属性有： barrierDirection：设置 Barrier 所创建的位置。

    1.1K40

    View绘制流程

    View 树的绘图流程 当 Activity 接收到焦点的时候，它会被请求绘制布局,该请求由 Android framework 处理.绘制是从根节点开始，对布局树进行 measure 和 draw。...比如，父视图可以先根据未给定的 dimension 去测量每一个子视图，如果最终子视图的未约束尺寸太大或者太小的时候，父视图就会使用一个确切的大小再次对子视图进行 measure。...有时我们需要使用 view.getLayoutParams() 方法获取一个视图 LayoutParams，然后进行强转，但由于不知道其具体类型，可能会导致强转错误。...View 中默认是空实现，ViewGroup 复写了dispatchDraw()来对其子视图进行绘制。该方法我们不用去管，自定义的 ViewGroup 不应该对dispatchDraw()进行复写。...，除了被ViewGroup.drawChild()方法外，你不应该在其它任何地方去复写或调用该方法，它属于 ViewGroup。

    84150

    Android-ConstraintLayout详解

    基本用法 基本用法之可视化编写布局文件   在高版本的studio中默认采用constraintLayout布局，中间有一个textview,我们选中，delete删除.开始一个新的布局编辑。...： 删除某个页面全部约束_腾讯视频 3.Inspector使用 3.1....，这是因为google在constraintlaout布局已经不推荐match_parent属性了，需要手敲，且与之前的结果不一样。...4.Guidelines用法： .Guidelines的使用_腾讯视频 从视频中可以看到，我们从上面的工具栏拖拽了一个垂直和水平的guidelines辅助线，然后默认单位是dp，我点击辅助线的前端设置为百分比...我为什么设置odp呢？应为0dp就代表MATCH_CONSTRAINT的写法，我们代码中的意思就相当于我不设置宽了，让它根据我的约束自适应大小，那我在设置一下match_parent,看看效果： ?

    1.8K10

    【约束布局】ConstraintLayout 组件可见性 View.GONE 处理 与 Margin 属性 ( 约束布局可见性处理 | goneMargin 属性 )

    可见性改变后的行为处理 ( Visibility Behavior ) 约束布局 组件 可见性说明 : 1.讨论情况 : 约束布局中 , 当组件被设置成 View.GONE 可见性时 , 针对该组件的处理方式...; 2.通常处理方案 ( 其它布局 ) : 被设置成 View.GONE 属性的组件 , 一般情况下进行如下处理 : ① 取消显示 : 首先其先取消显示 ; ② 布局移除 : 然后将该组件从布局中移除...; ③ 尺寸不变 : 但组件的实际的尺寸不会被修改 ; 3.约束布局消失的组件处理方式 : ① 取消显示 : 该组件消失 , 不可见 ; ② 布局保留 : 该组件仍然是布局中的一部分 ; ③ 尺寸修改...组件设置 GONE 属性示例 组件设置 GONE 属性 改变示例 : 1.布局示例 : 该布局中 , 含有约束组件和被约束组件 , 代码如下 : <?...: 7.组件设置 GONE 属性后的说明 : ① 可见性与宽高 : 目标组件仍然在布局中存在 , 只是变成了一个点 , 宽高变成 0 , 不可见 ; ② 约束存在 : 目标组件的约束仍然有效

    1.6K30

    ConstraintLayout使用场景必知必会

    早在2016年，我就已经逐渐将项目中的布局进行约束化，采用ConstraintLayout来替换原有布局，同时对ConstraintLayout的基础使用，进行了总结，感兴趣的入门开发者可以参考下面的文章...百分比对齐 在ConstraintLayout中，虽然不能使用-margin的方式来完成传统布局中的一些错位的效果，但是可以借助Space来实现类似的功能，例如借助Space来实现左边TextView在右边...image-20201231144005478 多组件协同约束 考虑下面这个场景，多个组件的宽度不定，需要取最大宽度的组件在布局中展示，例如下面这个例子。...容器约束下的边界约束 考虑下面这个场景，中间的TextView被约束在两边的组件中，如下所示。 ? image-20201231145935870 布局基准元素，一般是界面的固定不变的业务元素，其它组件，根据其约束来进行布局 使用Group等虚拟布局组件来简化布局代码 对ConstraintLayout的特性需要掌握熟练，特别是上面这些场景，需要手到擒来

    1.3K20

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

    前言 小伙伴们，在上文中我们介绍了Android帧布局FrameLayout，本文我们继续盘点介绍Android开发中另一个常见的布局，约束布局ConstraintLayout。...开发者可以使用约束条件（如layout_constraintLeft_toLeftOf、layout_constraintTop_toTopOf等）来定义视图与其他视图或边界的关系，从而精确控制视图在布局中的位置和大小...完善布局：根据设计需求，继续设置其他视图的约束条件，以达到期望的布局效果。可以使用app:layout_constraint...属性来设置各种约束条件，如边界对齐、居中对齐、权重比例等。...可以使用match_parent（填充父容器）或具体数值。 layout_height：设置视图的高度。可以使用match_parent（填充父容器）或具体数值。...开发者可以使用约束条件（如layout_constraintLeft_toLeftOf、layout_constraintTop_toTopOf等）来定义视图与其他视图或边界的关系，从而精确控制视图在布局中的位置和大小

    45720

    ConstraintLayout约束控件详解

    一种构建于弹性Constraints（约束）系统的新型Android Layout，最终你将会在Android Studio中编辑与构建一个相对复杂的Layout。...简单来说，她是相对布局的升级版本，但是区别与相对布局更加强调约束。何为约束，即控件之间的关系。 来看一张google给出的一张案例效果： ?...灯泡图标：用来自动推断约束条件的东西，运用这个可以更加智能快速的完成布局。 约束 为了更好的理解约束，下面来看一些源于谷歌案例： ?...如果需要清理掉单个约束，点击该圆点即可。 ? 基线手柄 该手柄仅仅出现在有文字的控件中使用，或者继承TextView的控件中使用，其作用是对齐两个控件的文字基线。...google使用案例 1.首先选择一个约束手柄，并按住鼠标拖动到另外一个控件的手柄原点上，当链接线变成绿色的时候松开鼠标即可创建一个约束。 ?

    1.2K50

    【翻译】MotionLayout实现折叠工具栏（Part 1）

    在这里我特意使用了最基本的 View 控件类型，用来说明视图本身并没有产生任何其他的行为动作。当然在实际 App 开发过程中我应该会使用 AppBarLayout 布局配合 Toolbar 控件吧。...它包含两个 ConstraintSet ，每个 ConstraintSet 又定义了一套相关约束，这套约束体现为布局的一个固定的状态，这个我们会在后面深入探讨，目前我们只需要知道：有一个 ConstraintSet...元素 OnSwipe 把过渡动画和用户在 RecyclerView 上的拖拽操作绑定到了一起，也就是之前我们查看到的主布局中的列表。...中的任何一个属性，也可以是 View 中的任何一个属性，但即使像 ImageView 这类作为 View 的子类控件，我们仍然需要使用一个 CustomAttribute 符号，这里实际上和 ObjectAnimator...如果我们使用该布局来代替一开始我们就使用的 CoordinatorLayout 布局来实现，那么我们将会得到这样的行为： ?

    2K31

    强大的ConstraintLayout：使用ConstraintLayout打造响应式UI

    尝试使用 RelativeLayout 优化 在Android系统提供的基础布局控件，最灵活的当属RelativeLayout相对布局。...最终笔者只能在布局中定义了3个竖向排列的布局区域，接着在代码中，注册(addOnLayoutChangeListener)布局改变监听(OnLayoutChangeListener)，当布局有变化时(onLayoutChange...约束布局的核心是确定约束，约束布局的灵活性来自于约束参考物，约束参考物，除了父布局、约束布局提供的辅助标记，添加到布局内的控件，也是可用的约束参考物，尤其是已经确定了位置的控件。...稍微调整了一下布局： 将原先的1:1中部控件，调整为不可见（避免影响绘制性能），作为确定头部和底部的辅助约束物； 新增一个控件，此控件的top紧贴头部的bottom、此控件的bottom紧贴底部的top...Barrier的这个特性，恰好可以用来做聚合多个控件，并作为单一的约束参照物来使用。

    3K21

    还在用Android正经布局来写页面吗？

    ConstraintLayout布局出来已经很久了，刚出来那会儿就想尝试一下的，结果半天都没适应，前两天看到一篇ConstraintLayout实战的文章，看完之后发现这布局贼鸡儿好用啊，日常开发中的大多数布局使用它都可以完成...6、尺寸约束 在ConstraintLayout布局中，你可以设置布局的最大和最小尺寸，而且你可通过三种方式来设置控件的大小： 特定数值，比如123dp 使用wrap_content，控件将自己计算大小...使用0dp，相当于`MATCH_CONSTRAINT` 注意：match_parent官方不建议在ConstraintLayout布局中使用，可以通过设置MATCH_CONSTRAINT（真实数值是0dp...）配合约束来定义布局 下面我们来看一个例子： ?...ButtonB覆盖了，显然这不是我们需要的，这时候MATCH_CONSTRAINT的作用就能体现出来了，怎么理解这个MATCH_CONSTRAINT，我们可以理解成为了配合约束布局而代替了match_parent

    1.3K30

    【约束布局】ConstraintLayout 约束布局 ( 简介 | 引入依赖 | 基本操作 | 垂直定位约束 | 角度定位约束 | 基线约束 )

    , 其 解决了 开发 复杂布局 , 出现的布局嵌套过多问题 , 减少了界面绘制的时间 ; 2.意义 : 使用 ConstraintLayout , 视图层级会变得非常精简 , 并在 Android Studio...是专门针对 ConstraintLayout 的属性进行开发的 ; 因此可以完全使用拖控件的方式 进行 布局编辑 , 代替之前的 XML 编辑方法 ; ( 官方这么说的 , 感觉纯属扯淡 , 不看代码不放心...约束 简介 ( 1 ) 约束个数要求 ConstraintLayout 布局中 单个组件 约束个数要求 : 1.约束要求 : 在 ConstraintLayout 中 设置 View 的位置 , 至少为...都是有多个约束 ; ( 2 ) 约束设置 与 显示位置 约束设置 与 显示位置 : 1.编辑器位置 : 向布局编辑器中拖入 组件 , 如果不为其设置约束 , 他就会呆在鼠标松开的位置 ; 2....因为 C 组件没有垂直方向的约束 ; 4.约束错误信息 : 尽管 组件 缺少一个约束 , 不会引起编译错误 , 但是 布局编辑器中 会在工具栏中 显示 “missing constraints

    5.9K41

    【Android 屏幕适配】屏幕适配通用解决方案 ⑦ ( PercentRelativeLayout 百分比布局方案 | 该布局已废弃本方案仅做参考 )

    文章目录 一、PercentRelativeLayout 百分比布局方案 二、将输出结果设置到组件标签中 参考文档 : 设备兼容性概览 屏幕兼容性概览 支持不同的像素密度 声明受限屏幕支持 约束布局 bias...计算公式参考 【约束布局】ConstraintLayout 偏移 ( Bias ) 计算方式详解 ( 缝隙比例 | 计算公式 | 图解 | 测量图 + 公式 ) 方案 ; 约束布局 百分比 屏幕适配案例参考...【约束布局】ConstraintLayout 屏幕适配案例 ( 使用代码生成约束布局控件属性 ) 博客 ; 约束布局百分比布局完整方案参考 【Android 屏幕适配】屏幕适配通用解决方案 ⑥ ( 约束布局...ConstraintLayout 百分比布局方案 | 将设计稿尺寸自动转为约束布局百分比标签属性 | 将输出结果设置到组件标签中 ) 博客 ; 一、PercentRelativeLayout 百分比布局方案...---- 使用如下程序 , 输入 PercentRelativeLayout 布局的 宽度 , 高度 // 给出中心点坐标,图片宽高,屏幕宽高,计算出该图片的位置 // 屏幕宽高 float

    29620
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券