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

前端基础知识概述 -- 移动端开发的屏幕、图像、字体与布局的兼容适配

根据维基百科及其参考文献,理论上,响应式界面能够适应不同的设备。.../部分显示的内容:如在电脑上显示的的大段描述文本,在手机上就只能少量显示或全部隐藏 能自动折叠的导航和菜单:展开还是收起,应该根据页面尺寸来判断 放弃使用像素作为尺寸单位:用dp(对于前端来说,...font size of the element)的区别是,em 是根据其父元素的字体大小来设置, rem 是根据网页的跟元素(html)来设置字体大小。...完整的一个字体资源实在太大了,所以我们应该尽可能的使用用户设备上已有的字体,不是额外去下载字体资源,从而使加载时间明显加快。...从展示效果层面来说,使用系统字体能更好的与当前操作系统使用的相匹配,得到最佳的展示效果。

3.1K32

理想的viewport(视口)并不存在

你可能会推测这些都是移动设备——特别是前10个——但也值得考虑的是,视口尺寸也会因环境条件而有所不同。 即使在同一款iOS设备上,基于操作系统状态,一个网站至少也可能出现在3种不同的环境中。...你可能会觉得“800px对于桌面端来说太小了”,如果我们是在测量屏幕尺寸,你是对的。但我们这里测量的是视口尺寸。视口是浏览器窗口的尺寸,不是屏幕尺寸。...如果你正在桌面设备上阅读这篇文章,有多少窗口占满了整个屏幕?你正在阅读的浏览器占据了多少屏幕空间? 最安全的假设是,桌面或笔记本设备上的用户不会让浏览器占满整个屏幕。...即使是平板用户也不会让浏览器填满整个屏幕,因此在考虑更大视口设计时,请务必考虑这一点——尤其是如果你为小屏幕隐藏内容,而为“桌面用户”显示内容时。...问问自己,是否真的需要为小屏幕隐藏内容不是为大屏幕,意味着这些内容真的像你最初认为的那样必要。 还要考虑“桌面端”视口尺寸的极度碎片化。

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

    最新iOS设计规范七|10大视觉规范(Visual Design)

    iOS是运行于iPhone、iPad和iPod touch设备上、最常用的移动操作系统之一。作为互联网应用的开发者、产品经理、体验设计师,都应当理解并熟悉平台的设计规范。...请勿尝试通过在屏幕顶部和底部放置黑条来隐藏设备的圆角、传感器外壳或用于访问主屏幕的指示器。也不要使用诸如括号、边框、形状或说明文字之类的视觉装饰来引起对这些区域的特别注意。 注意状态栏的高度。...它只在可以换取附加价值的时候才隐藏起来。 允许自动隐藏指示器以防误点入主屏幕。启用自动隐藏后,如果用户几秒钟未触摸屏幕,指示灯就会淡出。当人们再次触摸屏幕时,它会重新出现。...自然精致的融合,不张扬。用户是用你的APP来娱乐、获取信息或完成任务,不是观看广告。为了获得最佳体验,请将你的品牌巧妙地融入到APP的设计中。...例如,如果在不是很关键的其他地方使用红色时,那么警告用户关键问题的红色就会变得不是那么有效。 在APP中使用互补色。APP中的颜色需要很好地协同工作,不是冲突或分散注意力。

    8K30

    Windows 10内部的23个隐藏技巧

    微软的Windows操作系统不是一回事。它是在其他功能之上构建的功能交织在一起的拼凑而成的功能,这些功能可以追溯到经过时间考验的操作系统的开始。...抓住任何窗口并将其拖动到一侧,它将“适合”到屏幕的一半。在Windows 10中,您可以选择将窗口拖动到任何角落,以使窗口占据屏幕的四分之一不是一半。...就像 macOS Mojave的 屏幕捕获工具一样,但是具有附加的数字墨水功能。 隐藏的游戏栏 ? 使用Windows键-G 命令,您可以拉起经过改进的新游戏栏。...它们为您的操作系统提供最新功能,安全修补程序等。但是有时您只希望Windows让您独自一人,不会出现那些不断弹出的窗口。...它们为您的操作系统提供最新功能,安全修补程序等。但是有时您只希望Windows让您独自一人,不会出现那些不断弹出的窗口。

    4.2K30

    移动端避免使用100vh

    如果要设置元素的样式以占据整个屏幕的高度,则可以设置height: 100vh,您拥有一个完美的全屏元素,该元素会随着视口的变化调整大小!可悲的是,事实并非如此。...核心问题是移动浏览器(我正在为您浏览,Chrome和Safari)具有“帮助”功能,其中地址栏有时可见,有时隐藏,从而改变了视口的可见大小。...当显示地址栏时,由于移动浏览器错误地将100vh设置为屏幕高度没有显示地址栏,因此屏幕底部被切断。在上图中,应隐藏屏幕底部的按钮。...更好的解决方案:window.innerHeight 解决此问题的一种方法是依靠javascript不是CSS。...无论地址栏是否可见,屏幕都将是视口的高度。此外,通过在页面首次加载时将高度锁定在适当的位置,可以防止地址栏隐藏在使用该网站的过程中,从而带来尴尬的屏幕调整大小体验。

    1.8K20

    移动端避免使用100vh

    如果要设置元素的样式以占据整个屏幕的高度,则可以设置height: 100vh,您拥有一个完美的全屏元素,该元素会随着视口的变化调整大小!可悲的是,事实并非如此。...核心问题是移动浏览器(我正在为您浏览,Chrome和Safari)具有“帮助”功能,其中地址栏有时可见,有时隐藏,从而改变了视口的可见大小。...如下所示: 当显示地址栏时,由于移动浏览器错误地将100vh设置为屏幕高度没有显示地址栏,因此屏幕底部被切断。在上图中,应隐藏屏幕底部的按钮。...更好的解决方案:window.innerHeight 解决此问题的一种方法是依靠javascript不是CSS。...无论地址栏是否可见,屏幕都将是视口的高度。此外,通过在页面首次加载时将高度锁定在适当的位置,可以防止地址栏隐藏在使用该网站的过程中,从而带来尴尬的屏幕调整大小体验。

    2K20

    响应式设计

    通过使用几个关键技术,根据用户浏览器视口的大小(或者屏幕分辨率)让内容有不一样的渲染结果。这种方式不需要分别维护两个网站。只需要创建一个网站,就可以在智能手机、平板,或者其他任何设备上运行。...如果一开始就设计一个包含全部交互的网站,然后再根据移动设备的限制来制约网站的功能,那么一般会以失败告终。 移动优先的方式则会让你设计网站的时候就一直想着这些限制。...首先,它告诉浏览器当解析 CSS 时将设备的宽度作为假定宽度,不是一个全屏的桌面浏览器的宽度。其次当页面加载时,它使用 initial-scale 将缩放比设置为 100%。...这样就可以根据屏幕大小定制样式。可以针对小屏设备定义一套样式,针对中等屏幕设备定义另一套样式,针对大屏设备再定义一套样式,这样就可以让页面的内容拥有多种布局。...max-width 是用来排除某些规则的方式,不是一个常规手段。

    2K10

    Linux系统(一)- 指令学习1

    根据运行的环境,操作系统可以分为桌面操作系统,手机操作系统,服务器操作系统,嵌入式操作系统等。...对于一台计算机来说,其组成可分成四部分: 应用软件、操作系统设备驱动、硬件; 操作系统是一款管理软件,管理着软件和硬件资源,操作系统并不直接管理底层的硬件,而是通过驱动层间接管理硬件;...绝对路径和相对路径都可以标识寻找文件,只不过通过绝对路径寻找文件一定不会出错,相对路径寻找文件只能在当前目录下有效; 路径+文件名具有唯一性; 绝对路径的缺点是往往绝对路径很长,书写不方便;相对路径相对而言会方便书写...--- 用户管理 - 增加用户并设置密码 增加新用户 adduser [new_user_name] 设置密码 passwd [new_user_name] 这里的密码并不会显示在屏幕上...开头的隐含文件 -d 将目录象文件一样显示,不是显示其下的文件。 如: ls –d 指定目录 -i 输出文件的 i 节点的索引信息。

    79410

    如何解决 Adobe Photoshop 安装失败问题?

    5.转到设备上下载的文件,然后双击该文件。 6.登录以开始安装。然后按照屏幕上的说明进行操作。 安装 Creative Cloud 桌面应用程序后,它自动启动。...根据您的要求,在显示的 Adobe 正版服务同意对话框中接受或拒绝。...解决方案 注意:对于 macOS 用户,当您尝试在以 HFS+ 区分大小写的文件系统格式化的驱动器上进行安装时,可能会出现此错误。...WINDOWS 注意:以下步骤需要导航到隐藏文件夹。请查看此说明以访问隐藏的文件夹:显示隐藏的文件、文件夹、文件扩展名。 注意:以下文件夹位置适用于 32 位 Windows。...在 64 位操作系统上,请使用“Program Files (x86)”,不是“Program Files”。 1.选择“开始”>“控制面板”。

    4.9K30

    Linux入门(一)

    驱动 驱动程序全称设备驱动程序,在电脑的设备管理器中可以查看到。这是一种添加到操作系统中的特殊程序,其中包含有关硬件设备的信息,此信息能够使计算机与相应的设备进行通信。...操作系统控制硬件并不是直接访问硬件,而是通过访问驱动程序来控制硬件。一款优秀的操作系统,是设备运行的根本,你也不想一把游戏电脑重启两三次再黑屏好几次把。...-d 将目录象文件一样显示,不是显示其下的文件。 如: ls –d 指定目录 -i 输出文件的 i 节点的索引信息。 如 ls –ai 指定文件 -k 以 k 字节的形式表示文件的大小。...其实空文件也是要占磁盘空间的,因为空文件只是说明文件的内容是空的,但文件属性一定不是空白的,所以一个文件的真实大小其实是要大于显示的大小。...根据树的定义我们知道一个节点可以有零个到多个子节点,却只有一个父节点。也就是说,从根目录开始到一个文件的路径是唯一的。

    1.1K00

    第134天:移动web开发的一些总结(二)

    img{ max-height: 100% } 设计点三:重新布局,显示与隐藏 当页面达到手机屏幕宽度的时候,很多时候就要放弃一些传统的页面设计思想。...关于响应式设计的思考: 根据响应式设计的理念,一个页面包含所有设备不同屏幕的样式和图片,当一个移动设备访问一个响应式的页面,就会下载pc,笔记本,ipad等不同设备对应的样式。...border:0.5px;(错误),仅仅ios8可以使用 通用方案:scaleY(0.5) (3) 相对单位rem 为了适应各大屏幕的手机,px略显固定,不能根据尺寸的大小改变,使用相对单位更能体验页面兼容性...因为字体的大小是趋向于阅读的实用性,并不适合于排版布局。 同理,趋向于一些固定的元素的特性。我们不使用rem改为使用px去确保在不同屏幕上表现一致(跟rem的目的相反)。...④ 上拉加载:使用scroll事件,不是touch事件(android有bug) (4) Canvas & GPU render【GPU 渲染】 优化技巧: canvas代替img标签 drawImage

    1.8K10

    带有桌面和推荐软件的 Raspberry Pi OS免费下载

    ID 不是名称来应对掉电时设备的变化 * lxinput - 删除对 openbox 配置文件的冗余更改 * plymouth - 将 KillMode 设置为混合以抑制警告消息 * raspi-config...,不是系统突出显示颜色 * 旧相机应用程序和库重新安装(仅限 32 位) * 错误修复 - lxinput - lxsession 配置文件未在第一次尝试时写入 * 错误修复 - lxinput...* GTK+3:增加了在窗口上请求客户端装饰的能力 * GTK+3 : 添加自定义样式框架标签的缩进设置 * 在具有 2GB 或更多 RAM 的设备上使用 mutter 窗口管理器不是...输出设置不是 PulseAudio 设置 * 错误修复 - 在多通道设备上使用时 PulseAudio 音量控制器崩溃 * 错误修复 - 电池监视器无法在 x86 平台上加载 * 错误修复...* 更改为通知弹出窗口 - 现在只会在直接点击时关闭,不是通过点击任意位置 * 书架现在与书籍和杂志的翻译版本兼容,并将根据系统语言设置在可用的情况下提供翻译版本 * 错误修复 - 节流检测失败时

    2.1K20

    Web正文字体发展简史

    显然,这是一种设计选择,我认为(类似于Trent Walton 所描述的那样),笔记本电脑和台式机使用的预期效果是,读者向后倾斜,并使其面朝屏幕不是朝向屏幕。...这种设计可以吸引您的时间,不是浏览文本。 虽然这种设计可以在较小的屏幕(尤其是智能手机和平板电脑,在我的测试中)上提供良好的阅读体验,但我发现在较大的屏幕上很难。...然后,根据我使用的字体、我想要的外观以及我在各种设备上测试的结果,我调整这些值。 对于我们一直在追逐设备制造商,操作系统和浏览器开发人员,并试图每两年调整字体大小以适应市场上的情况,我也感到难过。...根据屏幕宽度稍微增加字体大小的概念很容易引起人们的注意。...但只有在硬件制造商、操作系统和浏览器开发人员都为实现这一目标合作的情况下,才能遵循这一规则。

    1.1K10

    网页布局的几种方式有哪些_做网页建议用哪种布局

    改变屏幕分辨率可以切换调用相应的布局(页面元素位置发生改变大小不变),但在每个静态布局中,页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。   ...然后 CSS 代码不能使用绝对大小,即不能指定像素 px 宽度,只能使用相对大小 em 或者 %百分比、rem等。...要匹配足够多的屏幕大小,工作量不小,而且页面中会出现隐藏元素的操作,这样代码就比较冗余,加载时间加长,此外设计也需要多个版本。...自适应对页面的屏幕适配实在一定的范围,比如:pc 端 > 1024px; 平板 768 ~ 1024px; 手机端 < 768px; 响应式是一套页面同时兼容在 pc 端、平板和手机端的各个不同视口,不是为每个终端做一个特定的版本...注:以上几种布局方式并不是独立存在的,实际开发过程中往往是相互结合使用的,根据项目的需求,取各自之所长。

    3K20

    静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

    但这种方法不是一种完全兼容未来网页的制作方法,我们需要一些适应未知设备的方法。...1、布局特点:屏幕分辨率变化时,页面里面元素的位置会变化大小不会变化。 2、设计方法:使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。...,根据不同的设备采用不同的css,而且css都是采用的百分比的,不是固定的宽度,不同点是响应式的模板在不同的设备上看上去是不一样的,会随着设备的改变改变展示样式,自适应不会,所有的设备看起来都是一套的模板...移动端弹性布局流行起来的原因归根结底是rem单位对于(根据屏幕尺寸)调整页面的各元素的尺寸、文字大小时比较好用。...响应式和弹性布局之间的对比: 响应式布局:改变浏览器宽度,“布局”会随之变化,不是一成不变的,例如导航栏在大屏幕下是横排,在小屏幕下是竖排,在超小屏幕隐藏为菜单,也就是说如果有足够的耐心,在每一种屏幕下都应该有合理的布局

    10.4K33

    10 款你不知道的 Linux 环境下的替代工具!

    不添加任何参数,会输出所有本地设备、已挂载的任何云存储设备以及任何其他特殊设备(包括临时存储位置等)的详细信息; $ duf 如果你只想查看本地连接设备的详细信息,不想看其他的,可执行: $ duf...--only local 如果你只想根据大小按特定顺序对输出信息进行排序,可执行: $ duf --sort size 更多参数使用方式: duf /home /some/file 根据参数,则...duf 将仅列出特定的设备和安装点 duf --all 列出所有内容 duf --hide-network 隐藏网络文件系统,与之对应的 --hide-fuse --hide-special --hide-loops...终端屏幕不再是瓶颈:exa 功能强大,比 ls 要友好,输出结果会更快; 颜色:exa 大量使用颜色; 不与 ls 命令冲突 EXA 的特征 色彩:文件类型列表以及如何区分文件; 网格视图:在与终端窗口大小相同的网格中显示文件...,--grid:将条目显示为网格(默认) -l,--long:显示扩展细节和属性 -R,--recurse:递归到目录 -T,--tree:作为树递归到目录中 -x,--across:对网格进行排序,不是向下排序

    1.5K21

    移动端WEB开发之响应式布局

    设备的划分情况: 小于768的为超小屏幕(手机) 768~992之间的为小屏设备(平板) 992~1200的中等屏幕(桌面显示器) 大于1200的宽屏设备(大桌面显示器) 1.2...原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。...,利用媒体查询功能,并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。...,因此我们列定义为col-md-就行了,md是大于等于970以上的 小屏幕布局发生变化,因此需要为小屏幕根据需求改变样式布局 超小屏幕布局有发生变化,因此需要为超小屏幕根据需求改变样式...策略:先布局md以上的PC端布局,最后根据实际需要修改小屏幕和超小屏幕的特殊布局样式 项目结构搭建 Bootstrap 使用四步曲: 创建文件夹结构 创建 html 骨架结构

    4K20

    欢迎体验 | Android 12 开发者预览版 2

    在 Android 12 中,我们致力于让操作系统更智能、更易用、更强劲,并且始终以隐私和安全为核心。...如果某个应用启用了 自动 PIP,系统现在会在用户上划到主屏幕时直接将该应用过渡到 PIP 模式,不是等待上划到主屏幕的动画完成。这使过渡更加平滑,并提高了感知表现。...我们还针对非视频内容改进了 PIP 窗口的大小调整方式。应用现在可以 启用无缝调整大小,使系统根据需要调整 PIP Activity 的大小。...Android 12 还支持隐藏 PIP 窗口,只需将 PIP 窗口拖动至屏幕左侧或右侧边缘即可。...当设备在附近时,系统会确保服务处于唤醒状态,并且当设备进入和离开连接范围或关机时,系统会向服务发出通知,以便应用根据需要清理状态。

    64820

    【Web技术】522- 设计体系的响应式设计

    RWD 是同一套代码做弹性的适应[3][4],本质上它们都在解决产品设计如何适应于不同设备以及不同屏幕规格的问题,本篇所指的「响应式设计」 概念包含了两者,不做明显区分,关于 Adaptive 与...Fluent 归纳了 6 种对应不同情况的响应式设计模式,非常全面地涵盖了其它设计体系中的绝大部分方案,分别是:调整大小、重新定位、重新排列、显示/隐藏、替换、重新构建[8]。...Resize - 调整大小 调整大小是最基础的设计模式,是一个容器默认的响应式模式,通常有等比缩放、固定高度、或是在不同尺寸下按不同比例规格缩放三种形式,即便在无响应式设计的体系里,容器跟随屏幕尺寸变化也是一个常见的应用方式...Reflow Show / Hide - 显示 / 隐藏 基于屏幕空间、设备不同特性、特定情况等显示或隐藏 UI 元素,例如大多数设计体系的框架设计应用在小屏幕上会隐藏侧边菜单。...token,来控制界面元素在不同屏幕的显示与隐藏

    1.8K20

    避免在移动端页面中使用100vh

    如果要设置一个元素的样式使它占据整个屏幕的高度,那么你可以设置height: 100vh,这样你就拥有一个完美的全屏元素,该元素会随着视口的变化调整大小!可惜的是,事实并非如此。...核心问题是移动浏览器(说的就是你,Chrome和Safari)具有“有用”功能:地址栏有时可见,有时隐藏,从而改变了视口的可见大小。...如下所示: 一个更好的解决方法:window.innerHeight 解决该问题的一种方法是依靠JavaScript不是CSS。...无论地址栏是否可见,屏幕都将是视口的高度。此外,在页面首次加载时将高度固定为适当的大小,可以防止在使用该网站的过程中地址栏隐藏,从而带来尴尬的屏幕调整大小体验。...100vh是如此接近伟大(greatness),但考虑到它在移动设备上的局限性,最好避免使用它。

    1.5K30
    领券