首页 > 作文

css中rem是怎么计算的,是怎么自适应手机端,匹配设计稿的

更新时间:2023-04-03 20:46:30 阅读: 评论:0

dnf柔道加点好多小伙伴当学习到移动端的时候,首先就会接触到的是移动端的单位,因为在移动端布局就不太适合用px(一些字体还是需要继续使用px)

首先先介绍一下都有那些单位:
px、em、pt、rem、%、vh、dp

今天我们来介绍的是rem单位
首先大家需要知道一个数值,那就是750px
没错这个750就是iPhone6、7、8的屏幕宽度,因为750这个宽度的需求还是比较大的因此,UI的设计稿一般都是设置的750px的设计稿,但是这时候问题就来了,但是好多安卓手机他不是750px的宽度啊,那怎么办呢。所以就用到了自适应单位rem

移动端 rem自适应布局 (750的设计稿)本文章向大家介绍 移动端 rem自适应布局 (750的设计稿) ,主要包括 移动端 rem自适应布局 (75诸葛亮舌战群儒0的设计稿) (function(doc, win) {     var docEl = doc.documentElement,        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',       一叶障目不见泰山 recalc = function() {             var clientWidth = docEl.clientWidth;            if (!clientWidth) return;            if (clientWidth >= 750) {                 docEl.style.fontSize = '100px';            } el {                 docEl.style.fontSize = 珍惜现在的幸福100 * (clientWidth / 750) + 'px';            }      韩语大婶  };    if (!doc.addEventListener) return;    win.addEventListener(resizeEvt, recalc, fal);    doc.addEventListener('DOMContentLoaded', recalc, fal);})(document, window);

接下来可能就会还有小伙伴疑问了,上面的值写的就是750px的宽度啊,如果不到750px宽度的怎么办呢。

首先如果手机屏幕为750px的手机,那么1rem=100px(因为手机大本身就需要大字体)

然后如果手机屏幕小于750px的手机,假如说375px的手机,那么1rem=50px(因为手机小所以本身就会自适应的比较小)

所以通过以上代码就可以解决了手机端单位的自适应

如果介绍对您有帮助请您点个赞,创作不易,kukudehu!

本文地址:https://blog.csdn.net/weixin_46003019/article/details/109248443

本文发布于:2023-04-03 20:46:28,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/57de0f8158ec96df5d02f55bcac0a1c2.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:css中rem是怎么计算的,是怎么自适应手机端,匹配设计稿的.doc

本文 PDF 下载地址:css中rem是怎么计算的,是怎么自适应手机端,匹配设计稿的.pdf

标签:自适应   宽度   就会   手机
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图