如果手机屏幕是横向的，如何将背景图像保持在底部？ - 腾讯云开发者社区

文章/答案/技术大牛

发布

大屏时代的生态变迁，看平板手机的拇指热键与界面布局

本文带你了解如何面向平板手机的拇指热键与界面布局，为这种转变提供助力。人们怎样使用平板手机 iPhone出现之后的几年，手机屏幕的尺寸基本都保持在4英寸以下（以对角线计算），非常便于单手操作。...在平板手机上，仍然需要将导航及高频功能控件放置在屏幕底部。无论用户怎样持机，平板手机的屏幕顶部区域总是相对难以触及。...虽然根据Android设计规范的要求，我们应该在小屏手机中将App的导航与功能控件放置在顶部，以避免与底部的系统导航栏产生冲突，但是在大屏设备上，可以将一些高频控件从标准的Action Bar中移出，并放置到屏幕底部...但是，鉴于平板手机巨大的屏幕尺寸，单手状态下又难以触及屏幕顶部区域，所以权衡下来，将一部分控件移到底部的做法还是合理的，哪怕要冒一定的风险，也至少可以让人们在单手操作的时候能够轻松点击。...人们使用屏幕巨大的手机，不代表他们有着巨人般的手，手势应该围绕手指进行设计，而不是围绕屏幕。整体移动。界面中的多数元素是静态的，需要我们自己伸手触及。

2.9K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

如何使用 CSS 设置和自定义水平和垂直滚动条

滚动条是图形用户界面（UI）中必不可少的组件。滚动条允许用户查看超出其容器宽度或高度的内容。滚动条还使用户能够查看超出屏幕宽度或高度的内容。默认情况下，浏览器会为body内容的溢出包含一个滚动条。...下面的截图显示了我们即将创建的侧边栏：侧边栏要创建上面的侧边栏，我们将在CSS中进行以下更改：将导航栏的显示更改为flex，并将方向设置为column为侧边栏设置背景颜色为导航链接添加底部边框增加导航链接的字体大小和字体粗细为侧边栏设置固定宽度增加...body的高度以使其足够长以滚动以下CSS代码片段描述了如何将初始导航栏样式设置为侧边栏并调整body的底部边距。...将overflow-y属性的值设置为auto后，如果没有内容超出容器的边界，浏览器将隐藏滚动条。恭喜您！您已成功创建了一个垂直滚动条。如果需要的话，可以休息一下。...您可以向网页内的容器添加水平滚动条。水平滚动条可以使用户在较短的容器内查看一系列横向内容。下面的截图显示了一个橙色容器，其中包含一系列蓝色正方形，这些正方形的宽度超出了容器的宽度。

4.9K0 0

移动端与PC端页面布局区别、background-size 背景图片的缩放

HTML页面在手机端显示的存在问题 HTML页面在电脑的浏览器显示跟在手机端的浏览器显示效果是不一样的，下面写个div来示例看看。首先编写一个div ? 那么下面来切换手机显示看看。...视口视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980px或者1024px，目的是为了显示下整个为PC端设计的网页，这样带来的后果是移动端会出现横向滚动条，为了避免这种情况...倍的视网膜屏幕和3倍的视网膜屏幕，2倍的视网膜屏幕，它的物理像素点大小是一般屏幕的1/4,3倍的视网膜屏幕，它的物理像素点大小是一般屏幕的1/9。...使用这种方法是最频繁的，但是还有用百分比的方式。 background-size: percentage：用百分比指定背景图像大小。不允许负值。...这个可能看得不是很清楚，其实cover参数就是等比例缩放至恰好覆盖div大小即可，如果图片等比例缩放的一半就可以覆盖div，那么div只会显示一半的图片。 ?

3.5K2 0

iPhone X 适配指南 (官方翻译版)

请参阅图像大小和分辨率和自定义图标。布局在设计iPhone X时，您必须确保布局填满屏幕，并且不会被设备的圆角，传感器外壳或用于访问主屏幕的指示灯遮蔽。...确保背景延伸到显示器的边缘，并且垂直可滚动的布局（如表格和集合）一直延续到底部。插入必要内容以防止剪辑。...请注意，当背景任务（如录音和位置跟踪）处于活动状态时，iPhone X上的状态栏不会改变高度。如果您的应用程序目前隐藏状态栏，请重新考虑iPhone X上的决定。...同样，全屏iPhone X图稿在显示时被裁剪或被柱状显示全屏显示在4.7 寸iPhone上，确保重要的视觉内容保持在两种显示尺寸上。避免将交互式控件明确放置在屏幕底部和角落。...人们使用显示屏底部的滑动手势访问主屏幕和应用程序切换器，这些手势可能会取消您在此区域中实现的自定义手势。屏幕的两个角落可能是困难的地方让人们舒适地到达。不要掩盖或特别注意关键显示功能。

3.2K5 0

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

英寸( inch,缩写为 in)在荷兰语中的本意是大拇指，一英寸就是指甲底部普通人拇指的宽度。...在上面的图像中我们可以清晰的看到，打印机是如何使用墨点来打印一张图像。所以，打印机的 DPI越高，打印图像的精细程度就越高，同时这也会消耗更多的墨点和时间。...但是，随着科技的发展，低分辨率的手机已经不能满足我们的需求了。很快，更高分辨率的屏幕诞生了，比如下面的黑色手机，它的分辨率是 640x940，正好是白色手机的两倍。...如果黑色手机使用了视网膜屏幕的技术，那么显示结果应该是下面的情况，比如列表的宽度为 300个像素，那么在一条水平线上，白色手机会用 300个物理像素去渲染它，而黑色手机实际上会用 600个物理像素去渲染它...K代表屏幕横向有几个 1024个像素，一般来讲横向像素超过 2048就属于 2K屏，横向像素超过 4096就属于 4K屏。四、视口视口( viewport)代表当前可见的计算机图形区域。

2.5K4 1

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

2.5K2 0

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

2.6K1 0

鸿蒙5开发宝藏案例分享---一多开发实例（旅行订票）

尤其是这个「旅行订票一多开发实例」，简直把多端适配的黑科技玩出了花！赶紧带大家来挖宝，手把手解析如何用一套代码征服手机/折叠屏/平板/PC四大终端！...文档里这个订票App案例，展示了真正的智能布局：手机端：沉浸式背景+手势操作折叠屏：分栏式信息展示平板端：多任务并行操作PC端：桌面级交互体验所有设备共用同一套代码库，通过动态响应式布局自动适配！....layoutWeight(1) // 自动均分宽度 } })}.scrollDirection(Axis.Horizontal) // 手机端横向滚动体验优化：折叠屏展开时自动切换为双栏布局PC...80 : 20 })黑科技功能：上滑自动隐藏筛选栏（手机专属）跨设备订单同步（通过分布式能力）实时价格波动可视化图表开发避坑指南断点陷阱：不要硬编码屏幕尺寸！...如果遇到好玩的案例，欢迎在评论区交流讨论~ （本文示例代码来自HarmonyOS官方文档案例，实现细节以最新文档为准）

2331 0

UX 设计之——商品详情页

现如今，30%的在线购物行为发生在手机端上。对于在线购物一事，所有用户都期望能够得到快速、流畅的体验。...为了保证文本清晰易读，你应该让字体大小至少保持在11pt以上（即使用户选择了小字体），而且贯穿整个程序的字体应该是一致的。另外，一个好的经验是每行使用30-40个字符。 ? （2）对比度。...确保文本和背景间有明显的对比度，尤其在日光照耀下。...对于小屏幕，间距是一个关键因素。好的间距提升易读性。请不要让文本重叠，应该通过增加行高或字符间距等做法，来提高文本的易读性。 ?...如果答案是否定的，那么给它一个未在页面中其他地方使用的颜色或者让它更大、字体更粗来让其变得突出。 ? 2、按钮要常显你应该使主要按钮一直显示，即使你滚动屏幕内容，也要使它留在屏幕底部。

1.7K6 0

【Android RTMP】Android Camera 视频数据采集预览 ( 图像传感器方向设置 | Camera 使用流程 | 动态权限申请 )

向左横向 : 当手机向左横放时 , 图像传感器原点及方向 , 屏幕的原点及方向如下 ; ① 传感器原点和方向 : 图像传感器 ( 手机右上角 ) 原点 ( 0 , 0 ) , 向右 X 增加 , 向下...Y 增加 ; ② 屏幕原点和方向 : 手机屏幕当前左上角 ( 手机的右上角 ) 是屏幕原点 , 向右 X 增加 , 向下 Y 增加 ; 2 ....图像显示 : 屏幕传感器的方向与屏幕方向一致 , 此时没有显示图像传感器 : 横向界面的 Camera 采集的图像数据是正常的 ; 注意 : 这是向左横向显示的数据 , 如果向右横向 , 数据整个都倒过来了...: 手机屏幕当前左上角 ( 手机的右上角 ) 是屏幕原点 , 向右 X 增加 , 向下 Y 增加 ; 2 ....图像显示 : 屏幕传感器的方向与屏幕方向不一致 , 此时没有显示图像传感器 , 纵向数据是不正常的 , 此时垂直方向显示界面时 , 显示的拍照信息还是横向的 , 只是 Camera 采集的图像逆时针旋转了

2.1K3 0

基于Python的飞机大战复现

图片加载与缩放尝试加载飞机、子弹、敌机、背景、开始背景和结束背景等图片，并进行缩放处理。如果图片加载失败，会打印错误信息并退出游戏。...self.rect = self.image.get_rect(center=(screen_width/2, screen_height - 50))：获取飞机图像的矩形区域，并设置飞机的初始位置在屏幕底部中央...if self.rect.y > screen_height: self.kill()：当敌机移出屏幕底部时，从精灵组中移除敌机。...点击检测方法（is_clicked）当鼠标点击事件发生时，判断点击位置是否在按钮范围内，如果是则返回True，否则返回False。...处理退出事件和重试按钮点击事件，如果玩家点击重试按钮，则返回游戏主循环重新开始游戏，否则保持在结束界面。游戏主循环事件处理处理退出事件，当玩家点击关闭窗口时，结束游戏循环。

8691 1

Android从屏幕底部弹出popupWindow

Android从屏幕底部弹出popupWindow 先看一下效果，看看是不是你想要的效果，免得浪费大家的时间，有一点说明，由于我录制的 gif 是用的模拟器，所以没有屏幕变暗的效果和加速的弹起的效果，实际效果以真机测试为准...如果是你要的效果就可以继续向下看了… 1.首先是布局文件屏幕底部弹出，然后将屏幕的亮度变暗，让popupwindow获取焦点，就可以实现了popupwindow从手机屏幕底部弹出的效果，代码中注释已经写的很清楚了，直接看代码即可 2.1设置触发popupwindow...popupWindow.setOutsideTouchable(true); // 平移动画相对于手机屏幕的底部开始，X轴不变，Y轴从1变0...，此处是在手机屏幕底部且水平居中的位置 popupWindow.showAtLocation(SettingActivity.this.findViewById(R.id.setting

3.8K3 0

盘点|AR艺术创作已经可以这么玩了？！

《SketchAR》的使用很简单，将图像投影叠加到之上或者墙上，用户就可以对照手机屏幕将图像描下来。...值得注意的是在这过程中，定位圈要保持在相机范围内，不能出现缺角或遮挡的情况，这样才能保证图像能够完整地呈现在纸上。用户可以选择应用系统预制的图像或个人照片，将相机对准要绘制的纸张。...相机检测到纸张后，屏幕内的纸张就会显现出该图像的线条。随后，只需用笔在纸上照着线条描出来就可以了。相较于徒手作画，《SketchAR》为用户提供了绘制的路径。...随后将手机屏幕慢慢移至电脑前，按下粘贴键，透明背景的真实物体照片就会被扫描进入电脑中。 Diagne表示，该应用不仅适用于Photoshop，还可以应用于任何图像、文档或视频编辑软件。...《Artivive》：化静为动如果你已经厌倦了博物馆里静态的画展，那么《Artivive》定会让你眼前一亮。用户可以在手机或平板上下载《Artivive》，并用其扫描展馆内的艺术画或摄影作品。

1.3K3 0

实践 | 为 Trackr app 适配大屏幕设备

在大屏幕设备上，弹出菜单是一个小触控区域，它处于不太方便操作的位置。并且底部应用栏也被过度拉伸了。 △ 左侧: 手机上的导航展示。右侧: 平板上的导航展示。...△ 在大屏幕上的导航轨道虽然是考虑到较大屏幕的设备而进行的此项更改，但由于腾出了更多的纵向空间来显示任务列表，横向模式显示的手机也能够因此受益。...△ 横向显示的手机上的导航轨道双窗格布局调整前 : 任务 (Tasks) 和归档 (Archive) 界面完全占满了整个显示宽度，并且点击列表中某一项目时，其对应的详细信息会覆盖显示之前的列表。...在大屏幕上，UI 元素要么被拉伸，要么挤在一边，导致屏幕内容显得很不平衡。 △ 在手机上这样显示很自然，但在大屏幕上的空间利用率却不太理想。...我们在此前一篇文章中描述了怎样实现这种布局，如果您对具体的技术细节感兴趣，请参阅文章《实践 | Google I/O 应用是如何适配大尺寸屏幕 UI 的？》

2.2K2 0

Material Design —悬浮响应式按钮（Buttons: Floating Action Button）

跨屏幕横跨多个横向屏幕（例如顶部标签屏幕）的悬浮响应式按钮应该短暂消失，然后如果其动作改变就重新出现（此部分动图见原网站）。...如果按钮在各个屏幕上的动作保持不变（如有必要，则转换为新位置），该按钮应保持在屏幕上。列表悬浮响应式按钮下面的列表应该在它们下面有足够的空间，以便它们的内容不被按钮挡住。...滚动就消失的工具栏适用于： ·最开始进入时需要完整工具栏的屏幕 ·长列表顶部或底部需要完整工具栏的屏当用户通过滚动表示他们有兴趣查看主要内容时，节省了屏幕空间。...如果悬浮响应式按钮变形为工具栏，则该工具栏应包含相关操作。 ? 工具栏中的操作需关联 Speed dial 按动悬浮响应式按钮可以甩出相关动作。菜单被唤起后，该按钮应保持在屏幕上。...如果app的特点是添加文件类型，浮动操作按钮可以在第一次触摸后转换为相关操作。但是，如果显示的操作与按钮无关，请将操作放入溢出菜单。 ? 悬浮响应式按钮可以包含联系人列表。

6.9K9 0

HarmonyOS学习路之开发篇—Java UI框架(六大布局开发)

二、布局开发 ① DirectionalLayout 对应 LinearLayout 在此布局中可以对布局中的所有组件进行横向或纵向排列，并且使组件与组件之间进行对齐。.../底部/开始/结束边对齐 ohos:align_parent_left/right/top/bottom/start/end=“true” center_in_parent 将子组件保持在父组件的中心...将子组件保持在父组件垂直方向的中心 ohos:vertical_center=“true” ③ StackLayout 对应 FrameLayout StackLayout直接在屏幕上开辟出一块空白的区域...⑥ AdaptiveBoxLayout AdaptiveBoxLayout是自适应盒子布局，该布局提供了在不同屏幕尺寸设备上的自适应布局能力，主要用于相同级别的多个组件需要在不同屏幕尺寸设备上自动调整列数的场景...自适应仅在水平方向进行了自动分块，纵向没有做限制，因此如果某个子组件的高设置为match_parent类型，可能导致后续行无法显示。

1.7K1 0

动感音乐导航栏的实现

在现代网页设计中，随着多媒体和互动元素的快速发展，网页的动效和用户体验成为了设计师与开发者追求的重要目标。而当涉及到音频的播放与互动时，如何将音乐元素与页面交互完美结合，往往是非常具有挑战性的。...一、项目背景与目标在网页设计中，添加音效和音频播放是一种增强用户体验的有效方式。例如，在一个音乐播放器或个人主页中，音效和音乐不仅可以增加页面的互动性，还能提升页面的整体氛围。...动态导航栏的设计首先，我们需要设计一个适应不同屏幕尺寸和用户需求的导航栏。在本项目中，我们提供了三种不同的导航栏布局：顶部横向布局：这是最常见的导航栏布局，适用于大多数网站。...页面中部悬浮布局：像音乐播放器的控制面板一样，悬浮在页面中部，适合需要高度互动的页面。页面底部 Dock 样式：类似于手机应用中的底部导航栏，常见于移动端网站。...解决 CORS 问题与音频播放在开发过程中，音频文件的加载是一个常见的挑战，尤其是当音频文件托管在第三方服务器时，CORS（跨源资源共享）限制可能会阻止音频的播放。

4930 0

Android性能优化系列之渲染优化

android的渲染机制，android 的渲染主要分为两个组件 1.CPU 2.GPU 由这两者共同完成在屏幕上绘制 Activity如何将复杂的UI转换成用户看得懂的图像并绘制到屏幕上...简单理解android的渲染过程 CPU在图像绘制之前向GPU输入这些指令这一过程通过OpenGL-ES 也就是说在屏幕绘制UI对象的时候都需要在CPU中转化成多边形再传递GPU进行格栅化操作...由CustomViewAbove和CustomViewBehind组成,前者是上面可以左右拉动的那部分,后者是底部不能拉动的那部分(这个从HierarchyView中也可以看出来:如下图所示: 点击...点击Trace按钮, 手机会自动启动应用程序并启动对应的Activity,当手机上的内容完全绘制出来之后,就可以点击Stop按钮,生成GlTrace文件.文件会自动打开....这只是一帧的绘制,如果多操作几下生成多个帧的绘制trace文件,会发现这两个背景会被多次的重绘,去掉后不仅会减轻过渡绘制,也会加快GUP的绘制速度.

1.2K3 0

移动web开发

(1/0) 03 二倍图物理像素＆物理像素比物理像素点指的是屏幕显示的最小颗粒,是物理真实存在的.这是厂商在出厂时就设置好的,比如苹果8是750*1334(也就是手机上的分辨率,就是物理像素点...原手机的分辨率是750*1334,由于像素比是2所以上面的375*667是根据像素比已经缩放过的,意思就是只要PC端375*667的盒子就能把整个手机屏幕占满....不同设备的不同像素比: PC端和早前的手机屏幕/普通手机屏幕:1CSS像素=1物理像素 Retina(视网膜屏幕)概念,可以把更多的物理像素点压缩在一块屏幕里,从而达到更高的分辨率,并提高屏幕显示的细腻程度...背景缩放 background-size 语法: background-size: 宽度高度; 假如有两个值,那么就是直接拉大或缩小图片,如果是只有一个值,那就必然是宽度,高度默认不变,所以是按照宽度等比例缩放...单位:长度|百分比|cover|contain cover把背景图片扩展至足够大,以使背景图像完全覆盖背景区域. contain把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域. cover和contain

2.9K2 1

点击加载更多

最新iOS设计规范七｜10大视觉规范（Visual Design）

大屏时代的生态变迁，看平板手机的拇指热键与界面布局

如何使用 CSS 设置和自定义水平和垂直滚动条

移动端与PC端页面布局区别、background-size 背景图片的缩放

iPhone X 适配指南 (官方翻译版)

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

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

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

鸿蒙5开发宝藏案例分享---一多开发实例（旅行订票）

UX 设计之——商品详情页

【Android RTMP】Android Camera 视频数据采集预览 ( 图像传感器方向设置 | Camera 使用流程 | 动态权限申请 )

基于Python的飞机大战复现

Android从屏幕底部弹出popupWindow

盘点|AR艺术创作已经可以这么玩了？！

实践 | 为 Trackr app 适配大屏幕设备

Material Design —悬浮响应式按钮（Buttons: Floating Action Button）

HarmonyOS学习路之开发篇—Java UI框架(六大布局开发)

动感音乐导航栏的实现

Android性能优化系列之渲染优化

移动web开发

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐