说好的响应式呢?移动端适配方案探究:Rem vs Em vs vw/vh_移动端rem和em的区别-程序员宅基地

技术标签: 人工智能  javascript  开发语言  ecmascript  

说好的响应式呢?移动端适配方案探究:Rem vs Em vs vw/vh

在移动互联网迅猛发展的今天,各种大小、分辨率的设备层出不穷,如何让你的网页或应用在各种设备上都能保持良好的视觉体验和用户交互,成为了每个前端开发者不得不思考的问题。今天,我们就来聊聊在移动端适配这块,常见的几种单位:Rem、Em、vw/vh的使用和它们之间的较量。

1. 各路选手简介

Em:老派风格的代表

Em单位是相对于其父元素的字体大小来定义的。如果没有设置父元素的字体大小,默认是16px。1em等于父元素的字体大小,2em就是父元素字体大小的两倍。听起来似乎很简单,但嵌套使用时会使事情变得复杂,因为em是相对于当前元素的父元素来计算的,层层嵌套下去,计算起来就像是在玩俄罗斯套娃。

Rem:相对单位的革新者

Rem(Root em)单位则是相对于根元素(html)的字体大小来定义的,这就避免了em单位层层嵌套计算的复杂性。在响应式设计中,通过改变根元素的字体大小,我们可以很方便地对整个页面的布局进行缩放。

vw/vh:视窗大小的亲儿子

vw(视窗宽度的1%)和vh(视窗高度的1%)则完全是根据视窗的大小来决定元素的大小,100vw等于视窗的宽度,100vh等于视窗的高度。这使得根据不同设备的屏幕大小动态调整元素大小变得十分简单。

2. 战场实测

来到真实的战场,我们分别以RemEmvw/vh这三种单位来实现一个简单的响应式布局,看看谁能更好地适应不同的屏幕尺寸。

实验一:字体适配

假设我们需要一个标题在手机屏幕上显示为24px,在桌面屏幕上显示为36px。

  • 使用emrem实现时,我们需要在CSS中预设不同设备的根字体大小,然后计算相应的emrem值。
  • 使用vw实现时,我们可以简单地设置字体大小为3.2vw(假设设计稿宽度为750px),这样字体大小就会随着视窗宽度的变化而自动调整。

显然,在这个场景下,vw的方案更具有灵活性和简便性。

实验二:布局适配

假设我们有一个两列布局,希望在手机上以单列显示,在桌面上以两列并排显示。

  • 使用emrem,我们需要通过媒体查询来为不同的设备设置不同的样式规则。
  • 使用vw/vh,我们依然可以利用视窗单位直接定义元素宽度,通过媒体查询配合使用能更加精准地控制布局切换的临界点。

在布局适配方面,vw/vhem/rem各有千秋,vw/vh提供了一种更为直观和灵活的方式来适配不同的屏幕尺寸,而em/rem则在多个场景下表现稳定。

3. 选手综合评价

  • Em:适合于组件内部尺寸的相对调整,但在嵌套使用时需谨慎,以免造成计算上的困扰。
  • Rem:在响应式设计中表现出色,特别是在需要全局缩放元素大小时。
  • vw/vh:在进行视窗宽度或高度的直接适配方面无人能敌,特别适合于灵活的布局设计。

4. 终极适配方案

那么,如何选择这三种单位进行移动端适配呢?答案是:结合使用。是的,没有最好的单位,只有最合适的解决方案。例如,可以使用rem进行大部分布局的设置,利用vw/vh来处理全屏背景图或是某些需要视窗宽度来决定大小的布局,同时不忘记em在组件内部的相对尺寸调整上的便利。

通过灵活运用这三种单位,加上媒体查询的辅助,我们可以实现一个在大多数设备上都表现出色的响应式设计。记住,适应性和灵活性是响应式设计的灵魂,勿忘初心方得始终。

最后,别忘了测试。每一次的尝试和改动,都需要在不同的设备和浏览器上进行测试,确保我们的设计真正达到了预期的效果。只有这样,我们才能真正地说,我们做到了响应式。

算法面试宝典小程序

算法面试宝典小程序提供了字节等大厂面试题库,涵盖7种编程语言的Top5答案,配有详细题解报告和视频讲解。无论您是准备面试还是想提升编程能力,都能轻松掌握各种算法题型,从容面对挑战!

欢迎加入wx前端技术交流群,二维码长期有效

在这里,我们分享技术经验、职位机会、面试总结,甚至人生感悟。无论您是前端开发新手还是资深工程师,这里都有丰富的资源和热情的交流氛围等待着您。加入我们,与同行们一起探讨前端技术发展趋势,共同成长,共享精彩!

探讨前端技术发展趋势,共同成长,共享精彩!

[外链图片转存中…(img-TLd44w2u-1712327420807)]

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zhaodash97/article/details/137411256

智能推荐

掌控安全 暖冬杯 CTF Writeup By AheadSec-程序员宅基地

文章浏览阅读752次,点赞9次,收藏29次。本来结束时发到了学校AheadSec的群里面了的,觉得这比赛没啥好外发WP的,但是有些师傅来问了,所以还是发一下吧。

如何让vscode中的cmakelist高亮显示_linux vscode 代码高亮-程序员宅基地

文章浏览阅读4.5k次。因为甚少有人正确回答,其实很简单,安装插件cmake,居然被少有的几篇博客带偏,最后bing了国际版得到国际友人的指点https://github.com/microsoft/vscode-cmake-tools/issues/534没啥就是安装插件cmake_linux vscode 代码高亮

java 换行符 常量_6.java常量-程序员宅基地

文章浏览阅读1.1k次。Java中常量的分类:整数常量 : 所有整数小数常量 : 所有小数布尔常量 : 只有true和false字符常量 :使用’’引起来的单个字符字符串常量 :使用“”引起来的字符序列,“” 、“a” 、” ”null常量 : 只有一个值nullchar类型char类型表示的是单个字符类型,任何数据使用单引号括起来的都是表示字符。字符只能有一个字符,比如:普通的老百姓穿上军装就是军人。注意:特殊字符的..._java换行符用単引吗

计算机网络层之 P2P_p2p参与通信的主机叫-程序员宅基地

文章浏览阅读1.6k次。原文地址:http://write.blog.csdn.net/postedit一、什么是P2P对等网络(PeertoPeer,简称P2P)也称为对等连接,是一种新的通信模式,每个参与者具有同等的能力,可以发起一个通信会话。这个定义有点抽象,下面就来简单地解释一下。粗略地讲,应用程序可以设计成采用客户机/服务器体系结构或对等体系结构(P2P)。我们日常生活中的许多应用程_p2p参与通信的主机叫

Python连接MongoDB集群_python 连接mongodb集群-程序员宅基地

文章浏览阅读3.2k次。1、安装pyMongo(前提:必须安装了python和pip)打开cmd输入pip instal pymongo,等待安装完成;2、连接MongoDB代码如下:from pymongo import MongoClient, ReadPreferencedef db_conn(): client = MongoClient(['192.168.2.188:20000', '1..._python 连接mongodb集群

Baumer(堡盟)工业相机SDK开发 C++_baumer gapi sdk 安装教程 windows-程序员宅基地

文章浏览阅读3k次,点赞4次,收藏26次。本文介绍了Baumer相机BGAPI 2的使用方法以及相机采集Demo的开发流程。​SDK链 接 :https://pan.baidu.com/s/1jyozD7v4mfchzbv2GtnGig 提取码:puol​_baumer gapi sdk 安装教程 windows

随便推点

ORA-01918: 用户 'SCOTT' 不存在 解决方法_?????: ora-01918: ?? 'scott' ???-程序员宅基地

文章浏览阅读7.6k次。SQL> alter user scott account unlock;alter user scott account unlock*第 1 行出现错误:ORA-01918: 用户 ‘SCOTT’ 不存在找到scott.sql 文件SQL> @D:\tudou\product\11.2.0\dbhome_1\RDBMS\ADMIN\scott.sqlSQL> conn..._?????: ora-01918: ?? 'scott' ???

Arduino grove 继电器_grove relay-程序员宅基地

文章浏览阅读288次。继电器 arduinoSIG -> D4VCC -> 5VGND -> GNDint relayPin = 4;void setup() { // put your setup code here, to run once: pinMode(relayPin, OUTPUT);}void loop() { //..._grove relay

ubuntu 搭建LAMP(Apache+PHP+MYSQL)开发环境-程序员宅基地

文章浏览阅读772次。(1)安装MYSQLsudo apt-get install mysql-server mysql-client(2)安装Apachesudo apt-get install apache2(3)安装PHPsudo apt-get install php5 libapache2-

three.js 源码注释(九十三)extras/core/Path.js_three.path.js-程序员宅基地

文章浏览阅读2.3k次。Path类创建2d的路径,包括点,线,和立方体,类似于HTML5 2D画布的API,curvePath类的扩展.Curve2维向量数组_three.path.js

rk3399下iic驱动方式一 -----Bus-devices-driver_iicrk-程序员宅基地

文章浏览阅读2k次。先简要说明一下东西, 板子是rk3399的板子,跑的安卓系统,安卓7.1,由于板载一块音频编解码芯片,正好可以支持iic接口,于是就尝试读取他的Device ID 0x6281 寄存器地址0xff,内核文档下kernel\Documentation\iic目录下有iic相关的文档说明该内核版本下相对上一版本(iic的版本)改动的说明,该目录下upgrading-clients文件中有说明,U..._iicrk

python实现大文件切片及组装_python切片文件组合-程序员宅基地

文章浏览阅读253次。有助于实现文件切片传输,断点续传等。_python切片文件组合

推荐文章

热门文章

相关标签