设置body{font-size:62.5%}的原因

最新推荐文章于 2023-03-27 00:16:12 发布
最新推荐文章于 2023-03-27 00:16:12 发布
阅读量205 收藏 1
点赞数
原文链接：http://www.cnblogs.com/zhangyuping/archive/2012/11/02/2751981.html
版权

在CSS弹性布局是根据字号（而不是浏览器宽度）来设置元素的宽度，通过以em为单位设置宽度，可以确保字号增加的时候整个布局随之扩大，这样可以将行长保持在可阅读的范围内，对于实力弱或者认知障碍的人士尤其有用

所以，如果你想灵活布局，经常需要初始化设置body的font-size属性，常见的有

body{font-size:62.5%}

 

为什么要设置成62.5%呢？为什么使用%而不是px呢？因为是新手，不懂，查font-size属性，当值为%的时候是指：

%    把 font-size 设置为基于父元素的一个百分比值。

这body的父元素就是HTML啦，应该是指浏览器默认样式啦....

而大多数浏览器的默认字号是16px,10px相当于16px的62.5%  

这么设置之后1em=10px,所以可以将所有像素宽度转换成em宽度（或者反过来） ,只要乘或除以10就ok啦，这样就可以灵活转换固定布局和弹性布局啦

 

转载于:https://www.cnblogs.com/zhangyuping/archive/2012/11/02/2751981.html

weixin_30404405
关注
前端项目实战1
qq_44139411的博客
01-15 805
目录 图标字体库 字体库 ::selection选择器——改变用户选中部分的background和color font-size: 62.5%; flex布局 position的z-index label标签的for clip-path window.onscroll ：页面滚动条滚动事件 position:fixed/absolute都会脱离文档流！！！ vh单位 input元素是行内元素！ 做一个类似弹窗的界面 图标字体库 Font Awesome，一套绝佳的图标字体库..
知识普及之CSS: body{font-size: 62.5%;}这种写法的原因
09-27
在网页设计中我们经常看见body{font-size: 62.5%;}这样的设置，为什么偏偏是62.5%呢？下面脚本之家小编给大家揭晓这个答案，一起了解了解吧
关于浏览器的font-size:62.5%;
q12345671q的博客
07-09 1285
各大主流浏览器的fong-size:1rem;=16px;这是默认的浏览器； 但是你想想，如果用它rem来与px换算是不是很麻烦，如：0.75rem=12px; 如果把它转换为1:10;是不是好算一点，这个时候就需要加一行样式； html,body{font-size: 62.5% !important;} 这样你需要12px=1.2rem;  14px=1.4rem; 是不是用起来很方
CSS: body{font-size: 62.5%;}设置原因
weixin_30533797的博客
10-21 195
参考博客：http://www.cnblogs.com/daxiong/articles/2772276.html 在网页设计中我们经常看见body{font-size: 62.5%;}这样的设置，为什么偏偏是62.5%呢？这主要是为了方便em与px相互转换，em的初始值为1em=16px，显然这样的话，如1.2em则=19.2px，可是我们在设置的时候很少看见19.2px这样表示的大小，也就是...
CSS: body{font-size: 62.5%;}为什么？？？
weixin_30843605的博客
12-01 226
在网页设计中我们经常看见body{font-size: 62.5%;}这样的设置，为什么偏偏是62.5%呢？这主要是为了方便em与px相互转换，em的初始值为1em=16px，显然这样的话，如1.2em则=19.2px，可是我们在设置的时候很少看见19.2px这样表示的大小，也就是在用px表示大小时数值是不带小数位的。当设置了body{font-size: 62.5%;}时，1em则=16px*6...
font-size: 62.5% 的含义
weixin_33883178的博客
05-14 333
2019独角兽企业重金招聘Python工程师标准>>> ...
CSS Font-Size: em、px 、pt 、Percent之间的关系及换算
09-25
在CSS中设置字体大小时，开发者经常遇到四种单位：em、px、pt和百分比(%)。这些单位在使用时各有特点和...为解决这个问题，可以通过调整body元素字体大小的百分比来调整，例如将62.5%调整为63%，以达到预期的显示效果。
CSS的font-size属性及其em值的使用
09-24
在实际应用中，将body元素的字体大小设置为62.5%或63%是一种常见的做法，这样做的目的是为了将默认的16px浏览器字体大小转换为10px，因为10px刚好是16px的62.5%，而1em将等于10px。这样设置的好处是，当我们在页面的...
html {font-size: 62.5%}
猫老板的豆
03-01 712
一般的，各大主流浏览器的font-size默认值为 16px，此时 1rem = 16px（所以 12px = 0.75rem）； 把 html 设置成 font-size: 62.5%，此时 1rem = 16px*62.5% = 10px（所以 12px = 1.2rem）；（1：10的比例更好换算） html{ font-size: 62.5%; } 注：rem 是 css3 中新增加的一个单位属性，是相对长度单位。相对于根元素(即html元素) font-size计算值的倍数 ...
设置CSS: body{font-size: 62.5%；}的原因是什么？
m0_58017645的博客
08-20 1225
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%
px/em/rem有什么区别，为什么通常给font-size设置为62.5%
subsistent的博客
03-27 443
1. 这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。1. 因为绝大多数浏览器的默认字体大小为 16px ，而将font-size设置为 62.5% 则等价于字体大小的font-size:10px;2. 随之在其他的换算单位，如 rem 的字体换算时，则可以表示为 1rem = 10px， 整数值对于单位的换算会比较方便。2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
body{font-size: 62.5%;}这种写法的原因
zhh_Tony
11-10 988
在网页设计中我们经常看见body{font-size: 62.5%;}这样的设置，为什么偏偏是62.5%呢？这主要是为了方便em与px相互转换，em的初始值为1em=16px，显然这样的话，如1.2em则=19.2px，可是我们在设置的时候很少看见19.2px这样表示的大小，也就是在用px表示大小时数值是不带小数位的。当设置了body{font-size: 62.5%;}时，1em则=16px*6
html字号62.5%,html{font-size:62.5%}
weixin_33669766的博客
06-03 113
【Windows编程】系列第七篇：Menubar的创建和使用上一篇我们学习了利用windows API创建工具栏和菜单栏,与上一篇紧密联系的就是菜单栏,菜单栏是一个大多数复杂一些的Windows应用程序不可或缺的部分.比如下图就是Windows自带的记事本的菜 ...单例模式-用GCD实现用GCD实现单例模式的步骤: 步骤1. 创建头文件 XZSingleton.h,里面代码如下: // .h文件...
手机端开发，基础设置1-body-fontsize
weixin_30451709的博客
11-30 211
一、设计稿设计大小按照750设计。 二、单位使用rem，相对于body fontsize 相对大小计算。 三、假设750下，body fontsize 为100，为了方便计算。 四、通过设置当前设备的 fontsize值，赋予 rem，变值属性。 rem.js： (function () {　　　function changeRootFont() {　　　 var desig...
font-size: 62.5%的意义
q850593913的博客
06-06 2331
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,1.4rem=14px），这样响应式的时候就可以直接改变
css样式 body的font-size 为什么用625%
weixin_30799995的博客
04-05 350
浏览器的默认高度?一般为16px. 为什么用62.5%作为body的默认样式?16px62.5%=10px.* 那么为什么一般多是 16px *625% = 100px; 《响应式Web设计实践》中提到过这一点，桌面浏览器默认页面字体大小是16px，这种情况下设置成具体像素大小或者对应的百分比，看起来的效果是一样的，但是其他类型的设备的默认字体大小不一定是16px,特别是高分辨率的...
为什么body{font-size: 62.5%;}
热门推荐
zxleezx的专栏
10-25 2万+
在网页设计中我们经常看见body{font-size: 62.5%;}这样的设置，为什么偏偏是62.5%呢？这主要是为了方便em与px相互转换，em的初始值为1em=16px，显然这样的话，如1.2em则=19.2px，可是我们在设置的时候很少看见19.2px这样表示的大小，也就是在用px表示大小时数值是不带小数位的。当设置了body{font-size: 62.5%;}时，1em则=16px
手机端font-size:62.5%原理
xiasohuai的博客
11-11 3758
原理： 是根据根节点html的默认字体大小font-size来计算的，以此进行rem的初始值设置。实现对不同屏幕宽度的适配。（100px/16px=6.25=625%, 100代表100px,这里是以100px来换算的，即：1rem=100px。当然有些地方是10px/16px=62.5%，以10px来换算的，即1rem=10px。） rem是css3中新增加的一个单位属性，是相对长度单位。相对...
uni-app如何自适应设备屏幕
最新发布
06-08
uni-app可以通过使用flex布局和rem单位来实现自适应设备屏幕。具体步骤如下： 1. 在index.html中设置meta标签，使页面根据设备宽度进行缩放。 ``` <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> ``` 2. 在App.vue中设置样式： ``` <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; font-size: 62.5%; } body { display: flex; justify-content: center; align-items: center; } /* 设计稿宽度为750px，这里设置1rem=75px */ @media screen and (min-width: 750px) { html { font-size: 100%; } } /* 设计稿宽度为375px，这里设置1rem=37.5px */ @media screen and (max-width: 375px) { html { font-size: 50%; } } </style> ``` 3. 在代码中使用rem单位。 ``` /* 在组件中的样式中使用rem */ .box { width: 10rem; height: 6.4rem; } /* 在js代码中使用rem */ const width = 10; // width为10rem const height = 6.4; // height为6.4rem ``` 通过以上步骤，uni-app就可以实现自适应设备屏幕的效果了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值