移动端网页开发-vh/vw/rem

2024-05-13 19:03:08

第一次做移动端网页开发，接触到的几个单位vh/vw/rem，记录一下。
vh：相对可见视区的高度
vw：相对可见视区的宽度
rem：相对根元素的字体大小

“视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小

height:100vh

在做视区覆盖时，使用height:100vh，在chorme开发者工具切换各设备时，各尺寸屏幕完美适配。但是使用手机chrome浏览器查看时，发现页面可以滑动，感觉高度好像高了一样（其实并没有，chrome没有将100vh高度调整为视口高度变化时屏幕的可见部分，而是将100vh设置为浏览器的高度，从而在地址栏显示或者隐藏时会显示不同，其他手机浏览器也有类似的问题），很不舒服。所以在移动端尽量避免使用100vh，改为js设置视口高度:window.innerHeight

rem布局

关于rem，一般都是设置iphone6的font-size为16px（在scale=1时，font-size=16）。可以动态设置来适配其他设备。

根元素fontSize公式：width/fontSize = baseWidth/baseFontSize
// 其中，baseWidth, baseFontSize是选为基准的设备宽度及其根元素大小，width, fontSize为所求设备的宽度及其根元素大小，来自https://blog.csdn.net/ws379374000/article/details/78686101一文

vw布局

在vw布局中，盒子的高宽、内外边距、字体大小等都可以使用vw。可以使用scss语法定义一个函数来转换px为vw。关于vw某些机型无法适配的问题，可以参考这篇文章：https://blog.csdn.net/zjw0742/article/details/79337336

移动端网页开发-vh/vw/rem相关推荐

移动端网页开发三（纠结适配的那些年）
前面两篇文章介绍了移动端网页开发所要具备的基础知识. 今天着重来讲解移动端的适配方案. 做PC端页面的工程师聊的最多的是兼容,这是因为浏览器之间的差异引起的.而移动端基本是没有兼容问题的,全是css3 ...
推荐3款移动端网页开发调试神器
web前端教程用大白话,来讲编程最近有小伙伴在微信上跟我聊到了移动端网页开发调试困哪的问题,这个相信很多前端开发者都遇到过. 有一天,测试妹子拿着测试手机过来找你,说页面打不开. 你心想:怎么可能 ...
移动端网页开发)------响应式网页
移动端网页开发移动端网页开发的两种方案: 响应式网页开发一个新的网站.使用移动端的布局方式. 响应式网页概念同一个网页会根据视口的不同,显示不同的样式. 优缺点优点面对不同分辨率的设备比较 ...
移动端html怎么调试工具,移动端网页开发调试神器Eruda的介绍与使用技巧
前言众所周知,我们在做移动端Web开发的一大痛点就是,在真机运行下无法查看console.log日志和其他信息如网络请求.显示本地存储等信息.如果网页是运行在手机浏览器中还算好,可以把网址在电脑上打 ...
css pc和mobile,初识pc端和mobile端CSS适配利器—vw+rem+CSS locks
前言大概五月份的时候,我下定决心写自己的博客系统,于是断断续续花了近一个月的时间琢磨Nestjs,写完了接口部分.六月份因为工作的原因就搁置了,说来也惭愧,直到九月中旬,才将它拾起.半个月后,后台部 ...
移动端网页开发（一）
一.项目代码初始化 1.打开index.html将<meta></meta>标签补充完整 <html><head><meta charset=&q ...
移动端/PC端网页开发建议
作者:黄玄链接:https://www.zhihu.com/question/25836425/answer/31564174 来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...
移动端布局-px转vw、vh
移动端布局长度单位转换一.场景描述二.实现方式 1.安装 2.配置 3.其他配置三.多规则配置一.场景描述一般我们做移动端网页开发时,设计稿一般都是固定的宽高的(比如750*1334).但是 ...
网页开发的一些尺寸单位
目录一.px像素单位二.rem单位三.vw和wh单位一.px像素单位 px单位是绝对单位,一般用于pc端网页开发.因为是绝对单位所以在移动端上的使用体验并不是很好举例: 代码 <!DO ...

最新文章

热门文章