rem,em,px,rpx等

1、任意浏览器的默认字体高都是16px。谷歌浏览器显示的最小字体大小是12px。

exp:突破谷歌浏览器显示12px限制。

(1)、<div>文本</div>
文本嵌套块标签,这是因为缩放只对有宽高的标签有效,缩放的时候也是将标签一起缩放,而不仅仅是缩放文本,所以如果使用span等行内标签时,还需要将行内标签进行元素转换为块元素(display:block;)
(2)、font-size:12px;
给文本设置字体12px,并设置缩放值为10/12=0.83333,也就是transform:scale(0.83);如果要设置8px,那就是8/12=0.66666
(3)、transform-origin:0 0;
默认缩放中心点是在盒子的正中心,所以如果我们需要文本左对齐,就需要改变中心点,也就是transform-origin:0 0;该值有两个参数值,第一个是水平方位值,第二个是垂直方位值,对应的如果需要右对齐、或者是有缩进,那就改变对应的参数值即可。
(4)、white-space: nowrap;
文本进行缩放后,并不会改变其原来盒子的大小,只是视觉上改变了大小,也就是说如果文本有换行的时候,它进行缩放后仍然是折行显示,这显然不符合我们要求,所以我们还需要强制文本在一行显示,也就是 white-space: nowrap;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 300px;height: 30px;margin-bottom: 5px;background: rgb(206, 151, 151);}.box1 {font-size: 12px;}.box2 {font-size: 10px;transform: scale(0.83333);transform-origin: 0 0;white-space: nowrap;}</style>
</head>
<body><div class="box1">我是正常的12px的文字大小 Hello world!</div><div class="box1">我是正常的12px的文字大小 Hello world!</div><div class="box2">我是正常的10px的文字大小 Hello world!</div><div class="box2">我是正常的10px的文字大小 Hello world!</div>
</body>
</html>

2、em是相当于当前对象内的文本尺寸,当前对象没有那就继承父级。

3、rem是相对于html元素的字体大小。

4、em、rem一般都应用于移动端,按“设计稿/实际屏幕宽度”来按比例设置html的font-size,按比例放大或者缩小页面。如果直接写的px那在不同宽高的屏幕上都显示的一样的。

5、vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%。
vh:viewpoint height,视窗高度,1vh等于视窗高度的1%。
vmin:vw和vh中较小的那个。
vmax:vw和vh中较大的那个。

6、rpx

  • rpx是微信小程序独有的、解决屏幕自适应的尺寸单位
  • 可以根据屏幕宽度进行自适应,不论大小屏幕,规定屏幕宽为 750rpx
  • 通过 rpx 设置元素和字体的大小,小程序在不同尺寸的屏幕下,可以实现自动适配

7、为什么web端不使用rem?

因为在大多数场景下,用户使用更大的屏幕,是想看到更多的内容,而不是更大的字。

8、1px到底有多长呢?

首先,我们要介绍分辨率这个概念,比如1024*768,代表的就是这个屏幕水平方向有1024个像素,垂直方向有768个像素。

假如这个屏幕宽度是1024cm,那么对于这个屏幕来说,水平方向上1px就是1cm(当然,一般不会有那么宽的屏幕)。

所以,1px究竟有多长,取决于分辨率,取决于屏幕大小。1px = 屏幕长度/分辨率

exp:

(1)当同一块屏幕。当你调整了分辨率,水平方向的分辨率变大,但是屏幕实际宽度还是这么大,所以1px的实际长度就变小了。

(2)当一大一小的屏幕,相同的分辨率,那么屏幕大的1px实际长度就大。

9、移动设备的物理像素、逻辑像素、设备像素比?

(1)document.documentElement.clientWidth获取的宽度都是逻辑像素

(2)在手机上物理像素是改变不了的,但是你设置的逻辑像素px,到底用多少物理像素显示,是取决于像素比的。

以渲染一个宽度铺满屏幕的div举例说明

  • 情况1: 375x667(devicePixelRatio=1)、750x1334(devicePixelRatio=2),一使用px布局不会影响布局

设置div宽度为375px,那么在375x667的屏幕水平方向上,刚好由375独立像素渲染,即刚好占满屏幕全部宽度,而在750x1334屏幕上,由于该屏幕的deviceRatio为2,水平方向渲染一个css像素实际使用2个像素,即该div水平方向由750个独立像素渲染,也刚好占满屏幕,所以在这两种屏幕上,即使使用px布局,渲染效果也是一样的

  • 情况2: 375x667(devicePixelRatio=1)、360x640(devicePixelRatio=1),使用px影响布局

设置div宽度为375px,那么在375x667的屏幕水平方向上,刚好由375独立像素渲染,即刚好占满屏幕全部宽度,而在360*640屏幕上,由于该屏幕的deviceRatio同为1,水平方向渲染一个css像素实际使用1个像素,即该div水平方向由375个独立像素渲染,超出屏幕宽度,布局受到影响。

(3)设计给的倍图的使用

根据设计稿设计了宽高后,像素比dpr为1,就用1倍图

像素比dpr为2,就用二倍图。因为图像实际是100px的,你设置50px,放大两倍就是100px了。

(4)1px在不同像素比上粗细不同解决方案:使用transform:scale。

exp:  很多浏览器也显示不了0.5px,这个时候也用这个属性,能显示0.5px的效果。不同内核的浏览器对小数像素的显示和处理也不同。

.border-bottom-1px {position: relative;
}.border-bottom-1px::after {content: ' ';width: 100%;height: 0;position: absolute;left: 0;bottom: 0;overflow: hidden;border-bottom: 1px black solid;transform-origin: left bottom;
}@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {.border-bottom-1px::after {-webkit-transform: scaleY(.7);transform: scaleY(.7);}
}@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {.border-bottom-1px::after {-webkit-transform: scaleY(.5);transform: scaleY(.5);}
}@media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min-device-pixel-ratio: 3) {.border-bottom-1px ::after {-webkit-transform: scaleY(.33);transform: scaleY(.33);}
}

移动web开发相关知识 物理像素、逻辑像素、设备像素比、移动端常见布局、布局视口、视觉视口、理想视口_小杨同学呀呀呀呀的博客-CSDN博客

物理像素、逻辑像素、CSS像素、PPI、设备像素比分别是什么? - 知乎

前端的物理像素、逻辑像素、移动端1像素边框解决方案_小凳子腿的博客-CSDN博客

总结:

在pc端直接使用px。但是不同浏览器有显示的最小字体大小和border大小,都可以使用transform:scale来实现如小于12px的字体和0.5px。

在移动端使用rem。实现等比例放大缩小。但是还有像素比这个概念,设计给的倍图就是在不同像素比的手机下怕失真才用的。

小程序使用rpx。不管宽度多宽都是750rpx。

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

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

相关文章

python 列表 字典 读写文件:pickle模块的基本使用

建议大家使用cPickle&#xff0c;速度更快&#xff01;&#xff01;&#xff01; python数据持久存储&#xff1a;pickle模块的基本使用&#xff08;转载&#xff09; 作者: pzxbc出处: http://pzxbc.cnblogs.com/本文版权归作者和博客园共有&#xff0c;欢迎转载&#xff0c;但…

first-child、first-of-type等属性的差别

1、xxx:first-child 伪类 xxx作为第一个子元素 //p元素作为第一个子元素的都会变色 p:first-child { background:yellow; } //p作为父元素的 第一个子元素。不要求第一个元素的类型 p>:first-child {background:yellow; }//p作为父元素的 第一个子元素。要求第一个元素的类…

js 手机端触发事事件、javascript手机端/移动端触发事件

处理Touch事件能让你跟踪用户的每一根手指的位置。你可以绑定以下四种Touch事件: touchstart: // 手指放到屏幕上的时候触发 touchmove: // 手指在屏幕上移动的时候触发 touchend: // 手指从屏幕上拿起的时候触发 touchcancel: // 系统取消touch事件的时候触发。至于系统…

java 8 lambda_Java 8的烹调方式– Lambda项目

java 8 lambda什么是project lambda &#xff1a;Project lambda是用于以Java语言语法启用lambda表达式的项目。 Lambda表达式是功能编程语言&#xff08;如lisp&#xff09;中的主要语法。 Groovy将是支持lambda表达式&#xff08;也称为闭包&#xff09;的java的最接近亲戚。…

我的Serverless实战——引领云计算的下一个十年

前言&#xff1a;如今&#xff0c;越来越多的大厂企业开始大规模使用Serverless&#xff0c;处于变革中的开发者&#xff0c;大多已从观望状态转向尝试阶段&#xff0c;越来越多Serverless落地场景被解锁。作为基础研发底座&#xff0c;越来越多企业开始接受Serverless&#xf…

各种边距clientWidth、offsetWidth、scrollWidth、clientLeft、getBoundingClientRect详解

1、clientWidth、offsetWidth、scrollWidth <!DOCTYPE html> <html><head><meta charset"utf-8" /><style>#box1 {padding: 50px;position: static;}#box {border: 1px solid red;overflow: scroll;height: 200px;width: 500px;}#con…

encodeURIComponent的使用

URL 元字符&#xff1a;分号&#xff08;;&#xff09;&#xff0c;逗号&#xff08;,&#xff09;&#xff0c;斜杠&#xff08;/&#xff09;&#xff0c;问号&#xff08;?&#xff09;&#xff0c;冒号&#xff08;:&#xff09;&#xff0c;at&#xff08;&#xff09;&a…

如何以及何时使用枚举和注释

本文是我们名为“ 高级Java ”的学院课程的一部分。 本课程旨在帮助您最有效地使用Java。 它讨论了高级主题&#xff0c;包括对象创建&#xff0c;并发&#xff0c;序列化&#xff0c;反射等。 它将指导您完成Java掌握的过程&#xff01; 在这里查看 &#xff01; 目录 1.简…

花了两天时间用html+css+js做了一个网页版坦克大战游戏

大家好&#xff0c;我是孙叫兽&#xff0c;本期内容给大家分享如何用htmlcssjavaScript去做一个简易网页版坦克游戏。 目录 坦克游戏玩法及介绍 项目结构 源码地址&#xff1a; 坦克游戏玩法及介绍 我们先来看一下首页。 打开这个首页很简单&#xff0c;基本是上面这个样子&…

软件工程第一次冲刺进度条(1-10天)

第一天&#xff08;4.20&#xff09;昨天做了什么今天做了什么遇到的问题配置安装所需要的环境和相关软件 查询android关于界面编程与视图的相关资料并且初步编写代码 配置虚拟机的时候电脑上总是失败第二天&#xff08;4.21&#xff09;昨天做了什么今天做了什么遇到的问题查询…

css基础过渡与动画与应用于vue、react

一、css属性过渡transition 1、解释&#xff1a; 使用该属性后变化不会在一瞬间完成&#xff0c;会有一个连续的变化效果。第一个参数设置哪些属性变化时需要有连续的效果。 不论用什么方式使属性的值发生变化&#xff0c;transition都会生效。 2、语法&#xff1a; trans…

Android项目开发填坑记-Fragment的onAttach

背景 现在Android开发多使用一个Activity管理多个Fragment进行开发&#xff0c;不免需要两者相互传递数据&#xff0c;一般是给Fragment添加回调接口&#xff0c;让Activity继承并实现。 回调接口一般都写在Fragment的onAttach()方法中&#xff0c;Fragment 3.0 的onAttach()方…

前端开发——移动端及响应式布局解决办法总结(适配)

问题分析:前端开发一个产品(网站、系统、APP等)会遇到的一个难点就是适配问题,比如开发一个网站,你在一个页面开发的时候从视觉看起来没什么异样,换个不同分别率的设备,电脑,手机等,发现样式全乱了,这个不是我们想要的结果,所以,浏览器适配,响应式布局就显得尤为重…

来点小技巧,Array.filter(Boolean)、 [].slice.call(this)等等

1、Array.filter(Boolean) 移除所有的 ”false“ 类型元素 (false, null, undefined, 0, NaN or an empty string)。 Boolean 是一个函数相当于直接传了个函数进去 Array.filter(Boolean)Array.filter(i>Boolean(i)) Array.filter(i>i) let a [1, 2, b, 0, {}, , N…

设置文字多行显示溢出显示省略号

#news_text { border: 1px solid red; width: 200px; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /*这里可以设置文本显示的行数*/ overflow: hidden; }<div id"news_text"&g…

vue项目有几个接口content Download时间特别长的解决办法

做的可视化地图项目&#xff0c;有几个接口加载比较慢&#xff0c;大概16S左右&#xff0c;第一次加载接近一分钟&#xff0c;这谁能受得了。 对比了正式环境和测试环境&#xff0c;这个接口数据量一样&#xff0c;就是在测试服务器比较慢&#xff0c;排除滚动插件及其它的影响…

Java中集合的自定义运算符

总览 操作员重载有多种语言可用。 Java对String类型的运算符的支持对运算符的重载非常有限。 我们可以利用其他语言支持运算符的不同方式&#xff0c;但是可以在Java中实现一个使用Java已经使用的约定的实现。 获取&#xff0c;设置和放置操作 集合的运算符重载的一个常见示例…

【Java从入门到天黑|03】JavaSE入门之流程控制

大家好,我是孙叫兽,本期内容给大家分享一下JavaSE入门之流程控制。 用户交互Scanner 1、Scanner对象 之前我们学的基本语法中我们并没有实现程序和人的交互,但是Java给我们提供了这样一个工具类,我们可以获取用户的输入。java.util.Scanner 是 Java5 的新特征,我们可以通过…

Jmeter调试工具---HTTP Mirror Server

转自&#xff1a;http://www.cnblogs.com/puresoul/p/4907655.html 一、HTTP Mirror Server的作用&#xff1a; 它可以在本地临时搭建一个HTTP服务器&#xff0c;该服务器把接收到的请求原样返回&#xff0c;这样就可以看到发送出的请求的具体内容&#xff0c;以供调试。 二、…

520 单身福利|女朋友又找我要礼物

大家好&#xff0c;我是孙叫兽&#xff0c;520快到了&#xff0c;给大家分享一下单身福利&#xff01;时间过得真快&#xff0c;一转眼又到了 520&#xff0c;有对象的程序员又激动又扎心的节日&#xff0c;其实吧&#xff0c;程序员对这种节日又期待又焦灼&#xff0c;为什么呢…