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

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

一、 ---- 浏览器 显示 网页页面内容 的 屏幕区域 被称为 " " ; 分为以下几个大类 : 布局 视觉 理想 上面的 , 只需要关注 理想 即可 ; 1、布局...在移动设备上,由于屏幕较小,需要 对网页进行缩放以适应屏幕大小,因此布局也需要进行调整。 移动设备上的布局 通常比 桌面浏览器中的布局 小,因为 移动设备屏幕的大小通常比桌面屏幕小。...移动设备浏览器中,设备屏幕较小,页面需要进行缩放以适应屏幕大小,视觉 会比 布局 小。...下图中 , 在下面的 视觉 中 , 网页只能被看到一部分区域 ; 3、理想 ( 网页大小 = 设备大小 ) 理想 - Ideal Viewport 指的是指在浏览器中,使 网页布局 和 显示最佳的大小...理想的大小 取决于 网页的内容和布局,通常应该 与布局的大小相同 。 通过设置理想,可以 使网页在不同设备上具有相同的布局和显示效果,无需进行缩放和滚动。

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

    前端开发-

    概述简单理解就是可视区域的大小我们称之为在 PC 端,大小就是浏览器窗口可视区域的大小 console.log(window.innerWidth, window.innerHeight);图片在移动端, 大小并不等于...窗口 大小, 移动端视宽度被人为定义为了 980图片那么在移动端为什么是 980 而不是其他的值呢,因为过去网页的版心都是 980,乔老爷子为了能够让网页在移动端完美的展示, 所以将 iOS 手机的大小定义为了...980,后来谷歌也觉得这是一个非常牛 X 的方案, 所以 Android 手机的也定义为了 980。...980 带来的问题,虽然移动端自动将宽度设置为 980 之后让我们可以很完美的看到整个网页,但是由于移动端的物理尺寸(设备宽度)是远远小于宽度的,所以为了能够在较小的范围内看到口中所有的内容

    17200

    IntersectionObserver 是否进入了(viewport)

    是否进入的使用场景还是很多的,一般第一时间想到的就是监听滚动,关键是scroll很密集,计算量很大,如果做个防抖节流性能还能优化一些,否则性能问题就很有可能发生。...刚刚进入(开始可见)和完全离开(开始不可见)会被触发,初始化不管可见不可见也会触发。...height、left、right、top、width、x、y intersectionRatio:目标元素的可见比例,跟threshold设置的有关,默认0,1 intersectionRect:目标元素与...rootBounds:根元素的矩形区域的信息,getBoundingClientRect获取的数据bottom获取的数据 target:被观察的目标元素,是一个 DOM 节点对象 time:可见性发生变化的时间...之后要是有机会,我会直接使用这个API,实在兼容性不行的话再使用监听滚动。

    93120

    监听 javascript 对象的变化

    先给出监听的概念:监听一个对象的某个属性是否发生变化,在该属性变化时立即触发制定的回调函数。 实例:购物车,想必大家肯定都接触过,那它的功能如何去实现呢?...以某宝购物车截图为例: 一、功能概述 选中商品 -- 总数,总价发生变化 增加单类商品数量 -- 总数, 总价,单类商品总价 发生变化 删除 单类商品 -- 总数总价发生变化 二、数据模型 单个商品数据模型...监听模式的另一个表达方式是观察者模式,其实并没有什么高级的。...购物车这个功能用监听模式可以描述为:当修改什么的时候,什么发生变化。...2. github上也有一些watch.js的项目, 推荐一个:https://github.com/melanke/Watch.JS 具体使用情况和对它的评价网上有不少,大家可以看一下。 3.

    3.2K00

    第118天:移动端开发——

    我们称它为 布局。CSS布局会根据它来计算并被约束。 看下面的图例,体会一下布局 ? 2、视觉  虽然独立的布局很大程度上帮助了桌面网站过渡到手机上。...所以该说明一下视觉了。 视觉是用户正在看到的网站的区域。用户可以通过缩放来操作视觉,同时不会影响布局。布局还是保持在原来的宽度。 看下图说明一下视觉区域 ?...如上图,红色箭头之间的区域就是视觉的区域。它和设备的屏幕一样宽,并且它的CSS像素的数量会随着用户缩放而改变。 3、理想 布局的默认宽度并不是一个理想的宽度。...理想仍是为移动端设备准备的。只有手动添加meta标签方才生效。如果没有meta标签,那么布局将会维持它的默认宽度。 如下代码,告诉浏览器,布局的宽度应该与理想的宽度一致。...介绍了三种 布局:不再与移动端浏览器相关联,完全是独立的。实际上布局的宽度要比屏幕宽出很多。 视觉:用户看到的网站展示区域,一般视觉和设备宽度一致。

    95020

    浅谈移动端中的(viewport)

    而移动端则较为复杂,它涉及到三个:布局(Layout Viewport)、视觉(Visual Viewport)和理想(Ideal Viewport)。 本文主要讨论移动端中的。...CSS 像素(CSS pixels) 是 CSS 和 JS 中使用的一个抽象概念。它和物理像素之间的比例取决于屏幕的特性(是否为高密度)以及用户进行的缩放,由浏览器自行换算。...因此,引入了布局、视觉和理想三个概念,使得移动端中的与浏览器宽度不再相关联。...视觉(visual viewport) 视觉是用户当前看到的区域,用户可以通过缩放操作视觉,同时不会影响布局。 ?...视觉和缩放比例的关系为: 当前缩放值 = 理想宽度 / 视觉宽度 所以,当用户放大时,视觉将会变小,CSS 像素将跨越更多的物理像素。

    2.2K20

    (六)监听响应数据的变化

    watch 监听响应性数据的变化 一、监听基本类型的响应性数据 const data = ref('') // 监听基本类型的参数,第一个传递的参数是需要监听的值, 第一个参数是一个回调函数,回调函数又两个值...,一个是,监听数据变化过后的值,第二个是变化之前的值 watch(data, (newVal, oldVal) => { console.log(newVal, oldVal) }) //...深度监听 深度监听第一种方法 这里虽然监听到了,但是我们改变数据打印的时候会发现,newVal 和 oldVal 是一样的,这是因为虽然 watch 监听到了属性里面值的变化了,但是对象始终是一个引用对象...,就需要配置第三个属性,他是一个对象 { deep: treu, // 开启deep 就可以监听到对象的变化了 } ) 监听对象前后的数据...监听对象的新值和旧值 我们在上面这个方法中看见了,虽然 watch 监听到了 对象内部的属性的变化了,但是无法监听到对象修改前的值,如果业务不需要监听修改前的值,可以采用上面这种写法 深度监听第二种方法

    1.7K20

    动态监听DOM元素高度变化

    在这看似简单的需求当中,其实涉及到了一个难点,那就是怎样动态的监听到内容区域的高度变化?...那么我们要怎么使用这个 API 来监听目标区域的高度变化呢?...但是它确实可以监听到认为修改容器的高度产生的变化,比如:contentRef.current.style.height = '1000px',这个 api 是可以监听到这一操作的,但是并不符合我们的场景...DOM 尺寸变化的,只不过它还处于试验阶段,各浏览器的兼容性很差,所以基本不考虑 具体使用方法可以参考这篇文章:检测 DOM 尺寸变化 JS API ResizeObserver 简介 它现阶段各浏览器的兼容性情况...监听 DOM 元素的高度变化,可以采用内嵌 iframe 的方式来解决。 紧追技术前沿,深挖专业领域 扫码关注我们吧!

    4.9K30

    监听Android中的网络变化

    Throwable e) { Log.w(TAG, "registerReceiver err:", e); } } 在这个方法中,我们创建了一个IntentFilter对象,并设置了监听的网络变化广播...三、处理网络变化 当网络发生变化时,系统会发出相应的广播,我们的ConnectReceiver将会接收到这些广播并调用onReceive()方法。在这个方法中,我们可以处理网络变化。...根据这些判断结果,我们可以得出网络是否发生了变化。 五、总结 本文介绍了如何在Android中监听网络变化。首先,创建一个广播接收器(BroadcastReceiver)来接收系统发出的网络变化广播。...然后,在代码中动态注册广播接收器,并设置监听的网络变化广播。当网络发生变化时,系统会发出相应的广播,广播接收器将接收到这些广播并调用onReceive()方法,在这个方法中可以处理网络变化。...为了判断网络是否发生变化,我们需要比较当前网络类型和最后一次记录的网络类型,如果不同则认为网络发生了变化

    28310

    师于源码 | Flutter 区域双向滑动

    比如 AndroidStudio 的文件树和编辑器区域,当宽度较窄时,水平方向通过拖拽底部滚动条来滚动。...到这里,就离真相越来越近了, buildCodeArea 方法中很可能就是区域双向滑动实现的场所。...也有由于这一点,之前一直没能实现区域双向滑动的功能。下面是在竖直方向上 ScrollBar 构造时存在的一行代码:可以只监听竖直滚动的通知,忽略水平方滚动向通知。...如下所示,蓝色区域内有一行文字,当窗口宽度缩小到文本溢出时,底部会呈现滑动条支持水平滑动: 这里先总结一下实现区域的双向滚动的步骤: 需要两个可滑动的: SingleChildScrollView...需要两个 Scrollbar 用于控制滑动,并且指定 ScrollController, 关联 [滑动] 和 [滑动条]。

    50920
    领券