码迷,mamicode.com
首页 > 移动开发 > 详细

【学习】如何制作手机端html模板(REM的实际应用)

时间:2017-11-06 11:30:30      阅读:260      评论:0      收藏:0      [点我收藏+]

标签:最好   屏幕   颜色   viewport   dev   nbsp   a标签   ble   initial   

以前制作手机页面时,总是很迷茫,不知从何着手,页面也不知如何处理。会用一些百分比啊,媒体查询啊,还有就是目测了,但是各种手机端的屏幕适配是个老大难的问题,没有做到百分百兼容的。自从发现了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的实际应用)

标签:最好   屏幕   颜色   viewport   dev   nbsp   a标签   ble   initial   

原文地址:http://www.cnblogs.com/zhangzhaoyang/p/7791570.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!