400-887-9553

字应该如何适配不同屏幕的大小 字应该如何适配不同屏幕的大小  字应该如何适配不同屏幕的大小

发布日期:2019-03-02 22:34   来源:www.byroncn.com

1.先设置header里面的meta标签:
 
 
meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1"
 
2.在header写上script标签
 
document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px';
 
要设置Html的font-size: 设置html标签的font-size,上面概论(使用rem为元素设定字体大小时,相对大小对比的是HTML根元素)写的很清晰,页面元素使用rem单位时,是相对于这个html标签的font-size的大小为基础的。
 
为什么是clientWidth/640?为什么要乘以100? 
2.1)例如:设计稿宽度是640px,有一个元素设计稿上的宽度是50px,设备物理宽度是320px,那么根据比率计算出实际设备里面宽度是:50*(320/640)=25px;首先这里没有问题,实际的上的宽度根据(320/640)这个比率计算出来了是25px,这个(320/640)相当于1rem。
 
2.2.1)为了计算方便 我们后面把比率乘以了100,(320/640)*100,那么相对应这个元素在设置数值的时候就需要除以100了,这样可以保证最后出来的数值不变,相当于0.5rem=50*(320/640),最终出来的数值一致。 2.2.2)一般浏览器的最小字体是12px,如果font-size=(320/640)px,相当于font-size=0.5px,那么这个数值就小于12px,会造成一些计算的错误,和一些奇怪的问题*100后,font-size是50px。
解释一下:设备宽度/设计稿宽度(以320/640为例) 
320/640=0.5*100=50px=1rem; 
然后设置html标签的font-size: 
font-size:0.32rem=50*0.32=16px; 
(这个0.32的比例是自己设置的,因为屏幕最小用的最多的就是320的,这样比较成比例!!!) 
就是说在这个html里面的所有1rem=16px了。如果这个字体在设计稿上是50px 而设计稿是640的大小 那在320的屏幕上应该是25px的大小 
也就是1.5625rem大小。 
公式总结: 
1 rem =( clientWidth/640)*100 *0.32= ?? px(如上1 rem=16px) 
xx px= (yy px)*( clientWidth/640){备注:yy:设计稿上大小;xx: 设备上具体大小} 
zz rem= xx / 1rem=xx / ??px {zz 就是你写在css里的具体字的大小} 
举例:iphone6 宽372 设计稿还是640的(也有720的设计稿) 
1 rem = 372/640*100*0.32= 18.6px
 
假如:设计稿是50px的 
50*(372/640)=29px 实际屏幕上应该是29px 
29/18.6=1.5625rem 
字体大小写1.5625rem,和在320屏幕大小里写的大小一样的数值。在320宽的屏幕里就是16px大小,在372屏幕里就是29px大小。

解决方案

多场景行业解决方案。供网站建站、网络营销、APP开发、企业应用软件等多平台运营的全方位解决方案。抓住行业特性,集中市场焦点为您打造出一套将商品销售、供应链、线上线下、服务等多平台运营的全方位解决方案。 查看更多
咨询服务热线 / 400-887-9553
手机. 13423915001
邮箱. postmaster@byroncn.com
地址. 总部:深圳市龙岗区坂田商业广场步行街二层





拜伦科技深圳有限公司 粤ICP备17047396号-1 Copyright 2011,ALL Rights Reserved byroncn.com