【学习】如何制作手机端html模板(REM的实际应用)
以前制作手机页面时,总是很迷茫,不知从何着手,页面也不知如何处理。会用一些百分比啊,媒体查询啊,还有就是目测了,但是各种手机端的屏幕适配是个老大难的问题,没有做到百分百兼容的。自从发现了rem这个好东西,并且听了一位有经验同事的讲解,顿时豁然开朗,现在对于手机端的页面开发,可以说胸中有一点丘壑了。rem最能打动我的地方在于,他不会改变原来在PC端的代码书写习惯,只是把计量单位换了一下,所以迫不及待的拥抱他了!
具体用法贴出如下:
1、html文档(当然是html5)的头部添加一个meta标签声明:
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
其作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放。
2、引入最新版本的jQuery库文件
3、加入下面这段jquery代码:
var deviceWidth=$(window).outerWidth();
if(deviceWidth>640){
$("html").css("font-size","100px");
}else{
$("html").css("font-size",deviceWidth/640*100+'px');
}
代码一看就懂,意思是屏幕宽度大于640时,设置rem的基准为100px,反之,则为屏幕宽度除以640再乘上100。这样就实现了响应式效果,不用费力的写媒体查询了。
4、拿到设计效果图切好需要的图片
5、按制作PC端页面的方式书写页面,把px换成rem,因为前面定的1rem=100px,所以原来以px为单位的数据全部向前移动两位小数点。
6、背景图的设置:背景图引入后,必须加上background-size:横向rem,纵向rem,其中的数字就是切图的尺寸,换算成rem,这个尤为重要,只要有背景图就一定要加上,平铺的背景图(repeat),也是同样的写切下来那部分的数值。
7、特殊注意:字号font-size,边框大小、圆角边框的大小,这些最好还是用px来写。
这里我经过实际检验,其实字号用px和rem都可以,但是1px的边框就不要写成0.01rem了,在手机上根本看不到,所以还是写border:1px solid #颜色。
是不是小于0.1 rem的数字就不要用了,用回px,因为实在太小,这个还得实际检验一下。
以上就是基本用法,当然了,手机端的开发,根据实际页面的复杂程度,会有各种意想不到的问题,不会像上面写的就这么简单,所以,还是要多多练习,积累实战经验。
【学习】如何制作手机端html模板(REM的实际应用)的更多相关文章
- 手机端布局,rem布局动态获取根字体大小
手机端布局,rem布局动态获取根字体大小. 以下代码: //rem布局动态获取根字体大小 function remDynamicLayout(){ var $windowWidth = $(windo ...
- javascript中常见的函数封装 :判断是否是手机,判断是否是微信,获取url地址?后面的具体参数值,毫秒格式化时间,手机端px、rem尺寸转换等
// 判断是否是手机function plat_is_mobile(){ var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad ...
- js控制手机端字体大小rem
//得到手机屏幕的宽度 let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth; if(ht ...
- 手机端处理布局rem
方法一 if (document.documentElement.clientWidth > 600) {//页面宽度大于600px让其宽度等于600px,字体大小等于60px,居中 docum ...
- 手机端页面rem自适应脚本
什么是rem 参照 web app变革之rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对 ...
- 手机端布局rem 与vm的使用
手机端原来的时候,在项目中使用js判断出html的字体,然后根据rem设置字体,但是js本着少用的原则,考虑用vm,vh等(顺带说一句,vm vh是网页可视区域宽度 高度 即浏览器宽度减去约16px) ...
- 手机端使用rem适配
最近一直在做手机端的东西,各种型号的手机适配很是无解.经过同事及百度找到了这么一个方法 html font-size默认100px 将rem进行换算1px==0.01rem; 页面在各个手机适配个别会 ...
- 手机端rem如何适配_rem详解及使用方法
什么是rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对大小就可以实现自适应了,就不用什么 ...
- 手机端页面自适应解决方案—rem布局进阶版
手机端页面自适应解决方案—rem布局进阶版 https://www.jianshu.com/p/985d26b40199 注:本文转载之处:https://www.cnblogs.com/anni ...
随机推荐
- Java中的基本数据类型和基本数据类型之间的转换
在Java中有8中基本数据类型,分别为: 整型: byte.short.int.long 浮点型:float.double 布尔型:boolean 字符型:char. byte: 8位, 封装 ...
- 201521123056 《Java程序设计》第11周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 1. 互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) ...
- JAVA课程设计-----加减法测试博客
1.团队成员介绍(一个人做的) 谢季努:网络1513 201521123079 2.项目git地址 3.项目git提交截图 4.项目运行截图 输入答案后点击确认就会出现本次的得分 如果觉得成绩不理想点 ...
- 201521123079《java程序设计》第9周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己 ...
- apache: apache-tomcat-6.0.35完整下载
Index of /dist/tomcat/tomcat-6/v6.0.35/bin Name Last modified Size Description Parent Directory - ex ...
- shell脚本命令,一些你在书上找不到的命令。
1.!$<!$是一个特殊的环境变量,它代表了上一个命令的最后一个字符串.如:你可能会这样: $mkdir mydir$mv mydir yourdir$cd yourdir 可以改成: $mkd ...
- Hibernate中cascade属性的区别
xml对于集合的级联操作属性cascade的取值可以是: none: 不级联操作,默认为none save-update:针对的是当对当前对象进行save或update操作时,要对想关联的对象进行sa ...
- [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API
我们接着上文[js高手之路] html5 canvase系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...
- 个人从源码理解angular项目在JIT模式下的启动过程
通常一个angular项目会有一个个模块(Module)来管理各自的业务,并且必须有一个根模块(AppModule)作为应用的入口模块,整个应用都围绕AppModule展开.可以这么说,AppModu ...
- Highway Networks
一 .Highway Networks 与 Deep Networks 的关系 深层神经网络相比于浅层神经网络具有更好的效果,在很多方面都已经取得了很好的效果,特别是在图像处理方面已经取得了很大的突破 ...