移动端适配font-size计算的原理瞎猜

最新推荐文章于 2023-09-18 09:55:40 发布
最新推荐文章于 2023-09-18 09:55:40 发布
阅读量470 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44962737/article/details/100164468
版权

移动端适配font-size计算的原理瞎猜

网上看的头大 也看不大明白 列了个式子猜 还对上了 不知道是不是真的是这个计算原理

div在设计稿上占的比例等于div在设备上占的比例列出下列等式

div宽度/ 设计稿宽度=div设备显示宽度/设备宽度
div宽度×设备宽度/设计稿宽度=div设备显示宽度
=>
div宽度（设计稿多少写代码时写多少，单位变成rem）×font-size（设备宽度/设计稿宽度）=div设备上显示宽度
有时候为了计算方便会把设计稿除10或者100；相应的写代码时也除以10或者100就行了 这个100跟10的多少完全看你自己喜好 就是a*b/d=c 把d除10为了c不变a就需要除10了
移动端适配font-size计算的原理瞎猜
网上看的头大 也看不大明白 列了个式子猜 还对上了 不知道是不是真的是这个计算原理

div在设计稿上占的比例等于div在设备上占的比例列出下列等式

div宽度/ 设计稿宽度=div设备显示宽度/设备宽度
div宽度×设备宽度/设计稿宽度=div设备显示宽度
=>
div宽度（设计稿多少写代码时写多少，单位变成rem）×font-size（设备宽度/设计稿宽度）=div设备上显示宽度
有时候为了计算方便会把设计稿除10或者100；相应的写代码时也除以10或者100就行了 这个100跟10的多少完全看你自己喜好 就是a*b/d=c 把d除10为了c不变a就需要除10了

weixin_44962737
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动端适配 rem & vw 计算工具
12-29
因此，存在一些在线工具，如"移动端适配 rem & vw 计算工具"，可以帮助开发者快速、准确地进行转换。这些工具通常允许输入px值，并自动计算出对应的`rem`和`vw`值，大大提高了工作效率。 5. **`jqueryremvw`工具** ...
移动端适配 使px自动转换rem
12-14
通过屏幕的变化，设置动态根元素 font-size ：   我写在vue的html中 function setRem () { let htmlWidth = document.documentElement.clientWidth ||document.body.clientWidth; //检测html的屏幕宽度和body的...
CSS中的font-size属性使用教程
手牵手科技
03-30 4105
基本语法结构： Font-size+字体大小数值+单位 单词：font-size 语法：font-size : absolute-size | relative-size | length 取值：xx-small | x-small | small | medium | large | x-large | xx-large xx-small:最小 x-small:较小 small:小 medium...
CSS之font-size的说明与妙用
最新发布
zhang_hai_cheng的博客
09-18 9228
font-size用来设置页面的字号，他有很多种指定方式，像绝对值、相对值、长度值、百分比值、数学值、全局值。用它怎么设置比浏览器最小字号更小的字号，并能够让页面实际渲染出来？ 我的文字之间为什么有空隙，两个span标签不挨着，两个图片中间有空白条？
html中根据font-size精确计算文本宽度
rongyi2233的博客
09-08 1701
比如获取到的12px大小的字母w的大小是8.67px；12px大小的字母j的宽度是2.67px，完美~获取到的是真实的文本大小，而不是元素的宽度。利用canvas的方法去获取。
深入理解 font-size
热门推荐
qq_44158936的博客
03-07 3万+
1、广义上的 font-size 用于设置 字体大小，辅以单位控制，实质上是控制 字符框 的高度。 2、狭义上的 font-size 2.1、字体的基线 line-height : 意为 行高 ，content-area (内容区域)，被 font-family 、 font-size 共同影响（元素看到的高度与实际字体设置大小不一样的原因） em box : 意为 字体框 ，仅被 fon...
font-size：625%；
祥哥的说
05-03 1806
1.我看了网上很多关于rem的资料，基本都说浏览器的默认字号就是16px，然后直接定义font-size:62.5%。但是，rem属于css3的属性，有些浏览器的早期版本和一些国内浏览器的默认字号并不是16px，那么上面的10/16换算就不成立，直接给html定义font-size:62.5%不成立。 2.chrome强制字体最小值为12px，低于12px按12px处理，那上面的1rem=10p...
vue3移动端适配的解决方案（老方案）
12-01
Vue3 移动端适配解决方案是针对现代前端框架 Vue3 的一项技术实践，旨在确保在不同设备和屏幕尺寸上提供良好的用户体验。Vue3 提供了更强大的功能和更高的性能，但移动端适配是一个挑战，因为移动设备的屏幕尺寸、...
H5移动端适配 Flexible方案
01-21
一、移动端一些概念 视觉稿 （选取一款手机的屏幕宽高作为基准） 在前端开发之前，视觉 MM会给我们一个psd文件，称之为视觉稿。 对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点： 1）...
手机端font-size:62.5%原理
xiasohuai的博客
11-11 3736
原理： 是根据根节点html的默认字体大小font-size来计算的，以此进行rem的初始值设置。实现对不同屏幕宽度的适配。（100px/16px=6.25=625%, 100代表100px,这里是以100px来换算的，即：1rem=100px。当然有些地方是10px/16px=62.5%，以10px来换算的，即1rem=10px。） rem是css3中新增加的一个单位属性，是相对长度单位。相对...
css响应式布局
weixin_33971205的博客
06-22 41
以设计稿为准，假设设计稿竖屏宽度为750px，取根元素的font-size为50px 在iphone6(375px)下，deviceWidth=7.5rem, 这个就是viewPort中的deviceWidth， 所以fontsize计算公式为 font-size=deviceWidth/7.5 即50px，因此我们可以设置iphone6下 html的font-size为312....
计算html的font size,前端开发js+rem动态计算font-size的大小，适配各种设备！
weixin_39836943的博客
06-26 628
/p>content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;”name=”viewport”/>响应式布局font-size: 20px;width: 100%;height: 100%;}body {margin: 0;padding: 0;}header,footer {...
html设置某一行的字号为10px,为什么即使设置html为font-size:62.5%，有时候1rem != 10px...
weixin_39953629的博客
06-01 329
为什么即使设置html为font-size:62.5%，有时候1rem != 10px问题描述为什么有些情况1rem不等于10pxhtml{font-size: 62.5%;}.div1{width: 500px;height: 100px;background: red;}.div2{width: 50rem;height: 10rem;background: blue;} 按照道理，页面的两个...
移动端html font-size动态计算设置
Mo_Luffy的博客
08-15 1630
设计稿以750px为宽度，其中有个元素是100px，如何设置font-size，使同一段代码在不同的设备上保持一致？ 设计稿宽度 设备宽度 html font-size 元素宽度 css代码 750px 320px(iphone5) ? 100px 1rem 750px 375px(iphone6/7\iphoneX) 50px 100px 1rem 750px 414px...
一看就懂得移动端rem布局、rem如何换算
weixin_33736048的博客
11-12 820
这里使用了js控制根元素的font-size大小，然后进行rem换算，在js代码后面会说明以下问题。 1.如何进行rem运算？ 2.如果纯js控制根元素用rem布局会出现的小问题，如何解决？ 3.如有欠缺的地方，大神们可以指出错误或者改进。 function intiSize(){ //获取当前浏览器窗口宽度(这里的实质就是body宽度) var win_w=doc...
响应式font-size计算
wangqiuchen_Study的专栏
01-15 653
7.5：设计稿尺寸处以100 css中的样式：（设计稿中的数值/100），单位：rem document.ready=function(){            var html = document.documentElement;      var windowWidth = html.clientWidth;      html.style.fontSize = windowWidth...
移动端适配——font-size计算
weixin_30901729的博客
12-08 407
function calcFontSize(){ var view_width = window.screen.width; var view_height = window.screen.height; var font_size = view_width/15;//750设计图 ...
【移动端适配】为什么根元素font-size设置成100px或625%？
劲枫的博客
06-26 1万+
rem：是一个相对单位，相对根元素字体大小的单位，再直白点就是相对于html元素字体大小的单位。 优点：这样在计算子元素有关的尺寸时，只要根据html元素字体大小计算就好。不再像使用em时，得来回的找父元素字体大小频繁的计算，根本就离不开计算器。 首先看下图：html的字体大小设置为font-size:62.5%原因：浏览器默认字体大小是16px，rem与px关系为：1rem = 10px，1...
uniapp移动端rem适配，font-size设置在哪
04-04
在uniapp移动端中，可以在 `App.vue` 或 `main.js` 文件中设置 `rootFontSize`，然后在 `App.vue` 中通过 `style` 标签设置 `html` 的 `font-size`，从而实现适配。 例如，在 `main.js` 文件中设置 `rootFontSize`： ```javascript import Vue from 'vue' import App from './App' Vue.config.productionTip = false const rootFontSize = 16 Vue.prototype.$rootFontSize = rootFontSize App.mpType = 'app' const app = new Vue({ ...App }) app.$mount() ``` 然后，在 `App.vue` 文件中设置 `html` 的 `font-size`： ```html <template> <div class="container"> <!-- 页面内容 --> </div> </template> <style> html { font-size: {{ $rootFontSize / 2 }}px; } </style> ``` 这里将 `rootFontSize` 除以 2 是因为 uniapp 中的 css 单位是 `rpx`，而 `html` 的 `font-size` 使用的是 `px`，所以需要将 `rootFontSize` 转换为 `px`。同时，由于 `rpx` 是以屏幕宽度为基准的，所以这里将 `rootFontSize` 除以 2 可以将 `html` 的 `font-size` 设置为屏幕宽度的一半，从而实现适配。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值