什么是rem单位？rem是一个灵活的、可扩展的单位，由浏览器转化像素并显示。与em单位不同，rem单位无论嵌套层级如何，都只相对于浏览器的根元素（html元素）的font-size。默认情况下，html元素的font-size为16px， rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变fon
在讨论“iOS vw rem 和安卓 vw rem”时，首先我们要明确这两个概念是什么。vw（视口宽度，viewport width）和 rem（根元素字体大小基数）是用于响应式设计的单位。这在不同的操作系统上可能会有一些差异，首先来看看这些背景信息，以及它们各自的适用场景。
### 背景定位
响应式设计的提出是为了适应多种不同尺寸的设备，尤其是移动设备。iOS 和安卓在处理 vw 和 rem
rem是什么 rem（font size of the root element）是指相对于根元素的字体大小的单位。 1rem等于根元素htm的font-size，即只需要设置根元素的font-size，其它元素使用rem单位时，设置成相应的百分比即可。 为什么需要rem px：是相对于显示器屏幕分辨率而言的相对长度单位。在移动端，因为手机分辨率种类颇多，不可能一个个去适配，这时px就显得
vw/vh rem px 三者的转换（快速入门移动端页面编写）1：三种单位的转换2：如何适配移动端的不同设备前提知识：
手机端的长宽是实际设计过程中的两倍比如手机端是 750 * 1200那么具体实现的时候应该是 375px * 600px好，记住这个结论，当有一张设计图摆在你面前的时候，你只需要将它长宽除以二，就没问题了。这样说不知道有没有讲明白，没有的话请留言。三种单位的转换vw / v
转载
2024-05-21 14:58:50
82阅读
em，rem，vw和他的兄弟，% 弹性布局
移动端弹性布局中，字号单位、以及包裹文字的元素宽高单位，到底是用em，rem还是vw？先说vw和他的兄弟，vh，vmin，vmax。1vw ＝ 1/100th viewport width相对于视口的宽度。视口被均分为100单位的vw。简单来说，如果可视区宽度为300px，高度为200px，那么1vw = 3p
转载
2024-04-16 07:05:59
188阅读
前言 在传统项目开发中，我们只会用到 px、%、em 这几个单位长度，它们可以适用大部分项目的开发，并且拥有较好的兼容性。 而从 css3 开始，浏览器对逻辑单位的支持又提升了新的境界，增加了 rem、vh、vw、vm 等新的单位长度。 新技术的出现必然是为了解决旧技术存在的问题和不便，我们利用这些
原创
2022-11-26 10:06:17
10000+阅读
文章目录一、rem 基础二、 媒体查询三、 Less 基础四、rem 适配方案 一、rem 基础rem (root em)是一个相对单位，类似于em，em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元 素大小。/* 根html 为 12px */
html {
font-
我们在编写样式的时候会遇到这样问题移动端动态计算字体的大小： 这个时候我们首先会想到使用rem，响应式布局的单位我们第一时间会想到通过rem单位来实现适配，但是它还需要内嵌一段脚本去动态计算跟元素大小。比如： 使用脚本（方法一）(function (doc, win) {
let docEl = doc.documentElement
let resizeEvt = 'orientat
如果你了解设计稿你就懂了，其实很简单：首先要先说明：移动端的设计稿一般是width：750px，height：auto（这里指的是不确定），100vw = 100%，这个也没有问题吧；那么，设计稿拿过来，我们可以得出：750px = 100vw，这个也没有问题吧，那么1px等于多少vw呢？ 是不是 ...
转载
2021-10-27 21:26:00
968阅读
2评论
px px就是pixel像素的缩写，相对长度单位，网页设计常用的基本单位。像素px是相对于显示器屏幕分辨率而言的 em em是相对长度单位。相对于当前对象内文本的字体尺寸（参考物是父元素的font-size） 如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸 特点： 1. em的值并不是固 ...
转载
2021-07-12 15:37:00
662阅读
2评论
vue cli3项目使用rem和vw实现自适应的两种方法前言之前我写过两篇cli2项目自适应配置的文章,不过现在遇到的vue项目大多是cli3项目所以觉得有必要总结一下cli3项目自适应方法,在网上找了一篇不错的文章安装配置vue-cli3 构建的项目相较于vue-cli2 构建的项目精简了许多，将一些默认配置进行了更好更严密，让开发变得更高效的封装。一. 使用postcss-px2rem自适应1
转载
2024-07-31 20:22:19
39阅读
响应式布局，流体布局，自适应布局，静态布局等等，这是移动设备的飞速发展，前端人员不得不跟上潮流的一个方向。实际上各种设备尺寸，分辨率大都不同，真的适应各种设备依旧是不现实的，首先是浏览器差异化，让我们去hack，现在是终端问题，让我展现出不同的设备不同的样式，折腾来折腾去，终于我们走进了热火朝天的响应式布局，自适应只能算是响应式布局的一个子集吧，对于流体个栅格后面会再次提到，有兴趣可以关注。首先讲
1.px px就是 pixel像素，相对于屏幕分辨率的长度单位； 2.em 相对单位，相对父元素的font-size,具有继承的特点。 如当前父元素的字体尺寸未设置，
原创
2022-07-06 11:49:01
282阅读
px、em、rem、%、vw、vh单位 1 、px px就是pixel（像素）的缩写。但是在设备本身上，PX 单元是固定的，不会根据任何其他元素进行更改。对于响应式站点，使用 PX 可能会出现问题，但它们对于保持某些元素的大小一致很有用。如果你有不应调整大小的元素，那么使用 PX 是一个不错的选择。
转载
2022-12-18 01:44:00
445阅读
1、local history历史记录插件安装这款插件之后在侧边栏会出现LOCAL HISTORY的字样，每当我们保存更改时，它都会备份一份历史文件，当我们需要恢复之前版本时，只需要点击一下对应的文件即可。此外，它还会在编辑框显示对比详情，能够让你对修改位置一目了然。2、Partial Diff文件比较插件选中一代码，右键Select Text for Compare，选中另外一部分代码，右键Co
前端开发中还原设计图的重要性毋庸置疑，目前来说应用最多的应该也还是使用rem。然而很多人依然还是处于刀耕火种的时代，要么自己去计算rem值，要么依靠编辑器安装插件转换。而本文的目标就是通过一系列的配置后，在开发中可以直接使用设计图的尺寸开发，项目为我们自动编译，转换成rem。技术栈vue-cli：使用脚手架工具创建项目。postcss-pxtorem：转换px为rem的插件。自动设置根节点html
移动端开发适配2种方案总结针对移动端适配的方案~一： 第一种方案是：所有的单位使用rem来适配；首先在页面上设置html的font-size的大小；如下我项目中的设置： html { font-size: 100px; }
@media(min-width: 320px) { html { font-size: 100px; } }
@media(min-width: 360px) { html
/* px：绝对单位，页面按精确像素展示 em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。 rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，ch ...
转载
2021-10-12 09:09:00
924阅读
做了几年的电源设计了，竟然连电源设备分类都混淆。实在汗颜，为了以后回顾，将个人对电源系统绝缘分类记录如下，欢迎大家批评指正。 未完待续~~~ 电源防止触电的绝缘方式，主要分为Class I，Class II，和Class III。有些资料存在Class 0 类设备，不过，这类设备通过不了安规认证。一、所有的保护措施的目的 1、
Rem现如今移动端的尺寸大小多种导致也页面不能在各种屏幕上适配，许多网站之前主要采取（1）采用的流式布局：通过百分比来定义宽度来实现，但是高度大都是用px来固定住。这就导致大屏幕的手机页面上宽度被拉的很长，高度很短。（2）固定宽度做法：早期有些网站把页面设置成320的宽度，超出部分留白。大屏幕手机下留白会特别多，看起来页面会特别小，操作的按钮也很小。（3）响应式做法：这种做法虽然能展现很好的效果，
