Html+字体适配不同屏幕大小

2018-03-10 PM 04:03.来自互联网

(阅览)Read 4172

(调整字号)Size

16px 14px 12px

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大小。





0371/8622 0001

weekdays :   -am. 09:00-11:30
-pm.14:00-18:30 Open Hours

中国郑州 郑东新区金水东路与中兴路交汇处楷林IFC /A座 -17F-1713

Room1713 Building A,Kineer IFC,JinShui East Rd.
Zhengdong New Area,Henan,China