尤其对尺寸固定的移动界面有帮助，但对响应式web设计也有帮助。 与一般的设计指南相比，此文更适合一边设计一边阅读。 代码>原型 设计软件和原型工具让你创造界面看起来最好的样子。...所以应该优先考虑在使用Sketch和Photoshop时，尽可能缩短在思考方案与编程之间的时间。...Box模型 Box模型是一种描述物体尺寸和空间的形式，其包含四种信息：边框、外边距、内边距和元素本身的尺寸。 边框 元素边边缘轮廓线的粗细。大部分的设计工具不允许其影响整体的空间和尺寸。...内边距 元素与其包含的子元素之间的空间。 外边距 元素边界与其相邻物体之间的空间。 什么是pt pt（point的缩写）是一种与屏幕分辨率相关的空间度量单位。...文本元素 像文本这样的段落元素几乎永远都是界面中最重要的部分，但是像文字尺寸和行高这些东西却不像其它元素一样，能够在保持纵向节奏和可读性的情况下，轻易地遵从界面栅格。
所以一样100px的正方形，在iPhone 4上看起来像是缩小了一倍。在iPhone 4和iPhone 6上的显示大小是一样的。...等宽； 等高； 控件和父控件的关系： 对齐水平； 对齐垂直； 左边距/右边距/顶边距/底边距； 现在APP设计开发必须考虑适配大、中、小三种屏幕。...文字流式（fluid）：屏幕变大时，保持文字大小不变，随着屏幕变大，横向拉宽文字的显示区域。 为什么要保持文字大小不变？字体不是越大越好的。...通过测试，iPhone的字体大概在20px~36px时（排除某些特殊的设计），会得到比较良好的阅读体验。保持字体大小在一定范围内，就是为了保证阅读起来比较舒服。 ?...控件弹性（flexible）：屏幕变大时，保持控件大小不变，随着屏幕的变大，横向调整控件的相对位置。相比于将控件固定在某个位置上，这种布局能更好地保持控件在页面上的平衡。
当我们同时为手机和平板适配编写 app 针对不同屏幕尺寸进行 UI 布局或当用户偏好设置较大字号或是想要最大限度等减少动画等；此时就需要 MediaQuery 来帮我们获取所用设备的信息以及用户设置的偏好信息...，屏幕中 Widget 会重新构建，以保持最新状态；我们可以通过 MediaQuery 构造函数和提供的静态方法手动设置对应的相关信息； 1....13. viewInsets viewInsets 为键盘弹出时等遮挡屏幕边距，其中 viewInsets.bottom 为键盘高度； print('键盘遮挡内边距 -> ${MediaQuery.of...14. systemGestureInsets systemGestureInsets 为手势边距，如 Android Q 之后添加的向左滑动关闭页面等； print('系统手势边距 -> ${MediaQuery.of...15. viewPadding viewPadding 和尚理解为视图内边距，为屏幕被刘海儿屏或异形屏中被系统遮挡部分，从 MediaQuery 边界的边缘计算；此值是保持不变；例如，屏幕底部的软件键盘可能会覆盖并占用需要底部填充的相同区域
在布局过程中，通过指定单元格的跨度来调节区域宽度： 响应式布局根据屏幕尺寸宽度，由小到大分为 xs、sm、md、lg、xl 五个阶层，我称之为 响应式尺阶 ，简称 尺阶。...，其中的单元格尺寸占比保持不变(如下图所示)。...比如下面在窗口宽度缩小的过程中： UI 格对应的 span 会逐阶减小，在最小阶尺寸时消失。 Toly 格会逐阶增大到 6、7 ，然后保持不变。...响应式边距 Padding$ 有时，在宽屏下希望边距打一些，窄屏中布局小一些。这就是响应式边距的需求。为了简单使用我也通过了一个 Padding$ 组件实现响应式边距的功能。...Colors.orange.withOpacity(0.6), alignment: Alignment.center, child: const Text("边距根据屏幕尺寸变化
在 iPhone 上可能看起来很好，但是在 iPad 上，它看起来非常奇怪，因为它将所有文本放在了前导边缘，并保持屏幕中央为空白。...在使用 UIKit 时，我们可以访问 readableContentGuide 布局指南。从字面上看，它是另一个安全区域，适应屏幕大小，但仅适用于文本内容。...根据水平尺寸类别的不同（正常或紧凑），我们使用 contentMargins 视图修饰符来管理水平方向上的内容边距。在紧凑水平尺寸类别下，我们将内容移动了 200 个点，以便在大屏幕设备上居中显示。...你可以在 Playground 中运行此代码以查看结果。总结本文介绍了 SwiftUI 中的内容边距管理，通过对比安全区域的概念，解释了内容边距的重要性。...文章从创建示例开始，展示了在列表视图中如何处理内容边距的问题。
由于手机机型较多，各个手机的屏幕尺寸不一样，所以做移动端页面，需要考虑在安卓和ios的各种尺寸设备的兼容问题，我们要做的 web 页面适配，就是为了在不同设备上，页面能够保持统一展示效果，或等比缩放。...375、411、320、414等，没有980那么大，所以页面被缩小了很多。...还有外边距，三个 child 始终排列在一行。...同行元素设置边框、内外边距均不影响同行排列。 还可使用 max-width、min-width 或固定宽度与 flex 配合使用，另一边可自动填充功能。...绝对单位：长度是固定的值，反应物理真实尺寸。如：px像素，一个像素相当于我们屏幕的一个小点，屏幕实际就是由很多个像素点组成的，不同显示器像素大小不同。还有cm、mm、in等等。
在LaTeX中，em、pt、mm等都是长度单位，用于定义文档中元素的尺寸，比如字体大小、页面边距、间距等。...mm, cm：适用于页面布局设计，如设定页边距、列宽等。当文档需要在多种不同的打印机或纸张尺寸上打印时，使用公制单位可以更容易地管理和预见打印效果。...in（英寸）：主要用于符合美国标准的文档排版，例如设置按美国常用纸张尺寸（如信纸）的页边距。适合在需要与设备的物理特性（如屏幕尺寸）对齐时使用。...em：适合用于定义与文字大小密切相关的尺寸，如缩进、列表项目前的空白等。在调整UI组件（如按钮和选择框）大小时非常有用，因为这样可以保持与周围文本的视觉协调。...设置文档的页边距 使用geometry包设置页面的边距时，常用单位是cm或in：\usepackage{geometry} \geometry{left=2cm, top=2cm, right
而前端开发同学在实施样式布局时，就需要能根据设计师的一张设计稿，作出适配各种不同屏幕尺寸、分辨率的效果。...2.1.1、元素分类 将元素分类为 主要元素 和 次要元素： 主要元素 页面中需要突出的重点内容，在视口尺寸发生变化引起的空间竞争中，处于优势地位； 次要元素 页面中相对不重点的内容，在视口尺寸发生变化引起的空间竞争中...2.1.3、实际视口中的元素缩放行为 当实际视口短于基准视口，主要元素大小与基准视口保持不变，次要元素按视口比例缩小； 当实际视口长于基准视口，主要元素按视口比例放大，次要元素大小与基准视口保持不变。...若元素在水平或垂直方向上，并不吸附于任意一条边，则令其相对于该方向上的两条边的距离比例固定；比如若元素同时不吸附于视口左边和右边，则元素相对于视口左边和右边的距离之比固定，值为在页面设计器中，配置页面时该元素距离视口左边和右边的距离之比...不低于 基准视口时，元素缩放比为 1，元素大小保持不变。
在高分辨率屏幕上浏览网页，如果CSS中的 1px 仍然对应于一个字面设备像素，那么甚至阅读任何内容都将非常困难，因为像素本身正在迅速缩小。毕竟，现代智能手机的分辨率甚至比高清电视还要高。...即便如此，我仍建议使用 clamp() 或媒体查询来设置最小和最大值，因为屏幕尺寸往往远远超出我们所期望或测试的范围。...如果你放大或缩小，元素的大小和距离保持相对不变。也就是说：你放大得越多，那条线就越粗，段落之间的间距就越大。 为了方便起见，这里有一张截图，显示了同一支笔的400％缩放。...请注意，这一次，行并没有变粗，段落之间的边距也没有成比例增加。只有文本本身变大了。因为边框宽度和边距都是在 px 中设置的，它们保持不变，不会缩放。...也许我们有一定的间距，我们不希望在字体大小变大时变得更大。（如果默认情况下是一个大块的负空间，也许允许它缩放到更大的尺寸是没有意义的。）
前天，在往博客上折腾B站视频时，无意间灵机一动，想到了个好主意，就是使用vw单位，配合使用calc。...因为刚刚【假设父级div就是真个屏幕】这样假设了下，实际用起来肯定是多种情况的，比如我的博客电脑端是有侧边栏的，文章的div也是有边距的，而手机端只有边距没有侧边栏。其实只需要做个数学题就好。...这里我得电脑端测栏加边距的宽度大约是330px,手机端的边距太小就忽略不算了 对应的css就是这样 @media only screen and (min-width:768px){ embed{height...16/9*/ 这样不管屏幕多奇葩，应该也能保证视频播放器尺寸16:9了哈！...如果想要其他尺寸对应的数字改一下就好了。 至于有黑边问题，这个原因有很多，视频素材比例问题？embed播放器尺寸问题？等等
手机屏幕较小，所以行间距通常比桌面版本小。设置行间距时，需要在手机端设置比桌面端小的值。过宽或过窄的行间距都会破坏手机UI界面，降低可读性。...留白 留白在设计中无处不在。留白可以带来自由和放松的感觉。手机排版留白主要包含：行间距，边距，段落空间。手机排版中的适当空间可以帮助用户更好阅读文本，提升界面美感。...当设置层次结构时，不要太过火，标题的字体大小不能太大于文本主体。最后，留白和文本部分也可以形成一种微弱的对比。 ? 7. 功能性 保持平衡美观的UI是远远不够的，功能也是同等重要的。...关键是要保持舒适清晰的边距。左中右三种方式都可以保留边距，而两端对齐在左右两侧都没有边距。此外，两端对齐文本会导致不一致的字间距，最坏的情况还会导致一行中的几个单词紧紧凑在一起。...它可能产生右边缘边距，留下空间，左对齐可以使用户的目光从一行文字连贯到下一行文字，提供一个整齐的初始点。 ? 然而，有些设计师认为混合对齐方式可以更好的实现和谐的UI。看下面的界面： ?
而且用户在桌面端搭建页面时，同时在操作的内容不仅仅是管理后台，可能会适当缩小页面宽度来做其他的事情。这样我们在页面布局时需要考虑到兼容广泛的屏幕宽度。...（1）固定卡片宽度 在页面宽度进行调整时，页面左右侧会有较大幅度的空白，没有展示具体的内容。 （2）固定卡片个数 在页面宽度过大或者宽度过小时，卡片容易放大缩小至非常夸张的比例，展示的效果欠佳。...2、自适应方案分析 下面简要阐述三种自适应栅格方案各自的使用场景，和优缺点分析： （1）自适应卡片方案 通过固定页面边距和卡片边距的尺寸来计算出卡片宽度，该方案的优点是整体框架稳定，卡片自适应伸缩。...（2）自适应内边距方案 通过固定卡片边距和卡片宽度的尺寸来计算出页面边距，该方案的优点是，卡片展示内容整体居中，卡片宽度也不会有变化，卡片内部可以严格还原设计稿；但缺点是，卡片内容在大屏内会显得太小，但是在小屏上会显得很大...（3）自适应边距方案 通过固定页面边距和卡片宽度的尺寸来计算出卡片边距，该方案的优点是，页面左右两侧不会有太大的空白区域，卡片宽度也不会有变化，卡片内部可以严格还原设计稿；但缺点是卡片边距会动态调整，这种场景中卡片直接的距离往往比较大
定义了一个 .row 类以设置行的负边距。 此外，我们还定义了一个 .col 类，该类是我们网格系统的构建块。我们使用浮动(left)属性来让列按预期方式对齐。...使你的网站响应式 一个好的CSS网页布局框架应该是响应式的，这意味着你的网站能够适应不同的屏幕尺寸和设备。为了实现响应式网站，我们需要使用媒体查询。...33.33333%; } } @media only screen and (max-width: 767px) { .col-xs-6 { width: 50%; } } /* 在小屏幕上使图片缩小...第一个媒体查询在768px宽度以下的屏幕上隐藏了具有 .slide 类的元素。第二个媒体查询将 .container-fluid 类更改为 .container 类以适应小屏幕并增加外边距和内边距。...第三个媒体查询更改了 .col-md-4 类为 .col-xs-6 类以适应小屏幕，并使图片在小屏幕上缩小。 其他设计考虑因素 除了上述提到的设计指南外，还有一些其他的设计考虑因素。
（元素空间尺寸） element空间高度＝内容高度＋内距＋边框＋外距 element空间宽度＝内容宽度＋内距＋边框＋外距 内盒尺寸计算（元素大小）...element高度＝内容高度＋内距＋边框（height为内容高度） element宽度＝内容宽度＋内距＋边框（width为内容宽度） * IE盒模型 外盒尺寸计算（元素空间尺寸...留下自适应的空间：和两列布局类似，一列固定宽度 另一列随屏幕自适应。 (类似的思路，在屏幕顶部 给logo固定宽度 logo右侧的纯色背景 可以自适应)。...既然不同设备的屏幕尺寸不一样，那么网页中的文字 也应该是不一样的，此时 可以采用等比例的方式 来自适应屏幕。 2....* 适配页面的viewport(页面的宽度 要和 移动端的宽度 适配，否则页面 在移动端上 会缩小，也就是一定要加viewport) * rem/viewport/media query
图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。...外边距重叠 块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。...绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。...元素的位置在屏幕滚动时不会改变。...常用取值： auto：flex: 1 1 auto none：flex: 0 0 auto 14.响应式布局 media查询 当屏幕宽度满足特定条件时应用css。
新特性 相对于传统布局，ConstraintLayout在以下方面提供了一些新的特性： 相对定位 外边距 居中和倾向 可见性的表现 尺寸约束 Chain 辅助工具 接下来就这些新特性进行详细了解...下面这段代码就是让左边占30%，右边占70%（默认两边各占50%），这样左边就会短一些，如图5所示，此时代码是这样的： ? 通过设置倾向，可以非常便捷地实现屏幕适配。...ConstraintLayout中，GONE控件尺寸仍然按其可见时的大小计算，但是其外边距大小按0计算 ?...关于目标控件（如图 6中的A）设置为GONE时，受约束的控件（如图 6中的B）的外边距的变化设置请查看上面的外边距小节的GONE MARGIN属性。 ?...Chain外边距 如果连接时定义了外边距，Chain就会发生变化。在SPREAD CHAIN中，外边距会从已经分配好的空间中去掉。原文如下： ?
一般来说手机竖持时屏幕宽度约为 360dp，也就是说，在约为 320dp 的范围内，用户的滑动操作不受影响 (占总宽度的近 90%)。...因此，除了直接修改视图的边距，我们还可以修改布局，以避免出现空间浪费: △ 将进度条移到视图的顶部 在这里，我们将进度条移到了播放控件的顶部，完全移出了手势交互区域。...而且这样做还使得我们不再需要额外插入太多无用的边距。...注意是在整个设备上，而不仅仅是在一个应用中保持一致性。这个限制看似严厉，但如果一个应用能够让屏幕的整个边缘都不响应系统手势，就会让用户感到困惑，这个应用也极有可能被用户卸载。...正如我们前面提到的，手势区域排除 API 只有在万不得已的情况下才可以使用，因此我们计算了可能需要应用这套机制的触摸对象的面积。触摸对象的最小推荐尺寸是 48dp。
但到了iphone6 plus上，屏幕宽度变成414，按钮的左右边距就变成20和114，显得不对称。...在适配时，根据UI需要，此时可能会增加按钮宽度，改成20+374+20；也可能增加左右边距，改成67+280+67；也可能两者都增加，例如改成26+362+26，使得按钮宽度保持屏幕宽度的7/8。...，在320宽的屏幕下是20，在iphone6 plus屏幕上就是20 / 320 * 414=26 button_margin3: 20 EqualDifference 320; 表示在不同设备下做等差缩放...这样会导致左侧头像在cell中显得太小，于是头像的宽高也要随之放大，头像上的红点也要跟着放大，……，最终整个界面很多元素（字体、宽高、边距等）都需要放大。 ? ? ? ? ? ?...具体操作是：每个机型设五档字体，设计师确定各机型上每档字体的放大比例，开发写界面时，把字号大小、宽高、边距等值写到配置文件里，并指定这些值是否要随字体设置等比缩放。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
