em,rem,vw,vh,px,rpx,%的用法

单位特性注意事项
em相对于父元素的字体大小与rem相比,em的值会随着父元素字体大小的变化而变化,这可能导致嵌套元素的大小难以预测。
rem相对于根元素(通常是html元素)的字体大小与em相比,rem的值不会受到父元素字体大小的影响,这使得它更容易控制和预测。
vw相对于视口宽度的1%与vh相比,vw是基于视口的宽度,而vh是基于视口的高度。它们都是相对于视口的比例,而不是相对于任何特定的字体大小或元素大小。
vh相对于视口高度的1%与vw相比,vh是基于视口的高度。它们都是相对于视口的比例,而不是相对于任何特定的字体大小或元素大小。
px绝对单位,1px等于屏幕上的一个物理像素点px是一个固定值,不会根据视口大小或字体大小进行缩放。这使得它在某些情况下更精确,但也可能导致响应性问题。
rpx微信小程序特有的单位,1rpx等于屏幕宽度的1/750rpx是微信小程序中特有的,它旨在提供一种在不同设备上保持一致性的方法。它基于屏幕宽度,但有一个固定的比例。
%相对于父元素的百分比%是相对于父元素的大小。这意味着它会随着父元素的变化而变化,这可以用来创建响应式设计,但也可能导致嵌套元素的大小难以预测。
  1. px(像素)

    • 像素是最基本的单位,它代表屏幕上的一个点。
    • 通常用于固定布局,因为它不会根据视口大小或字体大小变化。
    .example {width: 200px;height: 100px;font-size: 16px;
    }
    
  2. em

    • em是相对于当前元素的字体大小。如果当前元素没有设置字体大小,则相对于父元素的字体大小。
    • 常用于响应式设计和可伸缩的布局。
    .example {font-size: 1em; /* 假设父元素字体大小为16px,则这里的1em等于16px */padding: 1em; /* 相对于当前字体大小 */
    }
    
  3. rem(root em)

    • rem是相对于根元素(即html元素)的字体大小。
    • 在响应式设计中,rem可以提供更好的可预测性,因为它不会受到嵌套元素字体大小的影响。
    html {font-size: 16px;
    }
    .example {font-size: 1rem; /* 始终等于16px */margin: 2rem; /* 始终相对于根元素的字体大小 */
    }
    
  4. vw(视口宽度)

    • vw是视口宽度的1%。例如,100vw等于视口的100%宽度。
    • 用于创建基于视口宽度的响应式布局。
    .example {width: 50vw; /* 元素宽度为视口宽度的50% */height: 50vw;
    }
    
  5. vh(视口高度)

    • vh是视口高度的1%。例如,100vh等于视口的100%高度。
    • 同样用于创建基于视口高度的响应式布局。
    .example {width: 50vh; /* 元素宽度为视口高度的50% */height: 50vh;
    }
    
  6. %(百分比)

    • 百分比是相对于父元素的尺寸。例如,宽度50%意味着宽度是父元素宽度的50%。
    • 常用于创建灵活的布局,特别是在流式布局中。
    .example {width: 50%; /* 元素宽度为父元素宽度的50% */height: 50%;
    }
    
  7. rpx(微信小程序单位)

    • rpx是微信小程序特有的单位,它可以根据屏幕宽度进行自适应。规定屏幕宽度为750rpx。
    • 在不同设备上,1rpx所代表的实际像素值是不同的,但屏幕宽度始终是750rpx。
    /* 微信小程序示例 */
    .example {width: 750rpx; /* 无论屏幕大小,宽度始终等于屏幕宽度 */font-size: 24rpx; /* 自适应字体大小 */
    }
    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/15509.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

下载CentOS系统或者下载Ubuntu系统去哪下?

因为Centos官网是挂在国外的服务器上,下载镜像时相比于国内的下载速度会慢很多,分享国内的镜像站去阿里巴巴下载Centos镜像。 首先分享两种下载方式,如果只想下载Centos那么就访问方式一的下载地址即可,如果还想下载其他的系统&a…

关于Broken pipe异常的一点学习记录

什么是Broken pipe? pipe,管道,管道里面自然就是数据,通过指从文件或网络套接字读取的数据。当一个进程试图向一个已关闭的管道(pipe)写数据或者从一个已关闭的通道读数据时就会出现中断,也就是Broken pi…

【算法设计与分析】基于Go语言实现动态规划法解决TSP问题

本文针对于最近正在学习的Go语言,以及算法课实验所需内容进行Coding,一举两得! 一、前言 由于这个实验不要求向之前的实验一样做到那种连线的可视化,故可以用图形界面不那么好实现的语言进行编写,考虑到Go语言的…

v-if 和 v-for 为什么不建议一起使用 ?

在 Vue.js 中,通常不建议在同一个元素上同时使用 v-if 和 v-for 指令,原因主要有以下几点: 优先级问题: 在 Vue 2.x 中,v-if 和 v-for 在同一个元素上使用时,v-if 的优先级会比 v-for 高。这意味着 v-if 会…

C# 结合 JS 暴改腾讯 IM SDK Demo

目录 关于腾讯 IM SDK Demo 范例运行环境 设计思路 服务端生成地址 IM 服务端接收 IM 客户端程序 小结 关于腾讯 IM SDK Demo 腾讯云即时通信 IM SDK 提供了单聊、群聊、关系链、消息漫游、群组管理、资料管理、直播弹幕等功能,并提供完备的 App 接入及管…

数据可视化第9天(利用wordcloud和jieba分析蝙蝠侠评论的关键字)

数据可以在这里下载 https://github.com/harkbox/DataAnalyseStudy WordCloud wordcloud可以很方便的生成词云图,方便的提供可视化可以直接使用pip install wordcloud进行安装如果使用的是Anaconda,可以使用conda install进行安装 下面看一个简单的例子 txt &qu…

【游戏引擎】Unity动画系统详解

持续更新。。。。。。。。。。。。。。。 【游戏引擎】Unity动画系统详解 Unity动画系统详解简介关键帧动画创建关键帧动画的步骤: Mecanim动画系统Mecanim的关键组件:使用Mecanim创建动画的步骤: 动画控制器动画控制器的高级功能&#xff1a…

Linux文件操作——实现cp指令以及模拟修改配置文件

cp指令格式 cp [原文件] [目标文件] cp 1.c 2.c 功能是将原文件1.c复制后并改名成2.c(内容相同,实现拷贝) 这里需要引入main函数的参数解读: 我们在定义函数时许多都带有参数,输入参数后便可进行定义函数内的功能执行,而main函数也不例外,其函数定义和参数格式如下:…

【STM32CubeIDE】软件硬件SPI+六针OLED使用

前言 本文将介绍STM32 6针OLED的使用,分别使用软件和硬件两种SPI驱动方式,最终实现OLED显示TEST-ok字符和数字累加刷新显示 软件平台:STM32CubeIDEHAL库 硬件:STM32F103ZET6(正点原子战舰V3)六针OLED 题外话: 最…

Commons-Collections篇-CC1链小白基础分析学习

1.介绍 Apache Commons工具包中有⼀个组件叫做 Apache Commons Collections ,其封装了Java 的 Collection(集合) 相关类对象,它提供了很多强有⼒的数据结构类型并且实现了各种集合工具类,Commons Collections被⼴泛应⽤于各种Java应⽤的开发&…

Windows安装VMware(Broadcom)

1.安装前提 1.检查BIOS中是否开启了虚拟化技术。1.1 打开任务管理器,查看性能,CPU部分,虚拟化处于“已启用”状态。1.2 如果没有开启,则需要进入BIOS系统,将 Intel Virtualization Technology改为Enalble。2.下载VMwa…

linux下删除nginx进程

centos 环境 nginx占用80端口,正常情况无法停止、删除。 使用netstat ,ps等命令一旦查到80端口 nginx进程号,使用kill -9 删除后发现nginx进程号还是存在,只是变了个号码。 使用如下命令 lsof -iTCP -sTCP:LISTEN -P | grep :80 然后再 ki…

卷积神经网络CNN动态演示和输出特征图计算公式

目录 一、卷积运算 1、卷积(Convolution) 2、填充(Padding) (1)Valid Padding (2)Same Padding 3、步长 4、卷积核大小为什么一般为奇数奇数? 5、卷积核kernel和…

React Native 之 Alert()和prompt()(十三)

在 React Native 中,Alert 是一个全局的 API,用于显示原生系统的对话框。与 Web 浏览器中的 alert() 函数类似,但它提供了更多的功能和更好的用户体验,因为它是基于原生系统的对话框,而不是基于 Web 的弹出框。 alert(…

笔记88:LeetCode_134_加油站

前言: 前言1:这个题的题目条件给的不太严谨,题目描述中说“如果存在解,则保证它是唯一的”,通过我的实践,我发现这句话的意思其实是本题的所有样例只有两种情况,无解/有唯一解;而不可…

迅睿 CMS 中开启【ionCube 扩展】的方法

有时候我们想要某种功能时会到迅睿 CMS 插件市场中找现有的插件,但会有些担心插件是否适合自己的需求。于是迅睿 CMS 考虑到这一层推出了【申请试用】,可以让用户申请试用 30 天,不过试用是有条件的,条件如下: php 版…

Python入门第三课——Python 数据类型(详细)

文章回顾 Python入门第一课——Python起步安装、Sublime Text安装教程,环境配置Python入门第二课——Python的变量和简单数据类型 目录 文章回顾前言一、Python的详细数据类型二、各种数据类型和使用方法1.Number(数字)2、String&#xff08…

Midjourney是一个基于GPT-3.5系列接口开发的免费AI机器人

Midjourney是一个基于GPT-3.5系列接口开发的免费AI机器人,旨在提供多领域的智能对话服务。Midjourney在不同领域中有不同的定义和应用,以下是对其中两个主要领域的介绍: Midjourney官网:https://www.midjourney.com/ 一、AI绘画工…

Windows11搭建Flutter3开发环境

下载:https://docs.flutter.cn/get-started/install/windows/desktop?tabdownload 下载以后解压到C盘: 将bin目录添加到环境变量PATH: 打开终端,输入: flutter doctor执行下面的命令,同意安卓协议&am…

llama3-8b-instruct-262k微调过程的问题笔记(场景为llama论文审稿)

目录 一、环境配置 1.1、模型 1.2、微调环境 1.3、微调数据 二、发现的问题 2.1、过拟合问题 2.2、Qlora zero3 保存模型时OOM问题(已解决) 一、环境配置 1.1、模型 llama3-8b-instruct-262k (英文) 1.2、微调环境 Package Version ------------------…