拿到设计稿以后,
先设置
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
如果是iphone6尺寸,横向分辨率为750，
设font-size=100px,
那么1rem=100px,
那么width为750 / 100 = 7.5rem
当要自适应到iphone5手机
手机的横向分辨率为640
而上面已经设置了width=7.5rem,不可能修改
所有 font-size 会自适应修改 = 640/7.5 = 85.3333px
而font-size其实就是 px 与 rem 的 比例，
当iphone6时比例为100.
自适应到iphone5的时候,
(求出font-size)
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
比例(font-size)就变小了,变为85.33333
所以屏幕里的内容,间隔距离,等也随之变小 ,实现自适应布局
(rem * font-size = px)
网友评论