Wap,rem起大作用了!
来源:互联网 发布:粤贵银交易软件 编辑:程序博客网 时间:2024/04/28 06:13
引言
在长城工作了一个半月时间,主要负责的项目是二手车安心换。在完成PC端的功能之后,听说要做Wap站的,
之前没有做过,所以稍作了解之后发现很简单~
先说一下Web,Wap和App的区别和联系。
Web,很明显,就是在电脑端通过浏览器访问从而获取资讯的方式。优点是获取的信息丰富,显示的内容也相
对于Wap和App来说要复杂一些。缺点是携带不方便,也因为内容丰富所以很容易迷失在信息海洋里。
App,在手机上的一个个小图标就是App方式的。没做过App方面的开发,所以就不乱说了。
Wap,入口就是手机端的浏览器,但是浏览的尺寸是跟App页面类似的,自动适应移动设备的尺寸大小。而且相
对于Web来说,携带方便,内容突出;相对于App来说,内容占用小,一个二维码(链接)就OK。
Wap的自适应实现
说了这么多,再说如何实现wap的自适应功能。其实很简单,我们先捋一捋。
移动设备,就目前而言是发展的很快的,而且新的款式,新的尺寸一直在更新换代。像苹果,就从iphone 5到
iphone 6 plus,外加ipad(谷歌浏览器调试的尺寸和类型),如果实现自适应,首要问题是控制变量,这里唯一的变
量就是各个设备的尺寸,所以先获取设备的屏幕尺寸!
var windowWidth = html.clientWidth;然后根据屏幕尺寸设置整个页面尺寸显示的基础值:
(function () { document.addEventListener('DOMContentLoaded', function () { var html = document.documentElement; var windowWidth = html.clientWidth; html.style.fontSize = windowWidth / 6.4 + 'px'; }, false);})();
然后就是rem的使用了。
如果不知道rem是什么的话,建议看看这个:web app变革之rem
网上有很多人问rem和px的计算方式,简直就是鬼扯!rem是在你设置的基础值上的单位,px是浏览器盒子模型默
认的单位,所以二者没有关系的。
rem的使用方法跟px是一样的,都是单位嘛,所以。。。简单!下边是一小段CSS样式:
.banben{width: 100%;height: 2.85rem;background-color: #f5f5f5;text-align: center;border-bottom: 0.02rem solid #dddddd;}.banben img{float: left;width: 1.06rem;margin: 0.53rem;}.banben span{font-size: 0.18rem;color: #aaaaaa;}
所以使用没有问题了吧!
- Wap,rem起大作用了!
- zookeeper在dubbo起了什么作用
- wap发短信的标签,我找了好久才起的
- extern"C"到底做了什么,起流什么作用
- zookeeper在dubbo到底起了什么作用
- 二极管起什么作用?
- 这里的const是起了个什么作用呢? void Enter () const;
- 为何人人都爱vivo X7?这个功能起了关键作用!
- 大鹏乘风起
- 秋风起了
- 起雾了
- 今天起晚了
- 起雾了
- 东风起了
- zookeeper在dubbo到底起了什么作用,dubno如何解决了阿里的高并发问题?
- 虽然年龄大了,也要从头学起 MVC JQuery的Ajax应用测试(一)
- 虽然年龄大了,也要从头学起 MVC JQuery的Ajax应用测试(二)
- 虽然年龄大了,也要从头学起 MVC JQuery的Ajax应用测试(三)
- 更改pip源至国内镜像,显著提升下载速度
- android LruCache使用
- 移动WEB:JS控制 {body} 字体大小控制【常用】
- shell脚本执行提示没有那个文件或目录
- IO模型学习笔记
- Wap,rem起大作用了!
- js 控制 button 切换
- apache本地配置多域名(wampserver本地配置多域名)
- GLFW初体验
- 【C#】43. TPL基础——Task初步
- 串口过滤完整代码
- 软件开发进度表
- 编程练习题
- Android自动化测试 -- Monkey