- VisualStudio2022插件的安装及使用-编程手把手系列文章
- pprof-在现网场景怎么用
- C#实现的下拉多选框,下拉多选树,多级节点
- 【学习笔记】基础数据结构:猫树
这是我的 模仿抖音 系列文章的第六篇 。
第一篇:200行代码实现类似Swiper.js的轮播组件 第二篇:实现抖音 “视频无限滑动“效果 第三篇:Vue 路由使用介绍以及添加转场动画 第四篇:Vue 有条件路由缓存,就像传统新闻网站一样 第五篇:Github Actions 部署 Pages、同步到 Gitee、翻译 README 、 打包 docker 镜像 。
网上还有很多种方法做适配的,各种方案有利有弊,此文章仅提供一个思路,并不适合每个人 。
rem 的值是根据根元素 html 字体大小的来计算的,即1rem = html font-szie, 。
如果 html 元素没有指定字体大小,那么浏览器默认的字体大小是 16px ,所以 1rem = 16px 如果 html 元素指定 font-size: 1px ,那么 1rem = 1px 同理 html 元素指定 font-size: 3px ,那么 1rem = 3px 同理 html 元素指定 font-size: 1000000px ,那么 1rem = 1000000px 同理 html 元素指定 font-size: 0.000001px ,那么 1rem = 0.000001px 。
rem
和 em
的区别em 是以父元素的字体大小来计算; rem 顾名思义,就是 root 的 em, 所以它是以 html 的字体大小来计算 。
html 设置 font-size: 1px 。
父元素 Parent 设置 font-size: 2px 。
Child
设置 font-size: 16rem
则渲染到界面上的实际大小为 font-size: 16px ,因为他是以 html 来计算,1rem = 1px , 16rem = 16px 。
Child
设置 font-size: 16em
则渲染到界面上的实际大小为 font-size: 32px ,以父级来计算,父级是 2px , 所以 1em = 2px , 16em = 32px 。
把 html 设置 font-size: 1px ,这样我们不用换算 px ,就可直接使用 rem 比如设计稿上写的 24px,我们代码里面直接写 24rem 就可以了 。
不同用户的设备屏幕宽度不同,若每个用户对应的 html 元素 font-size 值相同的话,用户看到的显示效果也是不同的.
可以用 JavaScript 来根据用户的屏幕宽度,动态更改 html 元素上的 font-size 值,从而使实际显示的内容比例始终保持不变,不同用户看到的效果也会保持一致.
比如,设计稿的宽度为 400px ,里面显示了一个宽度为 40px 的盒子。某用户以 800px 宽度的设备来访问,看到的盒子宽度应该为 80px。那么此时在 html 元素的 font-size 值设置为 2px ,然后盒子的宽度采用 rem 单位,设置为 40rem ,那么就能显示出 80px 的盒子了。保持用户看到的和设计稿中的效果比例一致.
所以,html元素的font-size计算公式为:
// 用户设备宽度 / 设计稿标准宽度
document.documentElement.style.fontSize = document.documentElement.clientWidth / 375 + 'px'
vh 和 vw 都是相对于视窗的宽高度,“视窗”所指为浏览器内部的可视区域大小,即window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小。可以简单理解为屏幕百分比,1vh = 屏幕的1% 。
如果需要固定显示屏幕百分比的元素,可以使用 vh/vw 。
vh 需要单独讲一讲,在移动端的Chrome 和 Safari上会显示溢出 ,如下图 。
当地址栏处于视图中时,元素底部被裁剪(右),但我们想要的是元素能完整的占据一屏(左)。 造成这种现象的原因就在于移动端浏览器对于 vh 单位的计算,是不包含地址栏的,也就是说 100vh 的高度会使带有地址栏的视图溢出.
核心问题是移动浏览器(Chrome 和 Safari)有一个“有用”的功能,地址栏有时可见,有时隐藏,从而改变视口的可见大小。这些浏览器并没有随着视口高度的变化而将高度调整100vh为屏幕的可见部分,而是将100vh地址栏设置为隐藏地址的浏览器高度。结果是,当地址栏可见时,屏幕的底部将被切断,从而违背了100vh最初的目的.
使用 window.innerHeight 获取当前视窗的的高度,将高度按 100 份等分,得到视窗的单位高度, 然后通过 js 设置成一个 css 的变量 --vh.
document.documentElement.style.setProperty('--vh', `${vh}px`)
css中使用 。
//表示100vh
height: calc(var(--vh, 1vh) * 100);
//100vh - 60rem
height: calc(var(--vh, 1vh) * 100 - 60rem);
function resetVhAndPx() {
let vh = window.innerHeight * 0.01
document.documentElement.style.setProperty('--vh', `${vh}px`)
document.documentElement.style.fontSize = document.documentElement.clientWidth / 375 + 'px'
}
onMounted(() => {
resetVhAndPx()
// 监听resize事件 视图大小发生变化就重新计算1vh的值
window.addEventListener('resize',resetVhAndPx)
})
通过使用 rem 和 vh/vw 我们就可以适配大多数常见设备啦,如果有特殊需求还可以使用 媒体查询 来单独适配~ 。
最后此篇关于使用rem、动态vh自适应移动端的文章就讲到这里了,如果你想了解更多关于使用rem、动态vh自适应移动端的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
我不知道如何创建这样的元素,以便点之间的距离始终适应屏幕尺寸。 这是我的代码的结果: .line-list { display: flex; justify-content: space-be
最终用户的 paypal 自适应支付流程有点奇怪。 而不是像 paypal express 流程那样工作: 用户完成结帐过程 用户前往 paypal 以授权付款 用户被重定向回网站以确认付款 通知从网
我在我们的游戏网站上添加了一个响应式 Google 广告,这是一个简单的基于静态 bootstrap 的网站: http://dealoround.com这将解决 https://mrcsabatot
简短的问题 使用 routes.resetConfig(newRouteArray) 切换路线的/或更好的方法有什么区别? 对比 在 resize 事件上重新加载 Angular 应用程序并根据屏幕宽
我在尝试仅使用纯 JS 制作自适应 slider 时遇到一些问题。 任务是: 在移动设备中, slider 仅显示文本信息或大幻灯片的一小部分 当宽度增加(通过媒体查询)时, slider 会变大并显
我刚刚创建了一个表单类类型,它有一个选择类型,其中 choice_list 必须根据登录的用户角色进行更改,因此表单类类型需要访问当前用户角色,然后根据它更改 choice_list。 有人能指出一种
我刚刚创建了一个表单类类型,它有一个选择类型,其中 choice_list 必须根据登录的用户角色进行更改,因此表单类类型需要访问当前用户角色,然后根据它更改 choice_list。 有人能指出一种
引入自适应 Autosar 的主要动机是什么? Information provided by Autosar consortium is "AP provides mainly high-perfo
我是 Collection View 和自动布局的新手,我在让单元格大小适应模拟器中的各种设备时遇到了问题。我正在使用流式布局,并在尺寸检查器中设置尺寸。我提供的图像显示了我需要单元格在所有设备上的外
我在使用自适应布局的网站上工作,这意味着网站会适应用户屏幕宽度。有三张图片说明了我的想法,图片显示了浏览器窗口从宽到窄调整大小的三个步骤。 宽屏紫色区域贴在页面左侧,绿色区域适合屏幕的其余部分。 中等
目前我在 flexbox 中有三列(目前在 Plunkr 中的情况)。 当屏幕变小时,我希望第二列位于其他两列之上(Plunkr 中的理想情况)。 我在 https://plnkr.co/edit/Z
我试图让 svg 根据屏幕尺寸显示不同的图像,因此较小的设备显示较小的图像。例如,如果我想要一个覆盖整个 svg 区域的背景图像,就像这样: #t
这是我们的 jQuery 代码: $(document).ready(function(){ $(window).on("load resize", function(){ i
我正在尝试使用 this gem 用于使用 paypal 自适应支付,它需要 development: environment: "sandbox" username: "sandbox_userna
首先,我对 paypal 自适应支付有点陌生,直到现在我只使用 REST api。 在实现自适应支付时,我无法理解应用程序的完整流程。 在 REST api 中,我将用户导航到他付款的 paypal
我有一个具有聊天功能的应用程序,其中 UITextview 用于输入消息。 UITextview 高度必须是动态的(如果用户输入消息,高度必须根据文本长度更改,直到特定高度)。 我怎样才能做到这一点?
我有一个表设置了一个自动递增的 ID。假设我有 ID 1、2、3、4 和 5。当我删除 ID 号 3 时,我希望 ID 4 降为 3,ID 5 降为 4。 这可能吗?这是怎么做到的? 最佳答案 我想你
我有一个幻灯片,其中包含许多不同纵横比的图片。我希望图像在幻灯片中居中。我该怎么做,或者更好的是,我如何自动调整 slider 的大小? 最佳答案 解决中心问题 .bx-wrapper img {
我有一个想要实现的特定布局,但我不知道如何让它在多种屏幕尺寸上稳健地工作。 关键思想是 TextViews 中的信息很重要,而 ImageView 是装饰性的。我希望根据用户屏幕尺寸(最大尺寸)调整
我在响应式网站 ( http://goo.gl/asEovC ) 上运行了来自 labnol.org 的代码: ad = document.getElementById('google-a
我是一名优秀的程序员,十分优秀!