前端开发攻略---打破Chrome的最小字号限制,设置任意字号大小

news2024/11/19 1:27:59

目录

1、原因

2、解决方法


1、原因

由于Chrome浏览器的限制,在网页中的字号默认最小为12px,更改为12px以下的字号大小是无效的

2、解决方法

1、在Chrome浏览器中调整字号最小值

优点:快,方便,

缺点:只对自己电脑上的Chrome浏览器生效。对别人电脑上的无效

2、使用CSS

使用css中的 transform:scale(0.5) 对字体进行缩放

使用方法:比如需要得到10px的字体

1、先设置字体大小为20px

2、进行0.5倍缩放

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        font-size: 20px;
        transform: scale(0.5);
      }
    </style>
  </head>
  <body>
    <div>1122</div>
  </body>
</html>

注意:

1、transform: scale(0.5) 属性对行内元素无效!需要转换为行内块元素或者块级元素

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

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

相关文章

【C++】详解STL容器之一的deque和适配器stack,queue

目录 deque的概述 deque空间的结构 deque的迭代器 deque的数据设计 deque的优缺点 适配器的概念 ​编辑 stack的概述 stack的模拟实现 queue的概述 queue的模拟实现 deque的概述 deque的设计参考了另外两大容器vector和list。可参考下面两篇文章 详解vector&#x…

python:画折线图

import pandas as pd import matplotlib.pyplot as plt from matplotlib.font_manager import FontProperties# 设置新宋体字体的路径 font_path D:/reportlab/simsun/simsun.ttf# 加载新宋体字体 prop FontProperties(fnamefont_path)""" # 读取 xlsx 文件 d…

API低代码平台介绍2-最基本的数据查询功能

最基本的数据查询功能 本篇文章我们将介绍如何使用ADI平台定义一个基本的数据查询接口。由于是介绍平台具体功能的第一篇文章&#xff0c;里面会涉及比较多的概念介绍&#xff0c;了解了这些概念有助于您阅读后续的文章。 ADI平台的首页面如下&#xff1a; 1.菜单介绍 1.1 O…

交友软件源码-源码+搭建+售后,上线即可运营聊天交友源码 专业语聊交友app开发+源码搭建-快速上线

交友小程序源码是一种可以帮助开发者快速搭建交友类小程序的代码模板。它通常包括用户注册、登录、个人信息编辑、匹配推荐、好友聊天等常见功能&#xff0c;以及与后台数据交互的接口。使用这种源码可以极大地缩短开发时间&#xff0c;同时也可以根据自己的需求进行二次开发和…

代码随想录算法训练营DAY45|C++动态规划Part7|70.爬楼梯(进阶版)、322. 零钱兑换、279.完全平方数

文章目录 70.爬楼梯&#xff08;进阶版&#xff09;⭐️322. 零钱兑换思路CPP代码总结 279.完全平方数思路CPP代码 70.爬楼梯&#xff08;进阶版&#xff09; 卡码网&#xff1a;57. 爬楼梯 文章讲解&#xff1a;70.爬楼梯(进阶版) 本题就是典型了完全背包排列问题&#xff0c;…

光峰科技2023年营收、净利润均双位数下滑,新一年延续?

近日&#xff0c;深圳光峰科技股份有限公司&#xff08;688007.SH&#xff0c;下称“光峰科技”&#xff09;对外公布了2023年和2024年一季度的经营“成绩单”。 透视财报不难看出&#xff0c;虽然光峰科技在降低成本、提振销售等层面下足了功夫&#xff0c;但受制于市场需求式…

交易复盘-20240509

仅用于记录当天的市场情况&#xff0c;用于统计交易策略的适用情况&#xff0c;以便程序回测 短线核心&#xff1a;不参与任何级别的调整&#xff0c;采用龙空龙模式 一支股票 10%的时候可以操作&#xff0c; 90%的时间适合空仓等待 百合花 (4)|[9:25]|[17717万]|1.93 时代万恒…

【SpringBoot记录】自动配置原理(1):依赖管理

前言 我们都知道SpringBoot能快速创建Spring应用&#xff0c;其核心优势就在于自动配置功能&#xff0c;它通过一系列的约定和内置的配置来减少开发者手动配置的工作。下面通过最简单的案例分析SpringBoot的功能特性&#xff0c;了解自动配置原理。 SpringBoot简单案例 根据S…

5.9gunplot绘图堆叠柱状图

gunplot绘图堆叠柱状图 plot"要用的数据&#xff08;后缀名是.dat)" using 2 t(或者title) 跟着是要命名的属性名称 这个名称可以用.dat里的每列列名&#xff0c;也可以直接在后面跟着定义 plot "data.dat" using 2 t columnheader(2), using 3 t column…

【websocket-客户端可视化工具】

postman 新版postman (版本v11以上) &#xff0c;除了http协议&#xff0c;还支持了Websocket&#xff0c;MQTT&#xff0c;gRPC等多种连接协议&#xff0c;可以作为多种协议的客户端&#xff0c;使用起来非常方便。 使用 服务端代码 这里以websocket协议举例&#xff0c;代…

2023-2024年家电行业报告合集(精选51份)

家电行业报告/方案&#xff08;精选51份&#xff09; 2023-2024年 报告来源&#xff1a;2023-2024年家电行业报告合集&#xff08;精选51份&#xff09; 【以下是资料目录】 空气炸锅出海品牌策划创意全案【家电出海】【品牌全案】 卡萨帝潮流消费品生活家电音乐节活动方案…

【Python】了解卡方检验方法及其应用

是否幸福轻得太沉重 过度使用不痒不痛 烂熟透红空洞了的瞳孔 终于掏空终于有始无终 得不到的永远在骚动 被偏爱的都有恃无恐 玫瑰的红容易受伤的梦 握在手中却流失于指缝 又落空 &#x1f3b5; 陈奕迅《红玫瑰》 卡方检验&#xff08;Chi-square test&…

大数据手册(Spark)--Spark 简介

Spark 简介 Apache Spark 是一种用于大数据工作负载的分布式开源处理系统。它使用内存中缓存和优化的查询执行方式&#xff0c;可针对任何规模的数据进行快速分析查询。Apache Spark 提供了简明、一致的 Java、Scala、Python 和 R 应用程序编程接口 (API)。 Apache Spark 是专…

Java毕设之基于springboot的医护人员排班系统

运行环境 开发语言:java 框架:springboot&#xff0c;vue JDK版本:JDK1.8 数据库:mysql5.7(推荐5.7&#xff0c;8.0也可以) 数据库工具:Navicat11 开发软件:idea/eclipse(推荐idea) 系统详细实现 医护类型管理 医护人员排班系统的系统管理员可以对医护类型添加修改删除以及…

[Linux深度学习笔记5.9]

5.9笔记 DNS: 软硬链接&#xff1a; 软链接&#xff1a; 软链接&#xff1a;ln -s /源文件 /目标位置/链接名称》创建软链接1.既可以对目录使用&#xff0c;也可以对文件使用2.删除源文件&#xff0c;软链接不可用3.软链接可以跨文件系统使用4.源文件和软链接的inode号不同5.…

Baidu Comate智能编码助手:大学生的代码编写助手

Baidu Comate智能编码助手&#xff1a;大学生的代码编写助手 前言一、关于Baidu Comate智能编码助手1.1 Baidu Comate智能编码助手简介1.2 产品功能 二、安装使用&#xff08;本文以pycharm为例&#xff09;三、我的百度Comate之旅3.1智能推荐3.1.1 单行推荐3.1.2 多行推荐 3.2…

Spring底层入门(九)

boot的执行流程分为构造SpringApplication对象、调用run方法两部分 1、Spring Boot 执行流程-构造 通常我们会在SpringBoot的主启动类中写以下的代码&#xff1a; 参数一是当前类的字节码&#xff0c;参数二是main的args参数。 public class StartApplication {public static…

感知机简介

感知机简介 导语感知机简单逻辑电路实现权重和配置与/或/与非与门实现与非门实现或门实现 线/非线性单/多层感知机异或 总结参考文献 导语 学习感知机有助于更好的理解深度学习的神经元、权重等概念&#xff0c;感知机的结构和概念很简单&#xff0c;只要学过基本线性代数、数…

STM32使用L9110驱动电机自制小风扇

1.1 介绍&#xff1a; 该电机控制模块采用L9110电机控制芯片。该芯片具有两个TTL/CMOS兼容输入端子&#xff0c;并具有抗干扰特性&#xff1a;具有高电流驱动能力&#xff0c;两个输出端子可直接驱动直流电机&#xff0c;每个输出端口可提供750800mA动态电流&#xff0c;其峰值…

云动态摘要 2024-05-08

给您带来云厂商的最新动态&#xff0c;最新产品资讯和最新优惠更新。 最新优惠与活动 [免费试用]即刻畅享自研SaaS产品 腾讯云 2024-04-25 涵盖办公协同、营销拓客、上云安全保障、数据分析处理等多场景 云服务器ECS试用产品续用 阿里云 2024-04-14 云服务器ECS试用产品续用…