背景图片的位置在实际的移动视图中很奇怪，但在桌面移动视图中是正常的 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

【移动端网页布局】移动端网页布局基础概念 ② ( 视口 | 布局视口 | 视觉视口 | 理想视口 )

( 网页大小 | 网页大小 > 设备大小 ) 布局视口 - Layout ViewPort 指的是在浏览器中，用于显示文档的区域大小和位置。...它是指网页中可见部分的大小，即浏览器窗口中显示的内容大小。在移动设备上，由于屏幕较小，需要对网页进行缩放以适应屏幕大小，因此布局视口也需要进行调整。...移动设备上的布局视口通常比桌面浏览器中的布局视口小，因为移动设备屏幕的大小通常比桌面屏幕小。...指的是用户看到的网页区域 , 即浏览器窗口中当前用户实际看到的页面区域 ; 设备的屏幕大小和浏览器窗口的大小决定了视觉视口的大小 ; PC 浏览器中，视觉视口通常等于浏览器窗口...下图中 , 在下面的视觉视口中 , 网页只能被看到一部分区域 ; 3、理想视口 ( 网页大小 = 设备大小 ) 理想视口 - Ideal Viewport 指的是指在浏览器中，使网页布局和显示最佳的视口大小

1.3K3 0

【笔记】《计算机图形学》(7)——观察

在流程图中金字塔形的视体是透视投影的视体，和之前说的一样投影分为正交投影和透视投影两大类，这里先跳过透视投影，来介绍比较简单的正交投影部分，这部分是透视投影的变换的基石 ?...也有少数的API中让视体处于z轴正方向上，尽管这让深度值更直观却让xy坐标变得奇怪或者需要改用左手坐标系然后视体与坐标系原点中间的距离就相当于现实中相机的焦距，由于我们只能渲染出视体中的内容，因此焦距越长...计算机中的相机不会发生散焦等情况，因此在正交投影下调整焦距的效果类似于相机在移动那么最后如何将正交视体变换为规范视体呢，很显然这也是一个缩放和移动仿射矩阵的情况，只是这一次我们无需忽略Z轴的值了，三轴都要进行移动和变换...相机变换再回到流程图中，这就到了最后的一个变换部分了，前面的变换都假设物体已经稳稳当当地放在视体中了，但实际上我们需要利用变换让相机坐标移动到需要的位置并让视体对准我们要的物体，再把物体的坐标从世界坐标系转换到相机坐标系中提供给上面的变换...这部分听起来很复杂但实际上就是上一章最后6.5节讲到的坐标系变换问题，在那一节中给出了从世界坐标系xyz坐标转换到相机坐标系uvw坐标的变换公式公式需要得到xyz坐标系中的视点也就是相机坐标系的原点坐标

2.1K2 0

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

是的

没有找到

CSS | 视差滚动 | 笔记

background-attachment：决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。它的属性值的含义如下：属性值含义 fixed 背景相对于视口固定。...在视差滚动中，"向内移动"和"向外移动"是相对于观察者（即浏览器窗口）的视角来说的。当一个层的 translateZ 值为负时，它会向内移动，也就是朝向观察者的方向。...核心问题是移动浏览器(Chrome和Safari)有一个“帮助”功能，地址栏有时可见，有时隐藏，改变了视口的可见大小。...在上图中，应该在屏幕底部的按钮被隐藏了。更糟糕的是，当用户第一次使用手机访问网站时，地址栏会显示在页面顶部，因此用户体验是很糟糕的。...遗憾的是，仍然没有一种简单的方法可以让一个元素在不依赖javascript的情况下占据整个视口高度。 height: 100vh 是如此接近伟大，但考虑到它在移动设备上的局限性，最好避免它。

8152 1

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

HTML页面在手机端显示的存在问题 HTML页面在电脑的浏览器显示跟在手机端的浏览器显示效果是不一样的，下面写个div来示例看看。首先编写一个div ? 那么下面来切换手机显示看看。...视口视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980px或者1024px，目的是为了显示下整个为PC端设计的网页，这样带来的后果是移动端会出现横向滚动条，为了避免这种情况...，移动端会将视口缩放到移动端窗口的大小。... pc端与移动端渲染网页过程： ? 使用视口解决上面的div显示太小的问题 ? ? 设置了视口之后，div显示比较正常了。...首先写一个div放置这张背景图片。 ? 下面设置一下背景图片的大小，如下： ? 使用这种方法是最频繁的，但是还有用百分比的方式。

3K2 0

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

如果我们从收集到的数据点中筛选出前20个独特的视口尺寸，主要都是较小的尺寸。你可能会推测这些都是移动设备——特别是前10个——但也值得考虑的是，视口尺寸也会因环境条件而有所不同。..."移动端" 与 "桌面端" 在这次实验中，我们仅捕获了每个数据点的宽度和高度，这些尺寸是通过 window.innerWidth 和 window.innerHeight 获取的。...我们决定将任何宽度大于800px的视口视为“桌面端”，或者我们更喜欢称之为大视口。你可能会觉得“800px对于桌面端来说太小了”，如果我们是在测量屏幕尺寸，你是对的。但我们这里测量的是视口尺寸。...即使是平板用户也不会让浏览器填满整个屏幕，因此在考虑更大视口设计时，请务必考虑这一点——尤其是如果你为小屏幕隐藏内容，而为“桌面用户”显示内容时。...创建灵活的规则，并允许浏览器发挥其最擅长的一面：根据所处的条件计算出最佳的展示效果。这一点也同样适用于你的项目规划。在规划页面内容时，问问自己对于那些不符合典型模式的奇怪视口尺寸，情况会是如何？

2173 0

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

在本文中，我将介绍它是什么，它将如何改变作为设计师的工作流，等等。当前响应设计状态当前，我们实现响应式，一般需要 UI 设计三个样式，分别是移动，平板电脑和桌面等。...在上图中，UI设计了三种版本，因此开发人员可以很好的实现它，这是很 nice的(这怕偷懒的 UI 只提供PC版本，这就很蛋疼)。现在我们来看看使用媒体查询来看看怎么实现它。...当我们在设计UI时以这种心态思考时，我们可以开始考虑组件的不同变体，这些组件依赖于它们的父宽度。在下面的图中，请注意文章组件的每个变化是如何以特定的宽度开始的。...正如刚才所看到的，我们重新查看了桌面大小的页面，并且有不同的部分，每个部分的列数不同。在设计响应式组件时避免复杂性重要的是要记住，组件的内部部分就像乐高游戏。...另一个类似的用例是侧导航。我们可以切换导航项标签的位置，从在新行或旁边的图标。当容器很小时，导航项标签是如何从一个新行切换的，当有足够的空间时，导航项标签是如何靠近导航图标的。

2.2K3 0

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

【29/02】比如上图中默认相机的视口尺寸是 900*600 ，并不是指白色区域的是 900*600 逻辑像素。另外，可以看到角色的尺寸没有改动，但在这个视口尺寸下，就会显得较小。...相机的变换操作相机的变换是针对于整个视口进行的，也就是说，可视区域内的角色呈现都会受到相机变换的影响。比如在现实生活中，当你移动相机，或者拉进、远离相机和目标的位置，都会影响最终的成像情况。...相机伴随角色移动很好理解，比如现实生活中拍电影，摄像机需要跟随演员同步运动，这样才能保证演员在移动时常驻在视图中。...岩石随机出现在场地中，主角是一个动画帧。 ---- 如下所示，在角色移动过程中，始终保持在中心位置，但感官上它确实在运动。...如下所示，在点击 Play 时，场景会进行放大和移动。同样，游戏结束时也会有个类似的放大，移动到排行榜的位置。

1K2 0

响应式设计

响应式设计的三大原则如下：移动优先。这意味着在实现桌面布局之前先构建移动版的布局。 @media 规则。使用这个样式规则，可以为不同大小的视口定制样式。...一旦移动版的体验做好了（或者设计好了），就可以用“渐进增强”（progressive enhancement）的方式为大屏用户增加体验。移动端布局一般是很朴素的设计。...如果不加这个标签，移动浏览器会假定网页不是响应式的，并且会尝试模拟桌面浏览器，那之前的移动端设计就白做了。...对网页上有很多元素来讲，无须给每个断点都添加样式，因为在小屏幕或者中等屏幕的断点下添加的样式规则在大屏幕的断点下也完全有效。有时候移动端的样式可能很复杂，在较大的断点里面需要花费较大篇幅去覆盖样式。...# 给大视口添加样式 https://codepen.io/cellinlab/pen/bGaxYNb # 处理表格在移动设备的流式布局里，表格的问题特别多。如果表格的列太多，很容易超过屏幕宽度。

2.1K1 0

移动web开发

视觉视口 visual viewport 字面意思,他是用户正在看到的网站的区域.注意:是网站的区域我们可以通过缩放去操作视觉视口.但不会影响布局视口,布局视口仍保持原来的宽度....对于一张50px*50px的图片,在手机Retina屏中打开,按照刚才的物理像素比会放大倍数,这样会造成图片模糊. 在标准的viewport中,使用倍图来提高图片质量,解决在高清设备中的模糊问题....通常使用二倍图,因为iPhone7/8的影响,但是现在还存在3倍图4倍图的情况,这个看实际开发公司需求背景图片注意缩放问题....)可以打开移动端,如果是移动设备打开,则跳转移动端页面....-webkit-tap-highlight-color: transparent; 在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式: -webkit-appearance

2.3K2 1

理解Unity3D中的四种坐标体系

另外，新手朋友们可以记住这么一个快捷键： Ctrl + Shift + F ，可以快速设置相机视口到当前场景窗口的视口位置。下图是视口坐标系和鼠标在屏幕上的坐标系的转换结果： ? 3....其实不然，屏幕坐标转换成世界坐标后物体的 z 值是取决于相机的，因此： gameObject.z = camera.z ，其实在上面视口坐标系介绍中的图中我已经把 Mouse Point 鼠标位置转换成世界坐标...这个在游戏场景中应用的还是比较多的，比如你有这么个需求：两个玩家移动对战，你的相机要把两个移动的玩家随时放置在屏幕显示中。 ? 4. 世界 World 三维坐标系最后，世界坐标系！...我举个例子，我们在游戏开发中会遇到这种情况，你的相机如果直接放到世界中那么必然会需要调整它的旋转角度才能达到满意的视口位置，如何不让相机产生任何旋转就能把世界中的游戏物体放到合适的视口位置呢？...这在有些场景中使用起来很方便，相机已经是父物体世界中的子物体了。 ? 怎么计算相对坐标呢？

5.6K3 2

前端成神之路-移动web开发_流式布局

####2.2视觉视口 visual viewport 字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。...2.3理想视口 ideal viewport 为了使网站在移动端有最理想的浏览和阅读宽度而设定理想视口，对设备来讲，是最理想的视口尺寸需要手动添写meta视口标签通知浏览器操作 meta视口标签的主要目的...: 背景图片宽度背景图片高度; 单位：长度|百分比|cover|contain; cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。...通过判断设备，如果是移动设备打开，则跳到移动端页面。也就是说，PC端和移动端为两套网站，pc端是pc断的样式，移动端在写一套，专门针对移动端适配的一套网站京东pc端： ? 京东移动端： ?...设置为transparent 完成透明*/ -webkit-tap-highlight-color: transparent; /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式

1.6K2 1

终于等到你，新的虚拟键盘API 即将到来，快来先睹为快吧！

幕后发生的事情类似于下图所示。在技术术语中，可见部分被称为视口，而隐藏部分以及当前可见的部分则是布局视口。主要问题是当虚拟键盘激活时，可视视口的大小会缩小。...为桌面使用不同的值假设我们想在桌面浏览器上进一步调整浮动按钮的位置，我们该如何做呢？嗯，我考虑使用 max() 比较函数，结果行得通。...由于 env(keyboard-inset-height) 在桌面上的值为 zero ，所以最大值为 2rem 。在移动设备上，最大值是第二个。...以下是正在发生的事情： right 的值将是 1rem 或 zero 。前者用于桌面，后者用于移动设备（当键盘激活时）。100vw 在这种情况下等于键盘的宽度，因此结果为零。...底部的值将是 1rem 或键盘的高度。在桌面尺寸上，宽度等于变量 --size ，而在移动设备上，它将占据整个宽度，因此使用了 env(keyboard-inset-width, 0) 。

3702 0

移动web开发_流式布局

####2.2视觉视口 visual viewport 字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。...2.3理想视口 ideal viewport 为了使网站在移动端有最理想的浏览和阅读宽度而设定理想视口，对设备来讲，是最理想的视口尺寸需要手动添写meta视口标签通知浏览器操作 meta视口标签的主要目的...: 背景图片宽度背景图片高度; 单位：长度|百分比|cover|contain; cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。...也就是说，PC端和移动端为两套网站，pc端是pc断的样式，移动端在写一套，专门针对移动端适配的一套网站京东pc端：京东移动端： 2.响应式页面兼容移动端（其次）响应式网站：即pc和移动端共用一套网站...设置为transparent 完成透明*/ -webkit-tap-highlight-color: transparent; /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式

1.3K1 0

第118天：移动端开发——视口

它研究了两个内容：meta视口和宽度媒体查询。通常我们都会称上述代码为CSS3的媒体查询功能。使用媒体查询功能能够解决针对桌面级的web设计在移动端不同尺寸下的兼容展现。...（在桌面上，视口的宽度和浏览器窗口的宽度一致）。 1、布局视口移动端设备如果使用视口的宽度和浏览器窗口宽度一样会导致很丑陋的结果。想象一下。...一个针对桌面级的左右结构页面布局，左侧站浏览器窗口的20%，右侧占80%。这样的页面在我们小屏幕的移动端设备上会缩放的非常小。也许会导致大部分数据重叠覆盖，也可能导致数据遮挡无法显示全部。...但我们不能完全忽视移动设备上的屏幕尺寸。所以该说明一下视觉视口了。视觉视口是用户正在看到的网站的区域。用户可以通过缩放来操作视觉视口，同时不会影响布局视口。布局视口还是保持在原来的宽度。...介绍了三种视口布局视口：不再与移动端浏览器相关联，完全是独立的。实际上布局视口的宽度要比屏幕宽出很多。视觉视口：用户看到的网站展示区域，一般视觉视口和设备宽度一致。

9532 0

移动端避免使用100vh

100vh在移动浏览器中以微妙但基本的方式被破坏，这使其几乎无用。最好避免100vh ，而是依靠javascript设置高度以获得完整的视口体验。...当显示地址栏时，由于移动浏览器错误地将100vh设置为屏幕高度而没有显示地址栏，因此屏幕底部被切断。在上图中，应隐藏在屏幕底部的按钮。...例如，尝试在移动浏览器上打开wordsheet.io/demo/V3Y 。无论地址栏是否可见，屏幕都将是视口的高度。...此外，通过在页面首次加载时将高度锁定在适当的位置，可以防止地址栏隐藏在使用该网站的过程中，从而带来尴尬的屏幕调整大小体验。...遗憾的是，在不依赖JavaScript的情况下，仍然没有一种简单的方法来使元素占据整个视口高度。 height: 100vh 非常接近，但鉴于其在移动设备上的局限性，最好避免使用它。

1.9K2 0

移动端基础

Retina（视网膜屏幕）是一种显示技术，可以将更多的物理像素点压缩在一块屏幕内，从而达到更高的分辨率，并提高屏幕显示的细腻程度常见移动端屏幕尺寸： ?...3.2多倍图物理像素比会放大图片倍数，会造成图片模糊在标准viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题背景图片注意缩放问题开发中需要用多倍图，比如需要放一个...50*50px的图片，直接放到iphone8里，会放大二倍，不清晰，这时采取用一张100*100px的图片，手动缩小为50*50px 准备的图片比实际需要的大二倍，就是二倍图，当然也有3倍4倍图 3.3...二倍精灵图在firework里面把精灵图等比例缩放成原来的一半之后根据大小测量坐标注意代码里面background-size也要设置为精灵图原来宽度的一半 4.移动端开发选择 4.1...通过设备判断，如果是移动端打开，则自动跳转到移动端页面。

2K2 0

移动端避免使用100vh

100vh在移动浏览器中以微妙但基本的方式被破坏，这使其几乎无用。最好避免100vh ，而是依靠javascript设置高度以获得完整的视口体验。...如下所示：当显示地址栏时，由于移动浏览器错误地将100vh设置为屏幕高度而没有显示地址栏，因此屏幕底部被切断。在上图中，应隐藏在屏幕底部的按钮。...例如，尝试在移动浏览器上打开wordsheet.io/demo/V3Y 。无论地址栏是否可见，屏幕都将是视口的高度。...此外，通过在页面首次加载时将高度锁定在适当的位置，可以防止地址栏隐藏在使用该网站的过程中，从而带来尴尬的屏幕调整大小体验。...遗憾的是，在不依赖JavaScript的情况下，仍然没有一种简单的方法来使元素占据整个视口高度。 height: 100vh 非常接近，但鉴于其在移动设备上的局限性，最好避免使用它。

2K2 0

浅谈移动端中的视口（viewport）

1.2 三种视口移动端浏览器通常宽度是 240px~640px，而大多数为 PC 端设计的网站宽度至少为 800px，如果仍以浏览器窗口作为视口的话，网站内容在手机上看起来会非常窄。...用下面的方法可以使布局视口与理想视口的宽度一致： "viewport" content="width=device-width"> 实际上，这就是响应式布局的基础。...，所以设置布局视口为理想视口的最佳方法是同时设置这两个属性即使设置了 user-scalable = no，在 Android Chrome 浏览器中也可以强制启用手动缩放 3....下面是常见的设备像素比：普通密度桌面显示屏：devicePixelRatio = 1 高密度桌面显示屏(Mac Retina)：devicePixelRatio = 2 主流手机显示屏：devicePixelRatio...= 2 or 3 对于一张 100px * 100px 的图片，通过 CSS 设置其宽高 { width:100px; height:100px; } 在普通显示屏的电脑中打开是正常的

2.3K2 0

移动端基础

视口可分为布局视口、视觉视口和理想视口 2.1布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题 iOS，Android...是厂商在出厂时就设置好的开发时用的1px不一定等于1个物理像素 PC端页面1px就等于1个物理像素，但移动端不同一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比 3.2...多倍图物理像素比会放大图片倍数，会造成图片模糊在标准viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题背景图片注意缩放问题 3.3二倍精灵图在firework...通过设备判断，如果是移动端打开，则自动跳转到移动端页面。...2.css初始化 normalize.css 移动端CSS初始化推荐使用normalize.css 保护了有价值的默认值修复了浏览器bug 是模块化的拥有详细文档官网地址:

1.4K3 1

移动端H5开发之页面适配篇

最近开发并上线了一款H5项目，在这里想和大家分享一下关于项目中使用到的移动端适配技巧，如果对你们有所帮助的话，就多多点赞收藏各位看官老爷别着急，在讲页面适配之前，我们先来捋一捋viewport（视口）的概念...1.3 理想视口图片视觉视口，用户通过屏幕真实看到的区域我们可以通过调用 window.screen.width / height 来获取视觉视口大小1.4 页面适配方法综上所述，为了在移动端让页面获得更好的显示效果...它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。下图所示，如果根元素html的字体大小为100px的话，1rem也就等于100px。...下图中，左边为contain，右边为cover图片Safe Area是iphoneX之后引入的新概念，指的是一个可视窗口范围，下图可以看到相关区域的定义图片constant(safe-area-inset-top...1.5 总结说了这么多，我们简单的来总结一下：1.对于需要移动端、PC端都正常展示的项目推荐使用rem布局；2.对于只在移动端展示，且内容量较少的页面推荐使用vw布局;当然媒体查询@media也可以用来进行页面适配

7.6K9 2

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭