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

以前制作手机页面时，总是很迷茫，不知从何着手，页面也不知如何处理。会用一些百分比啊，媒体查询啊，还有就是目测了，但是各种手机端的屏幕适配是个老大难的问题，没有做到百分百兼容的。自从发现了rem这个好东西，并且听了一位有经验同事的讲解，顿时豁然开朗，现在对于手机端的页面开发，可以说胸中有一点丘壑了。rem最能打动我的地方在于，他不会改变原来在PC端的代码书写习惯，只是把计量单位换了一下，所以迫不及待的拥抱他了！

具体用法贴出如下：

1、html文档（当然是html5）的头部添加一个meta标签声明：

其作用是让当前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，因为实在太小，这个还得实际检验一下。

以上就是基本用法，当然了，手机端的开发，根据实际页面的复杂程度，会有各种意想不到的问题，不会像上面写的就这么简单，所以，还是要多多练习，积累实战经验。

转载于:https://www.cnblogs.com/xiaoxianweb/p/5416911.html

【学习】如何制作手机端html模板（REM的实际应用）相关推荐

手机端能学习html吗,【学习】如何制作手机端html模板（REM的实际应用）
以前制作手机页面时,总是很迷茫,不知从何着手,页面也不知如何处理.会用一些百分比啊,媒体查询啊,还有就是目测了,但是各种手机端的屏幕适配是个老大难的问题,没有做到百分百兼容的.自从发现了rem这个好东 ...
html通过自适应制作手机端音乐播放器
html通过自适应制作手机端音乐播放器实现效果: 实现思路: 1.布局: (1).将手机的宽度进行10等分为10rem (2).通过rem定义各个元素的宽高.间距.字体大小 (3).通过CSS3 ...
Unity制作手机端VR第一步
基于Unity制作手机端VR小游戏我并非专业人员,写文章目的在于分享和请教: 1.指针与射线的创作调整好大小颜色,简单的准星就制作好了. 2.下面利用C#制作射线,我个人认为这是很重要的部分,需要 ...
ps制作手机端网页字体大小_制作网页的最佳字体大小
ps制作手机端网页字体大小 To make web content work, text on a page must be readable for all visitors. Following ...
西安网站制作手机端的优化方法有哪些？
西安网站制作手机端的优化方法,实际上是很简单的,无论是做移动手机端还是PC端的优化,我们在应该搞清楚的就是搜索引擎的排名规则,否则你将会是在毫无章法的运营. 移动端可以根据代码结构分为跳转适 ...
网页制作手机端与PC端兼容
网页制作--手机端与PC端兼容手机端与PC端使用一套代码时,随屏幕分辨率的大小变化,会产生媒体查询并实现手机端与PC端的切换 (一套代码) <meta http-equir="Cac ...
(PC+WAP)带手机端pbootcms模板类网站
PbootCMS内核开发的模板,该模板属于家纺针织类企业使用! 页面简洁简单,容易管理,附带测试数据! 所有页面均都能完全自定义标题/关键词/描述,PHP程序,安全.稳定.快速:用低成本获取源源不断订 ...
(PC+WAP)带手机端pbootcms模板门窗设计类网站
PbootCMS内核开发的模板,该模板属于门窗设计类企业使用! 页面简洁简单,容易管理,附带测试数据! 所有页面均都能完全自定义标题/关键词/描述,PHP程序,安全.稳定.快速:用低成本获取源源不断订 ...
(PC+WAP)带手机端pbootcms模板链条导轨类网站
PbootCMS内核开发的模板,该模板属于链条导轨类企业使用! 页面简洁简单,容易管理,附带测试数据! 所有页面均都能完全自定义标题/关键词/描述,PHP程序,安全.稳定.快速:用低成本获取源源不断订 ...

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

【学习】如何制作手机端html模板（REM的实际应用）相关推荐

最新文章

热门文章