【css】【问题记录】todolist头像动画出错。原因：html的font-size小于12px时，js只能获取到12px

最新推荐文章于 2024-02-20 08:15:00 发布
最新推荐文章于 2024-02-20 08:15:00 发布
阅读量295 收藏
点赞数
分类专栏： # CSS 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34838046/article/details/109057113
版权
当html字体大小小于12px时，js只能获取到12px，导致CSS中使用rem单位的元素定位出错。在todolist组件中，点击头像触发动画时，由于计算基于12px，使得头像位置偏下，影响最终显示效果。问题源于js和CSS对小于12px字体大小处理的不同。
摘要由CSDN通过智能技术生成

文章目录

问题记录

情况

背景：
html字体大小屏幕大于768px时为12px，小于768为10px；

todolist Panel组件，点击头像时，头像移动到目标位置后隐藏，同时显示面板，面板上有样式相同的头像

目标效果：头像最终位置跟面板上位置相同。

错误现象：头像移动最终位置，总会比面板上位置偏下。头像隐藏，面板显示的时候，呈现的结果就是头像往上瞬移了一段距离。
在这里插入图片描述

原因：html的字体大小设置为小于12px的值时，js只能获取到12px

通过js可以设置成更小的值，但是css内设置小于12px的值时，默认12px

<html lang="en"
最低0.47元/天 解锁文章
前端二狗子
关注
专栏目录
用html+css+js实现ToDoList
09-25
【HTML+CSS+JS实现TodoList】是前端开发中的一个基础练习项目，它能帮助初学者深入理解网页交互和数据管理的基本原理。这个项目通常包括创建一个可视化的任务列表，用户可以添加、删除和标记任务为已完成。接下来，...
html中的最小的字体,Chrome的最小字体12px限制最终解决办法
weixin_39725885的博客
05-30 1464
相信不少做网站的用户会有这样一个问题，Chrome默认最小字体是12px(最新版英文也有此问题)，这个是 Chrome 为了更好显示中文设计的，但是这样一来就会出现某些上标、下标字体过大，影响用户体验。之前在开发Hybid App的时候也被它困扰了很久,在百度上查了很久，网上所有的解决方案都惊奇地相似，只有下面两种：1-针对谷歌浏览器加前缀进行适配html{-webkit-text-size-a...
html中文字最小字号,针对谷歌默认最小字体12px的正确解决方案 （css、html）
weixin_29235525的博客
05-30 1667
产品要求把以前12px的字体改小一点，我心想这有什么难的，就随口答应了。哪知，，谷歌浏览器中font-size小于12px时，字体就不会再缩小了。于是，只有百度了，原来谷歌以及谷歌内核的浏览器在中文语言下最小字体只能是12px。不管那么多了，反正要解决这个问题呀~既然这是一个经典的兼容性问题，一定有很多解决方法吧。让人吃惊的是，再百度一伙，网上所有的解决方案都惊奇地相似：html{-webkit-...
字体样式相关知识点小结（第六天）
Zyf15156243165的博客
08-01 248
字体样式的相关内容
font-size设置大小小于12px时,需要使用transform: scale(numX, numY)属性详解
jojodeblog的博客
12-04 1302
1. 为啥要使用transform: scale(numX, numY)属性 由于浏览器为了提升用户的浏览体验,设置字体最小为12px,如果继续缩小字体,样式就不会生效,此时就需要使用transform: scale(numX, numY)属性 2.transform: scale(numX, numY)注意事项 transform: scale(numX, numY)属性表示缩小盒子的大小,并不是缩小字体,所有只对块级盒子其效果 由于transform: scale(numX, numY)默认居中缩小,
让chrome支持小于12px-的文字方式（多种方法）
贫僧法号依平
02-20 1091
Zoom非标属性，有兼容问题，缩放会改变了元素占据的空间大小，触发重排大部分现代浏览器支持，并且对英文、数字、中文也能够生效，缩放不会改变了元素占据的空间大小，页面布局不会发生变化对谷歌浏览器有版本要求，在27之后，就取消了该属性的支持，并且只对英文、数字生效。
html+js+css开发源代码项目.docx
07-05
font-size: 16px; } ul li button:hover { color: #0056b3; } ``` - `.container`：定义了应用主体区域的样式。 - `input[type="text"]`：设置输入框的样式。 - `button`：定义按钮的基本样式。 - `ul li`：定义...
提供一个简单的 HTML + CSS + JavaScript 的项目示例.docx
最新发布
07-27
- **美观与实用并重**: CSS不仅美化了界面，还考虑到了功能性的实现（如列表项的状态切换）。 通过以上分析，我们可以看出这个简单的待办事项列表应用不仅涵盖了HTML、CSS和JavaScript的基础用法，还体现了前端开发...
meteor-todolist:使用 MeteorJS 的待办事项列表
07-10
font-size: 24px; margin-bottom: 18px; } .new-todo { margin: 0; width: 100%; } input[type="text"] { font-size: 24px; padding: 6px 10px; box-sizing: border-box; width: 100%; } .todo-list { ...
vue-todolist
05-24
Vue.js 是一个流行的轻量级前端JavaScript框架，用于构建用户界面。"Vue-todolist"很可能是基于Vue.js实现的一个简单待办事项列表应用。在HTML、CSS和JavaScript的组合中，这种应用通常用于教学、练习或者快速原型...
解决有些浏览器rem不以html的font-size为基准问题
总柴的博客
01-11 1966
解决有些浏览器rem不以html的font-size为基准问题 文章目录解决有些浏览器rem不以html的font-size为基准问题问题原因：解决办法： 有关rem以及其他长度单位（px，em，vw…）请移步： 通俗易懂——css长度单位：px、em、rem、vh、vw、in、… 问题原因： 各大浏览器的最小字体限制不同： google为6px firefox、Edge、IE（5 7 8 9 10） Safari为0px Opera、搜狗浏览器、360浏览器、为12px等 有关更多浏览器最小字体与默认
Vue用Rem实现自适应布局
weixin_42839080的博客
10-17 4297
一 什么是rem rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过rem计算的规则是依赖根元素,em是依赖父元素计算。 二 为什么使用rem及原理 2.1 为什么使用r...
设置rem或font-size小于12px在浏览器中无效
qq_38134913的博客
12-17 2605
在开发移动端页面的时候把页面的font-size设置成了10px大小，但是在chrome中调试的时候却发现1rem=12px！一度让我怀疑人生。后面百度了发现原来不同的浏览器对于font-size的最小值是有限制的。 比如在chrome中支持的最小值就是12px，在搜狗浏览器中最小值也是12px，可能因为他们用的内核都是一样的吧。所以当设置的font-size小于12px时，也会按照12px渲染。...
rem单位中html默认字号,CSS3字体单位rem,默认样式
weixin_42659196的博客
06-03 272
前段时间无意中在wordpress主题中接触到一种字体单位rem,当时我就很好奇,毕竟以前没有见过,于是我马上查找资料,并测试了一回.众所周知在web中有很多字体单位(font-size)较常见的有em,px,让我们对比一下这两种单位:px是绝对值,准确而稳定.但是它的改变会影响页面布局.em是相对值,它以父元素的大小为基准单位,来计算大小.所以很难把握.考虑到这么多字体单位的优缺点,在CSS3中...
font-size 基准
weixin_30628801的博客
06-22 153
浏览器的缺省字体为16px； 你可以先将基准字体大小设置为10px; body { font-size: 62.5%; } 然后统一使用 em作为单位 div { font-size: 2.4em; // 24px } 转载于:https://www.cnblogs.com/yigexiaojiangshi/p/7066228.html...
Rem设计方案
xyj1151880359的博客
06-09 298
一、设备的css像素是不同的 1. CSS像素（逻辑像素） 可通过浏览器F12控制台查看不同机型的css像素，比如iPhone6为375px，iPhone6Plus为414px CSS中使用的一个抽象的概念，单位是px 值是相对的，并不是绝对的 2.设备像素（物理像素） 屏幕的物理像素，任何设备屏幕的物理像素的数量都是固定不变的，单位是pt（点） 一般指的是手机的分辨率 1pt = 1/72英寸（inch） 3.像素比（DPR） 物理像素 = css像素 * DPR 本质：一个css像素占用几个设
换算rem的宽度和高度不生效 chrome字体最小为12px
setsunadoudou的博客
09-09 884
现在很多前端都用rem来单位元素和字体大小 一般的设置是 html{ font-size:62.5%; } 换算来源 1rem = 16px 10/16 = 0.625 这样10px 就等于了1r...
对rem的一点个人理解
qq_36233381的博客
04-04 454
rem是相对于根元素html的font-size，例如 html{ font-size:10px; } p{ font-size:1.2rem; } 这里的p标签的字体大小就是12px，1rem就等于一个根元素的font-size大小 10px 另外，由于在不同客户端，浏览器的默认字体大小可能并不相同，一般都是16px，所以在设置根元素的字体大小时推荐使用百分比形式表示，例...
解决默认字体最小12px的方案
qq_45848004的博客
03-16 547
当字体小于12px的时候，谷歌浏览器还是以12px显示，只需把下面CSS写在样式里，谷歌就能正常显示了： html{-webkit-text-size-adjust:none;} 另外还有一个针对谷歌专用的hack: @mediascreenand(-webkit-min-device-pixel-ratio:0){ /* chrom、safari 样式 */ } 这是针对其他一些兼容问题的，像IE、FF都有自己的hack，这个也是chrom的hack，它针对Safari也有效。 转载于:https:
用HTML、CSS、Javascript写todolist
05-15
好的，下面是一个基本的todolist示例代码，使用HTML、CSS、Javascript实现： ```html <!DOCTYPE html> <html> <meta charset="UTF-8"> <title>Todo List body { font-family: Arial, sans-serif; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值