html设置某一行的字号为10px,设置html为font-size:62.5%，1rem != 10px问题

最新推荐文章于 2023-03-22 21:24:33 发布
最新推荐文章于 2023-03-22 21:24:33 发布
阅读量2.4k 收藏
点赞数
文章标签： html设置某一行的字号为10px

桌面端

这个问题出现在桌面端

因为桌面端chrome限制最小字体为12px

方法一：设置html为font-size:625%，这样1rem=100px 因为默认的字体大小为16px；

方法二：此方法由用户通过设置Chrome浏览器的高级选项

设置 -> 显示高级设置… -> 网络内容 -> 显示自定义字体 -> 最小字号 -> 设置最小(若font-size:62. 5%则小于等于10即可)

方法2问题在于需要用户也设置这个才能达到与开发时相同的方式，但是如果只是为了模拟开发移动端的页面 可以使用这个方式 因为经过下面的测试 移动端基本上支持最小字体为1px

b36248ea884efcdb781bee2413f9b1ea.png

移动端

那么移动端的最小字体是多少呢

Document

body{font-family: "黑体-简","微软雅黑";}

font-size:1px，这是1号字体

font-size:2px，这是2号字体

font-size:3px，这是3号字体

font-size:4px，这是4号字体

font-size:5px，这是5号字体

font-size:6px，这是6号字体

font-size:7px，这是7号字体

font-size:8px，这是8号字体

font-size:9px，这是9号字体

font-size:10px，这是10号字体

font-size:11px，这是11号字体

font-size:12px，这是12号字体

font-size:13px，这是13号字体

font-size:14px，这是14号字体

font-size:15px，这是15号字体

font-size:16px，这是16号字体

font-size:17px，这是17号字体

font-size:18px，这是18号字体

font-size:19px，这是19号字体

font-size:20px，这是20号字体

font-size:21px，这是21号字体

font-size:22px，这是22号字体

font-size:23px，这是23号字体

font-size:24px，这是24号字体

font-size:25px，这是25号字体

font-size:26px，这是26号字体

font-size:27px，这是27号字体

font-size:28px，这是28号字体

font-size:29px，这是29号字体

font-size:30px，这是30号字体

font-size:31px，这是31号字体

font-size:32px，这是32号字体

font-size:33px，这是33号字体

font-size:34px，这是34号字体

font-size:35px，这是35号字体

font-size:36px，这是36号字体

测试结果为

不管在安卓还是在iphone 现在都可以从1px上开始显示

余女士
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
postcss-pxtorem:使用PostCSS将像素单位转换为rem（根em）单位
04-06
postcss-pxtorem 的插件，可从像素单位生成rem单位。 安装 $ npm install postcss postcss-pxtorem --save-dev 用法 像素是最容易使用的单位（观点）。 它们的唯一问题是它们不允许浏览器将默认字体大小更改为16。此脚本将从您选择的允许浏览器设置字体大小的属性中将每个px值转换为rem。 输入输出 使用默认设置，仅定位与字体相关的属性。 / / input h1 { margin : 0 0 20px; font - size : 32px; line-height : 1.2; letter - spacing : 1px; } / / output h1 { margin : 0 0 20px; font - size : 2rem; line-height : 1.2
gulp-px2rem-plugin：将px转换成rem
02-03
gulp-px2rem-插件 将px转化成rem的gulp插件。 用rem来做响应式开发的时候，将px转换成rem值的时候，是每一个程序员头大的事情。 起初，我使用sublime的cssrem插件，效果挺好，避免了我重复使用小学学习的除法技能。但是，我们能感知的长度大小，还是可以，全部使用rem后，一旦设计稿有很多替换，你还知道有什么rem不需要修改吗？ 使用该插件后，源文件全部使用px，是不是又回到了做pc端页面的时代了？ 使用方法 var gulp = require('gulp'); var px2rem = require('gulp-px2rem-plugin'); gulp.task('default', function() { gulp.src('*.css') .pipe(px2rem()) // .pipe(px2rem({'width_design':750,'valid_num':6,'pieces':10,'ignore_px':[1,2],'ignore_selector':['.class1']})); }); 参数说明 width_design：
设置CSS: body{font-size: 62.5%；}的原因是什么？
m0_58017645的博客
08-20 1059
1.如何根据不同设备的分辨率设置字体。 在pc端想要做一个全屏适配的项目，但得根据分辨率的来随着放大缩小。移动端用过flexible来解决，不知道在pc端怎么处理比较好. 字体的单位使用rem（root element根元素）1rem就是根元素的font-size的值。 然后使用多媒体查询@media screen and （min-width=value）{html{font-size：value px}}直接设置根元素的字体大小，已达到自己所需。 举栗： html{ font-size:625%
gulp-px2rem：这是node-px2rem的gulp插件
02-02
-px2rem 版本： 1.1.4 这是的Gulp插件。 安装 运行npm install gulp-px2rem 用法 const px2rem = require ( 'gulp-px2rem' ) ; gulp . task ( 'css' , ( ) => { return gulp . src ( 'css/**/*.css' ) . pipe ( px2rem ( ) ) . pipe ( gulp . dest ( 'css' ) ) ; } ) ; 选件 传入两个选项对象。 第一个用于选项，第二个用于选项。 const px2rem = require ( 'gulp-px2rem' ) ; const px2remOptions = { replace : false } ; const postCssOptions = { map : true } ; gulp . task ( 'css' , ( ) => { return gulp . src ( 'css/**/*.css' ) . pipe ( px2rem (
babel-plugin-styled-components-px2rem：Babel插件，用于将px转换为样式组件的rem单位
01-30
babel-plugin-styled-components-px2rem 插件，用于将px转换为rem单位 使用处理模板字符串中的所有CSS文本。 启用选项时，添加运行时px2rem函数px2rem来处理嵌入在模板字符串中的表达式。 具有相似功能的TypeScript转换器： 。 目录 需求 您需要将babel-plugin-styled-components-px2rem的以下peerDependencies同时安装到您的项目中： { " peerDependencies " : { " @babel/core " : " ^7.0.0 " , " postcss " : " ^7.0.0 " } } 用法 看 使用React和样式化组件。 组态 babel.config.js ： module . exports = { plugins : [ [ 'styled-components-px2rem' , { rootValue : 100 , unitPrecision : 5 , minPixelValu
手机端font-size:62.5%原理
xiasohuai的博客
11-11 3712
原理： 是根据根节点html的默认字体大小font-size来计算的，以此进行rem的初始值设置。实现对不同屏幕宽度的适配。（100px/16px=6.25=625%, 100代表100px,这里是以100px来换算的，即：1rem=100px。当然有些地方是10px/16px=62.5%，以10px来换算的，即1rem=10px。） rem是css3中新增加的一个单位属性，是相对长度单位。相对...
font-size：625%；
祥哥的说
05-03 1793
1.我看了网上很多关于rem的资料，基本都说浏览器的默认字号就是16px，然后直接定义font-size:62.5%。但是，rem属于css3的属性，有些浏览器的早期版本和一些国内浏览器的默认字号并不是16px，那么上面的10/16换算就不成立，直接给html定义font-size:62.5%不成立。 2.chrome强制字体最小值为12px，低于12px按12px处理，那上面的1rem=10p...
移动端rem和px的转换
LzzMandy的博客
05-11 724
1、参考 使用css方法设置https://blog.csdn.net/unbreakablec/article/details/87268904 使用js方法设置https://www.cnblogs.com/web-wjg/p/7872468.html 2、使用css方法设置1rem=10px <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta.
将1rem转换为10px
weixin_42674490的博客
06-09 621
jquery,将1rem转换为10px 通过window.devicePixelRatio获取到当前设备的dpr (function() { var dpr = window.devicePixelRatio // 使1rem=10px var rem = 62.5 / dpr $("html").css("font-size",rem+"%") })(); 自适应还需要深入了解（写的较详细）：[http://www.html-js.com/article/Mobile-terminal-
rem 的用法及详解
m0_37866091的博客
12-08 9138
rem的使用方法： 首先，先说一个常识，浏览器的默认字体高都是16px。步入正题-----〉 兼容性： 目前，IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了rem。 就算对不支持的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。 使用%单位方便使用 css中的body中先全局声明font-size=62.5%，这里的%的算法和rem一样。 因为100%=16px，1px=6.25%，所以10px=62.5%， 这是的
px-text:用于将像素测量值转换为rem的工具CSS
05-08
概述 Px文本是一个小型的sass和js函数，可将像素快速转换为rem。 其主要目的是使程序员无需计算器即可将像素大小的文本大小转换为rem。 安装 npm install --save px-text 萨斯 导入萨斯 @import 'node_modules/px-text/index.scss'; 使用sass loader导入 @import 'px-text/index.scss'; 例子 body { font-size: px(18); line-height: px(21); } 节点和样式化的组件 导入js import {px} from 'px-text' 例子 import styled, { css } from 'styled-components' import {px} from 'px-text' const containerStyles =
css文字大小自适应
qq_37669585的博客
05-18 8126
总结了一下一些单位的不同 px：像素（pixel）相对长度单位，，是相对于屏幕显示器分辨率而言的； em：em的值并不是固定的，会集成父级元素的字体大小； 注意： 1.body选择其中声明Font-size=62.5%； 2.将原来的px数值除以10，然后换上em作为单位； 3.重新计算那些被放大的字体的em数值。避免字体大小的重复声明。 任何浏览器默认字体大小都是16px，所有未经调整的浏览器都符合1em=16px，南无0.75em=12px，10px=0.625em。为了简化Font-size的换算，需
【移动端适配】为什么根元素font-size设置成100px或625%？
劲枫的博客
06-26 1万+
rem：是一个相对单位，相对根元素字体大小的单位，再直白点就是相对于html元素字体大小的单位。 优点：这样在计算子元素有关的尺寸时，只要根据html元素字体大小计算就好。不再像使用em时，得来回的找父元素字体大小频繁的计算，根本就离不开计算器。 首先看下图：html的字体大小设置为font-size:62.5%原因：浏览器默认字体大小是16px，rem与px关系为：1rem = 10px，1...
如何设置10px的字体大小
qq_43405603的博客
09-01 853
如何设置10px的字体大小
font-size：10px 不起效的解决方法。
热门推荐
weixin_43612234的博客
01-12 1万+
关于字体大小为12px以下没效的解决方案。 有时候UI给我们图的时候，有一些样式是正常情况下是不起效的，例如，设置字体大小 font-size：8px，往往设置了这个属性是没有效的。这个时候可能你很烦躁。特别是项目在赶的时候。（我就是这样，明天要上线的那种。） 其实可以这样设置： 方案1：如果是手机端；设置了一rem为单位的。 &lt;style&gt; //根元素的设置。 html{ font-...
关于移动端使用rem做屏幕大小适配
qq_45642119的博客
05-18 311
关于移动端使用rem做屏幕大小适配 html {font-size: 62.5%} 首先，rem是以html为基准。 一般的，各大主流浏览器的font-size默认值为16px,此时1rem=16px。如果此时将rem与px进行换算很麻烦，比如0.75rem=12px。 为了更方便的进行换算（比如1：10），就可以加样式： html,body{ font-size: 62.5%; } 设置了62.5%以后就有 1rem=10px，便于用rem指定元素的尺寸（比如1.2rem=12px,
word中字体大小（pt）与网页中css设置font-size时用的px大小对应关系
localhost
03-22 2406
所以word中五号字体（10.5pt）在网页中对应的font-size:14px。（10.5 / 0.75 = 14)pt与px转换关系为 1px= 0.75pt。
html如何解决1px显示,解决移动端1px边框问题的几种方法(5种)
weixin_39709262的博客
06-09 478
本文介绍了解决移动端1px边框问题的5种方法。当然了，在这之前先整理了与这些方法相关的知识：物理像素、设备独立像素、设备像素比和viewport。物理像素、设备独立像素和设备像素比在CSS中我们一般使用px作为单位，需要注意的是，CSS样式里面的px和物理像素并不是相等的。CSS中的像素只是一个抽象的单位，在不同的设备或不同的环境中，CSS中的1px所代表的物理像素是不同的。在PC端，CSS的1p...
css如何实现字体为10px
weixin_48107140的博客
07-13 3650
前端页面中如何设置低于12px的字体
html { font-size: 10px; scroll-behavior: smooth; }
最新发布
07-10
这段CSS代码是应用于HTML元素的样式规则。让我们逐行解释它的含义： ```css html { ...` 这一行代码设置根元素的字体大小为10像素是一种常见的技巧，用于方便地使用相对单位（如rem、em）进行页面布局。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值