使用vw定制rem自适应布局

最新推荐文章于 2023-04-23 11:11:38 发布
原创 最新推荐文章于 2023-04-23 11:11:38 发布 · 873 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#使用vw定制rem自适应布局

本文介绍如何结合vw单位和calc函数实现脱离移动端的rem布局，利用JS控制不同屏幕宽高比，但需注意低版本移动端系统兼容性问题。

结合vw单位和calc()脱离移动端使用rem布局需要依赖JS设置不同屏幕宽高比的控制

但是要注意：rem页面布局不兼容低版本移动端系统

/* 基于UI width=750px DPR=2的页面 */
html {
    font-size: calc(100vw / 7.5);
}

 

纯css3使用vw和vh实现自适应的方法
09-24
总结来说，纯CSS3利用vw和vh单位实现自适应布局是一种高效、简洁的方法，尤其适合于追求性能和简洁性的项目。通过理解视口单位的工作原理，开发者可以更好地控制网页元素在不同设备上的表现，提升用户体验。
详解rem 适配布局
09-22
随着手机型号的多样化，前端开发者面临着如何实现跨设备自适应布局的挑战。在这样的背景下，`rem`单位应运而生，成为解决这一问题的关键技术。`rem`（root em）是一种相对单位，它基于根元素（通常是`html`元素）的...
如何利用vw+rem进行移动端布局
11-20
你还在用rem弹性布局吗？在html文件头部放入一大段压缩过的js代码，是不是让你很难受？来了解下vw吧，能让你的代码更纯粹 简单介绍下rem布局方案 rem是css中的长度单位，1rem=根元素html的font-size值。当页面中所有元素都使用rem单位时，你只需要改变根元素font-size值，所有元素就会按比例放大或者缩小。因此我们只需要写一小段js代码，根据屏幕宽度改变html的font-size值，就可以做到弹性布局。这种方法确实便捷，兼容性也很好，是目前非常主流的弹性布局方案。但这种方案有弊端（弊端之一：和根元素font-size值强耦合，系统字体放大或缩小时，会导致布局错乱；
利用vw+rem实现移动web适配布局
weixin_34161064的博客
12-02 361
基本概念 1、单位 Px(CSS pixels) 像素 (px) 是一种绝对单位（absolute units）， 因为无论其他相关的设置怎么变化，像素指定的值是不会变化的 其实是相对于某个设备而言的，不同设备指定的值大小还是有区别的 em 1em与当前元素的字体大小相同（更具体地说，一个大写字母M的宽度）。CSS样式被应用之前，浏览器给网页设置的默认基础字体大小是16像素，这意味着对一个元...
css+ vw&rem 自适应布局
qq_26239917的博客
09-20 588
对于 ipone6 100vw = 750px 1px = 100vw/750 100px= 10000vw/750 =100vw/7.5 html:font-size->1rem->100vw/7.5=100px 在750尺寸下布局完成，在其他尺寸自适应 举例子 在375 按道理rem应该等于50px 就可以等比缩放 看看这个式子在375下是否是50px 100vw/7.5=375p...
CSS布局技巧一【使用vw定制rem自适应布局、使用:nth-child()选择指定元素、使用writing-mode排版竖文、使用text-align-last对齐、使用:not()去除无用属性】
weixin_43837268的博客
09-08 583
使用vw定制rem自适应布局 要点：移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size，结合vw单位和calc()可脱离JS的控制 场景：rem页面布局(不兼容低版本移动端系统) 兼容：vw、calc() /* 基于UI width=750px DPR=2的页面 */ html { font-size: calc(100vw / 7.5); } 使用:nth...
vw结合rem布局
weixin_47409897的博客
05-03 763
dpr物理像素比：设备像素 （设计图的像素 640px等）/ 逻辑像素（CSS像素，在调试窗口看到的 320px等） dpr = 设计图的640 / 逻辑像素 320 = 2 因此假如你在ps量取到的88px，它的逻辑像素为 88 / 2 = 44px 然后根据html中的字体大小（通过媒体查询控制），有着 @media all and (max-width:320px){ html{font-...
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
09-22
在CSS3中，我们有多种工具可以实现这一目标，其中vw和rem单位是移动设备上实现响应式布局的有效手段，而无需依赖JavaScript。 1. **vw单位**： - `vw` 即 "view width" 的缩写，表示相对于视口宽度的单位。1vw等于...
精选资源
rem自适应1920和375的设计图
最新发布
01-13
为了实现rem自适应1920和375的设计图，开发者通常需要编写一段JavaScript代码，动态计算不同屏幕尺寸下应该使用的根元素字体大小。这通常借助于CSS的媒体查询(Media Queries)来实现。通过在JavaScript中设置一个基准...
移动端适配
xiangxiongfly
04-23 649
移动端适配关键点总结：1）移动端使用视口标签<meta name="viewport">控制布局，常用width=device-width和initial-scale=1；2）需区分物理像素（设备分辨率）和CSS像素（逻辑像素），不同设备的像素比（DPR）不同；3）主流设计稿以750px为标准（iPhone6/7/8的2倍尺寸），开发时需按比例适配；4）推荐使用vw/vh单位进行响应式布局，可通过calc()计算或postcss插件自动转换。适配核心是确保页面能根据设备特性自
vw和vh布局
HXL521666的博客
11-20 3097
vw/vh是什么？ vw/vh 是一个相对单位（类似 em 和 rem 相对单位） vw 是：viewport width 视口宽度单位 vh 是：viewport height 视口高度单位 相对视口的尺寸计算结果 1vw = 1/100 视口宽度 1vh = 1/100 视口高度 例如： 当前屏幕视口是 375px，则 1vw 就是 3.75px，如果当前屏幕视口为 414px，则 1vw 就是 4.14px。 注意：和百分比有区别，百分比是相对于父元素来说的，而 vw 和.
VW结合rem进行移动端布局
dizzysunshine的博客
09-14 861
例如： html { font-size：10vw； } div { width: 1rem; height: 1rem; } VW这个单位适合用来适应不同设备的 一个设备的宽度就为100VW 比如说屏幕375px的宽度可以写为100vw，同样的 750px的宽度也是100vw  1vw=1%屏幕 的宽度 在上述例子中我们将根元素的字体大小也就是html的字体...
VUE项目自适应设置使用vw + rem实现页面布局适配
qq_41623635的博客
11-23 1515
使用vw是为了让元素的大小能受到屏幕大小的变化而控制 让整体使用rem的单位,跟随html中font-size的设置 640设计图: 100vw = 满屏 = 320px 1vw = 3.2px ?vw = 100px 100/3.2 = 31.25vw 得出 31.25vw = 100px ......
在rem布局中使用vw
weixin_33940102的博客
05-30 339
最近在知乎上看了这个问题 为什么很多web项目还是使用 px，而不是 rem？，看得大神们讨论，看得也是晕晕的，我也不知道自己看懂没有，整体看下来，比较赞成这个观点： 大屏手机让用户看到的更多，而不是看到的更大 目前移动端兼容不同屏幕尺寸基本上都是rem布局，rem布局的本质是 对页面的等比缩放，就像是一张图片的放大缩小，这个方案在手机上还可以，但是把给iphone7设计的页面用rem原封不动扩展...
vw + rem布局
m0_74871359的博客
02-25 266
vw + rem布局
rem vw轻松自适应手机端
zhazhaji的博客
05-29 830
转载：http://caibaojian.com/vw-vh.html如果不想做自适应，偷懒，那么就只能1000px最大宽度了。
vw布局
weixin_64252848的博客
01-03 1181
vw布局: vw就是视口的宽度，vw 是个相对单位。 不管在什么屏幕下， 我们把屏幕分为平均的 100等份。 1vw = 1 / 100 屏幕的宽度 1vw 和 1% widith: 1vw; width: 1%; vw 和 1% 有没有区别： vw 永远是以视口的宽度为准。· 在 375设计稿下， 1vw 永远是 3.75px 百分比以父盒子为准。 假如父盒子是 200px，则 1% 是 2px px 如何转为vw 我们设计稿是 iphone 678 是 375px， vw 把屏幕划分了100等份， 则
VW布局。
m0_74899618的博客
02-22 201
<!-- vw布局--改变font-size的属性值，不需要js文件 --> <!-- vw viewport width 视口单位，将视口宽度平均分为100份 vh viewport height 视口单位，将视口高度平均分为100份 750px=100vw 1vw=7.5px 850px:分为100份 3vw=25.5px=3*8.5 ●优
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值