关于移动端适配解释
来源:互联网 发布:知乎澳大利亚会计硕士 编辑:程序博客网 时间:2024/05/18 01:59
关于移动端适配的问题,之前一直是懵的,网上有很多文档,找了几篇看后发现方式方法有很多,基本不同,但是普遍选择rem来代替px做单位。
这是因为:rem本身没有继承性。
接下来就对整个过程进行详解!
我们知道,rem是以html的font-size大小为基准进行计算的,比如html的font-size为10px,那么1rem就等于10px。
下面用一张实际的标注图进行解析
该图是设计给的750的图,图中的各种标注,都是以750为基准的。
(这里我们以适配iphone6为例,iphone6分辨率为375)
首先主要看“电话”的容器宽,设计图所标注电话容器宽在分辨率为750的情况时,宽为320px。那么可以得知如果适配分辨为375的iphone6时,他的容器宽应该为180px。
以上都是我们已知的。
这时候如果我们html的font-size为10px,那么我们电话容器宽设置为18rem即可。(接下来就实现动态设置html的font-size)
具体实现方法看如下,首先我们看动态计算html的font-size的代码:
(function (win, doc) { function change() { doc.documentElement.style.fontSize = 20 * (doc.documentElement.clientWidth / 750) + 'px'; } //调用函数 change(); //窗口发生改变时,添加绑定事件 win.addEventListener('resize', change, false);})(window, document);
经由上图计算,可以得知,当我们设备宽为375(iphone6)时,页面html的font-size值为10px,此时1rem就等于10px。
根据750的设计图得知容器宽此时为320,那么适配375时,容器宽应为180。这时经由上图代码计算得知,适配设备分辨率为375时,他html的font-size值为10px,那么此时将容器设置为18rem,就可以做到对iphone6下的适配。
(疑问:设计图标注为320,手动计算设置为18,有没有什么办法直接根据设计图给的尺寸输入就可实现计算呢)
当然有!!!
这个时候就显示出scss的强大了,我们通过scss定义一个计算方法(如下图):
$baseFontSize: 20px !default;@function pxToRem($px) { @return $px / $baseFontSize * 1rem;}
将设计图中容器宽320px套用到公式中,经过计算,可以得到值为18rem。这样,在iphone6下,就可以得到适配过后的容器宽了。
(以上只对iphone6进行解释,其他设备经测试,适配效果很好)
- 关于移动端适配解释
- 关于移动TD测试用户的800元月话费补贴的解释
- 关于移动
- 常用术语解释----移动运营商
- OpenGL光源的移动解释
- 移动端头部代码解释
- 关于serialVersionUID的解释
- 关于Session的解释
- 关于serialVersionUID的解释
- 关于serialVersionUID的解释
- 关于serialVersionUID的解释
- 关于BSS解释
- 关于serialVersionUID的解释
- 关于"^"号的解释
- 关于innerhtml的解释
- 关于serialVersionUID的解释
- 关于Qname的解释
- 关于__iomem的解释
- python编程:从入门到实践 第2章
- 使用Jedis操作redis
- 关于SpringMVC中表单验证无效问题
- PHP socket 通讯
- Spring接收多个对象后台封装
- 关于移动端适配解释
- 1-7·Linux中的关机、重启命令
- div+css文字水平垂直居中
- WCF学习笔记一:WCF服务库和宿主
- python----打开 显示 保存图片
- 深入浅出理解HOG特征---梯度方向直方图
- Go程序实例分析
- 448. Find All Numbers Disappeared in an Array
- JS