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

什么是移动端开发【重点学习系列—干货十足–一万字详解】

(pixels per inch ),这里还有另一个单位 dpi(dots per inch),两个计算方式都一样,只是使用场景不同。... CSS 标准文档中,也被称为初始包含块,它是所有 CSS 百分比宽度推算根源。...使用示例 viewport 相关选项 - width 布局宽度 - initial-scale 初始化缩放比例 - minimum-scale 最小缩放比例 - 这里通过微信来浏览器演示...浏览器默认行为 这里指浏览器默认行为主要有两个 滑动露白 页面缩放 为什么要阻止这些默认行为 这样可以让网页不同浏览器都有一样表现。...事件对象属性 touch 事件对象中有 3 个非常重要属性 changedTouches targetTouches touches touchstart 事件 touchstart 事件中 changedTouches

2.4K20

春眠不觉晓,vh、vw、vmin、vmax 知多少

介绍一些 CSS3 新增单位,平时可能用比较少,但是由于单位特性,一些特殊场合会有妙用。...vw and vh 1vw 等于1/100宽度 (Viewport Width) 1vh 等于1/100高度 (Viewport Height) 综上,一个页面而言,它视窗高度就是 100vh...同理,如果宽度为750, 1vw = 750px/100 = 7.5 px。 可以想象到,他们有很多很多用途。比如,我们用很简单方法只用一行CSS代码就实现同屏幕等高框。...vmin and vmax vh和 vw 依据于高度和宽度,相对,vmin 和 vmax则关于高度和宽度两者最小或者最大值 vmin — vmin值是当前vw和vh中较小值。...vmax — vw和vh中较大值。 这个单位在横竖屏切换中,十分有用。 一些 Demo 示例,或者大页面中,我们经常都会看到上述 4 个单位身影。灵活使用,就可以减少很多 CSS 代码量。

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

vivo悟空活动中台-基于行为预设动态布局方案

2.2、不足 以上方案虽然有着诸多优势,但是有时面对特定场景也会存在适配效果不够理想问题。 2.2.1、满屏场景 单页或者滑屏H5场景下,对任何设备,页面内容“恰好”占满。...上图展示了不同规格口中,页面内容总能恰好占满,没有溢出也没有留白;前文所述普适性方案满屏场景下就存在一些问题。...四、预设规则实现 本部分介绍了预设规则具体实现,重点在于体现设计思路,示例代码均为伪代码。...2.2、缩放比 scale 使用 scale 描述元素实际与标准缩放比,设元素基准宽高为 width 和 height ,则元素实际宽高分别为 baseW * scale...,即 不同口中,元素 高度一半加上元素顶部到屏幕顶部距离值,与元素 高度一半加上元素底部到屏幕底部距离值,这两个值 相等。

2K10

响应式布局,你需要知道这些

设备像素与CSS像素区别是什么? EM,REM 计算规则是什么?实际应用中如何选择? 什么是 viewport,布局,视觉,理想区别? 百分比单位和单位计算规则是什么?..., initial-scale=1"> 复制代码 Peter-Paul Koch 文章中将移动浏览器分为三种。...也就是你手机屏幕,所以不同设备视觉可能不同,有了 visual viewport,我们就可以实现网页拖拽和缩放了,为什么? 因为有了一个承载布局容器。...,它和 vw,vh 区别是什么?...假设你已经阅读完并了解了弹性盒模型,响应式布局中我们需要关注 FlexBox 里两个角色:容器和子元素。

1.6K20

理想viewport()并不存在

Set Studio,我们进行了一个小型非正式实验,以回答“尺寸有多碎片化?”这个问题。我们收集了超过120,000个数据点,涉及超过2,300个不同尺寸。...我们所在家乡切尔滕纳姆(Cheltenham)的人口大约是116,000人,所以我们数据点几乎可以填满整个城镇! 最常见尺寸是什么?...即使同一款iOS设备上,基于操作系统状态,一个网站至少也可能出现在3种不同环境中。 如果你以灵活、流畅方式进行构建,这并不是问题。这一点在这个图表中有所体现。...我们决定将任何宽度大于800px视为“桌面端”,或者我们更喜欢称之为大。 你可能会觉得“800px对于桌面端来说太小了”,如果我们是测量屏幕尺寸,你是对。但我们这里测量尺寸。...创建灵活规则,并允许浏览器发挥其最擅长一面:根据所处条件计算出最佳展示效果。 这一点也同样适用于你项目规划。规划页面内容时,问问自己对于那些不符合典型模式奇怪尺寸,情况会是如何?

19130

学姐叫我看 CSS 新出容器查询,然后把公共组件重构成响应式

我们一般使用CSS媒体查询来检测宽度或高度,然后根据该模式改变设计。 这就是在过去10年中设计Web布局方式。...喔或,这是一个很好问题。 问题是,只有当宽度大于特定值时,开发人员才会使用组件变体。例如,如果我平板中使用 featured 也就是 PC 样式,它不能工作,为什么?...此外,我们可以在任何想要地方定义它们,这意味着如果需要,我们可以顶级容器上进行查询。现在大家已经理解了CSS容器查询基本思想,在看看下面图片加深一下映像。 左边,这是一个正在调整大小。...右边,一个根据父组件宽度更改组件。这就是容器查询功能和用途设计时考虑容器查询 作为一名 UI,你需要适应这个革命性CSS特性,因为它将改变我们为网页设计方式。...CSS容器查询用例 我们来探索一些可以使用CSS容器查询实现用例。 聊天列表 我Facebook messenger上看到了这种模式。聊天列表根据宽度改变。

2.2K30

Unity2D游戏开发-坐标系与辅助线绘制

获取鼠标的位置是屏幕坐标 坐标系 坐标系和屏幕坐标系完全对等,不过范围是0-1。 GUI坐标系 和屏幕坐标系最大值一样,只不过y轴方向相反,是从上到下。...别名 世界坐标(全局坐标、左手坐标、绝对坐标) 本地坐标(局部坐标、自身坐标、物体坐标、相对坐标) 屏幕坐标(像素坐标) 坐标(视窗坐标) GUI坐标(UI坐标) 示例代码 private void...鼠标的位置是屏幕坐标 屏幕坐标=>坐标 mainCamera.ScreenToViewportPoint(Input.mousePosition) 坐标=>屏幕坐标 Vector3 screenPoint...GUI、Gizmos 和 Handles Unity 中主要使用场景如下: GUI - 用于游戏界面中创建UI元素,如按钮、文本等。...用于游戏运行时界面 Gizmos用于场景编辑可视化信息 Handles用于场景编辑交互控制 明确三者适用场景,可以更好地Unity中使用它们实现各自功能。

59910

关于图片懒加载几种方案

懒加载,顾名思义,在当前网页,滑动页面到能看到图片时候再加载图片 故问题拆分成两个: 如何判断图片出现在了当前 (即如何判断我们能够看到图片) 如何控制图片加载 本篇文章原文地址: 如何实现图片懒加载...方案二 改进一下 如何判断图片出现在了当前 引入一个新 API, Element.getBoundingClientRect() 方法返回元素大小及其相对于位置。...那如何判断图片出现在了当前呢,根据示例图示意,代码如下,这个就比较好理解了,就可以很容易地背会(就可以愉快地去面试了)。..._.throttle(func, [wait=0], [options={}]) 参考 什么是防抖和节流,他们应用场景有哪些 方案三 再改进一下 如何判断图片出现在了当前 方案二使用方法是:...事件回调参数是 IntersectionObserverEntry 集合,代表关于是否可见一系列值 其中,entry.isIntersecting 代表目标元素可见 const observer

98610

移动端常用适配方案四

initial-scale 属性来缩小,注意点: 缩放大小会发生变化,利用获取像素比动态设置缩放比例改造之前示例如下:<!...补充在上方我们是如何进行缩小是不是通过将整个大小进行缩小,但是缩小之后我们里面的内容并没有随之而然进行缩小,这个原因其实也很简单,如下代码我设置了宽度等于设备宽度,然后获取了一下宽度...iphone5 上面输出宽度也为 320 没问题:图片然后我将上面我们进行缩放代码添加之后再次打印结果如下:<!...,原因就是因为它在进行缩小时候首先会将变大一半,原本我设置宽度等于设备宽度应该长相如下这么宽:图片但是它发现你要缩小,它会先进行扩大一半,本来如果一样的话两个都是 320 480,那么这个时候呢它发现你要缩小它会先进行扩大一半...,扩大一半之后就变为了 640 960 那么这个时候你就会发现已经与宽度是一个一一对应关系了,然后一一对应关系当中先进行布局,布局完毕之后放入真正视当中,然后进行缩小一半,然后正是因为它们是一一对应关系所以说你看到界面就没有变小了

22300

【Flutter&Flame 游戏 - 贰玖】pinball 源码分析 - 与相机

认识与相机 相机是我们日常生活中非常常见概念, Flame 中,相机概念如何理解呢?现实生活中,当你使用相机拍出一张照片,其囊括区域是有限,这个区域也就是 Viewport。...此时游戏尺寸和 窗口尺寸 就不是一个概念了。无论应用窗口有多大,对游戏而言尺寸是恒定。如下白色背景构件添加到游戏场景中,布满会根据大小来适应窗口 ,不在区域内部分会显示底色。...---- 如下所示,角色移动过程中,始终保持中心位置,但感官上它确实在运动。通过相机和角色伴随移动,就可以始终让角色成为焦点,角色移动过程中,口内容因相机移动而扩展,这是符合我们常识。...{ add(Rock(Vector2(Ground.genCoord(), Ground.genCoord()))); } } 复制代码 ---- 该案例,当角色和岩石碰撞时,可以看出角色区域...如下所示,点击 Play 时,场景会进行放大和移动。同样,游戏结束时也会有个类似的放大,移动到排行榜位置。

91820

【移动端网页布局】移动端网页布局基础概念 ③ ( meta 标签简介 | 利用 meta 标签 设置 网页宽度 是否允许用户缩放 初始缩放比例 最小缩放比例 最大缩放比例 )

一、meta 标签简介 ---- meta 标签 就是为了移动端而设计 , 该设置只有移动端生效 ; meta 标签 用于设置 浏览器 按照 理想 显示页面 ; 使用 meta 标签...通过设置正确 meta 标签,可以使网页不同设备上具有相同理想大小和布局。...不设置 meta 标签代码示例 如果 不设置 meta 标签 , 移动端 默认 网页宽度 为 980 像素 , 所有的标签元素都是 980 像素宽度网页中显示 ; 代码示例 : <!...2、设置 meta 标签代码示例 设置 meta 标签 , 移动端 默认 网页宽度 为 设备宽度 , 是理想 ; body 中文本 显示正常 ; 推荐标签写法 : 所有的手机端网页都设置如下样式...: 设置 meta 标签 , 移动端 默认 网页宽度 为 设备宽度 , 是理想 ; body 中文本 显示正常 ;

3.3K21

第118天:移动端开发——

它研究了两个内容:meta和宽度媒体查询。通常我们都会称上述代码为CSS3媒体查询功能。使用媒体查询功能能够解决针对桌面级web设计移动端不同尺寸下兼容展现。...我们看html文档结构知道最外层一层是html元素。那么html元素包含块是什么?这就是要说得了。CSS标准文档中,它被称为初始包含块。这个初始包含块是所有CSS百分比宽度推算根源。...(桌面上,宽度和浏览器窗口宽度一致)。 1、布局 移动端设备如果使用宽度和浏览器窗口宽度一样会导致很丑陋结果。想象一下。...所以,移动端浏览器厂商必须保证即使窄屏幕下我们页面可以展示很好,他们将宽度设计得比屏幕宽度宽出很多。这样。移动端,与移动端浏览器屏幕宽度就不再关联,而是完全独立了。...但我们不能完全忽视移动设备上屏幕尺寸。所以该说明一下视觉了。 视觉是用户正在看到网站区域。用户可以通过缩放来操作视觉,同时不会影响布局。布局还是保持原来宽度。

93020

企鹅FM点歌台总结

- 2016年老文,搬运存档用 - 企鹅 FM 点歌台,UI 侧大概是踩到了3个坑 轮播 弹幕 键盘呼起 轮播和弹幕 企鹅 fm 点歌台是 2.5 将会新出功能,其中有两个点觉得值得分享,一个是老生常谈轮子都不知道造了多少个...轮播 要求 无限轮播 JS 没有加载上来时,保证占位,保证首张 banner 图片正常显示 实践过程中,我们尝试了2种方式,无论哪个方法,结构都是>轮播容器>banner容器+banner容器....要注意获取屏幕宽度方法,用 screen.width() 安卓上会得到实际像素(比如魅族MX4,就会得到1080px),如果要使用这个方法,获取屏幕宽度是不可以,可以获取宽度 因为 li.banner...top 值就是区域高度。...因为滚动区域是从下到上滚动,而是保持同一位置,以下是初始状态: 04.png 当再滚动一下(要注意滚动幅度哦),滚动区域和会出现接壤或者滚动区域会跑到上面了,那么第一个 .cmt-item

1.5K40

CSS Viewport 单位,很多人还不知道使用它来快速布局!

本文中,我们将学习 CSS Viewport units(单位)以及如何使用它们,并用列举一些常见问题及其解决方案和用例,让我们开始吧。...我们有一个横屏手机,其中有一个元素具有vmin单元。在这种情况下,值将根据高度计算,因为它小于宽度。...通过使用vmin,我们可以较小尺寸(宽度或高度)基础上获得合适顶部和底部 padding。 .page-header { padding: 10vmin 1rem; } ?...纵横比 我们可以使用vw单位创建响应元素,以保持其纵横比,而不管大小如何。 首先,需要先确定所需纵横比,对于此示例,使用9/16。...对于我们示例,我们为 header 添加以下样式: .header { border-top: 4px solid #8f7ebc; } 情况下,宽度为1440(这不是固定数字,

3.2K30

解锁前端难题:亲手实现一个图片标注工具

这就是为什么使用 scale 函数后,所有的绘图操作(包括位置、大小等)都会受到影响。...来实现移动 通过 canvas translate 来实现改变 图片放大后,整个图像可能无法完全显示 Canvas 上,此时只有图像一部分(即可见区域)会显示画布上。...这个可见区域也被称为“”。为了查看图像其他部分,我们需要能够移动这个,即实现图片平移功能。 放大状态下,大小相对于整个图像是固定,但是它可以图像上移动以显示不同部分。...我们可以使用 Canvas translate 方法来改变位置。translate 方法接受两个参数,分别表示沿 x 轴和 y 轴移动距离。...移动时,我们需要更新图片位置,并重新绘制图像以反映新位置。

17410

初探富文本之基于虚拟滚动大型文档性能优化方案

因为浏览器Canvas只提供了最基本图形操作,没有那么方便DOM操作从而所有的交互事件都需要通过鼠标与键盘事件自行模拟,这其中有一个非常重要点是判断两个图形是否相交,从而决定是否需要按需重新绘制这个图形来提升性能...那么在这里我们需要关注一个问题,IntersectionObserver对象应用场景是观察目标元素与交叉状态,而我们虚拟滚动核心概念是不渲染非区域元素。...之前我知乎上看到了一个问题,为什么Python内置Sort比自己写快速排序快100倍,以至于我每次看到Intersection Observer API都会想到这个问题,实际上这其中有个很大原因是...但是Resize场景不同,即使是placeholder也会存在需要重新进行锁定,因为此时并不是要渲染实际高度,因此我们逻辑就是Resize时将所有的placeholder 状态节点都重新进行锁定标记...因此我们插入节点时候需要对其进行控制,对于这个这个问题解决方案非常简单,试想一下什么时候会有插入操作呢,必然是整个编辑器都加载完成之后了,那么插入时候应该是什么位置呢,大概率也是区域进行编辑

10410

CSS&HTML面经专题——(四)移动端响应式布局

CSS&HTML面经专题——移动端响应式布局 1、Viewport 移动端viewport(pc端没有这个概念)就是浏览器显示页面内容屏幕区域。...viewport中有两种,分别表示为: visual viewport(视觉):浏览器内看到网站显示区域,用户可以通过缩放来查看网页,从而改变视觉。...视觉不会影响布局宽度和高度。 固定大小——跟屏幕大小相同,在上面。 layout viewport(布局):布局定义了pc网页移动端默认布局行为。...也就是说,不设置网页viewport情况下,pc端网页默认会以布局为基准,移动端进行展示。...(2)概念 根据屏幕大小变化,页面的内容排版布局会自动调整变动,已呈现更好用户体验。 5、rem,em,px区别是什么? px 绝对单位,页面按精确像素展示。

2.3K20

CSS position:fixed 定位基准元素为问题解决

他们默认祖先元素都是,absolute 大家应改很熟悉,给它父元素增加 position: relative 就可以基于父元素进行定位了,它是相对于最近非 static 定位祖先元素偏移,来确定元素位置...fixed 通常用于导航栏顶部固定,场景大多是基于定位。...今天看了一下 MDN ,原来 position: fixed 也可以设置它祖先元素: fixed 元素会被移出正常文档流,并不为元素预留空间,而是通过指定元素相对于屏幕(viewport)位置来指定元素位置...元素位置屏幕滚动时不会改变。打印时,元素会出现在每页固定位置。fixed 属性会创建新层叠上下文。...当元素祖先 transform、perspective、filter 或 backdrop-filter 属性非 none 时,容器由改为该祖先。

10910
领券