使用rem适配不同屏幕的移动设备
2.开始进入rem教程1.先设置header里面的meta标签: <meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1"> ? 2.在header写上<script>标签 <script type="text/javascript"> document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + ‘px‘; </script> ? 问题:为什么要设置Html的font-size?答:这里是设置html标签的font-size,上面概论红色字写的很清晰,页面元素使用rem单位时,是相对于这个html标签的font-size的大小为基础的。 问题:为什么是clientWidth/640?为什么要乘以100?答:
例如:设计稿宽度是640px,有一个元素设计稿上的宽度是50px,设备物理宽度是320px,那么我们在页面上应该设置宽度为 width:50rem,相当于宽度是:50*(320/640)=25px;这里能正确算出在320px的设备上刚好占一半,其实可以想象为 rem=(320/640)。
3.设置好html的font-size,那么我们下面就可以开始编写根据设计稿的例子了。设计稿是640px,有一个红色盒子宽高都是320px,里面的文字是32px,那么下面是这个例子的代码。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> <script type="text/javascript"> document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + ‘px‘; </script> </head> <body style="margin: 0 ;padding: 0;font-size: 0.32rem"> <div style="width: 3.2rem;height: 3.2rem ;background: red"> <span>danny.xie</span> </div> </body> </html> ? 1.在iphone5下的情况,设备的物理像素是320px ?1.在iphone6下的情况,设备的物理像素是375px ?(编辑:ASP站长网) |