手机端能学习html吗,【学习】如何制作手机端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，因为实在太小，这个还得实际检验一下。

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

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

「精品」手绘游戏原画绘画学习的技巧
手绘游戏原画绘画学习的技巧,其实画画是把眼睛能看到的东西,用手和可用的工具,用科学的光影的理解方式,把眼前三维视觉立体的物体,实现在二维平面的画面中!因此,最初评价一张画好坏的标准,就是眼前看到的三维 ...
学习原画一定要会手绘素描吗？如何学习原画？
在贴吧论坛看到很多人都有这种想法,没有美术基础就不要学习原画了,如果要学原画.漫画.插画之类还是先报个美术班把基础打捞学习手绘素描,再报个大佬班吧,这种观念是不是对的呢? 第一有美术基础就一定可以学好 ...
手绘绘画培训如何系统学习？找美术集网校错不了！
听说很多小伙伴都想咨询一下手绘如何学习?咨询这个问题大部分可以规划为两种人群,一种就是大学生一种就是上班族是比较多的,因为大学生和上班族学习完手绘时可以赚钱的,像一些手绘头像,手绘人物,手绘作品都是比 ...
Unity制作手机端VR第一步
基于Unity制作手机端VR小游戏我并非专业人员,写文章目的在于分享和请教: 1.指针与射线的创作调整好大小颜色,简单的准星就制作好了. 2.下面利用C#制作射线,我个人认为这是很重要的部分,需要 ...
如何在电子学习 e-learning 平台学习管理系统 LMS 中集成使用 ONLYOFFICE
如何在电子学习 e-learning 平台学习管理系统 LMS 中集成使用 ONLYOFFICE 重大消息!我也咩咩咩了! 真的是,浑身不舒服,没想到啊没想到,我这样高颜值的人,居然也会咩咩咩了套用 ...
联邦学习 OR 迁移学习？No，我们需要联邦迁移学习
2020-11-18 13:40:43 机器之心分析师网络作者:仵冀颖编辑:H4O 在这篇文章中,作者通过 4 篇论文详细介绍了联邦学习中的联邦迁移学习问题,并探讨了向经典联邦学习中引入迁移学习的 ...
React学习:入门实例-学习笔记
文章目录 React学习:入门实例-学习笔记 React的核心需要引入三个库什么是JSX react渲染三步骤 React学习:入门实例-学习笔记 React的核心 1.组件化:把整一个网页的拆分 ...
knockoutJS学习笔记01：从拼接字符串到编写模板引擎
开篇关于knockout的文章,园里已经有很多大神写过了,而且都写得很好.其实knockout学习起来还是很容易的,看看官网的demo和园里的文章,练习练习就可以上手了(仅限使用,不包含研究源码). ...
最新8篇ICML2020投稿论文：自监督学习、联邦学习、图学习、数据隐私、语言模型、终身学习...
点上方蓝字计算机视觉联盟获取更多干货在右上方 ··· 设为星标 ★,与你不见不散编辑:Sophia 计算机视觉联盟报道 | 公众号 CVLianMeng 转载于 :专知 AI博士笔记系列推荐 ...
基于深度学习、强化学习、开源RASA对话引擎的多场景对话机器人
向AI转型的程序员都关注了这个号???????????? 机器学习AI算法工程公众号:datayx Chatbot_CN 是一个基于第三代对话系统的多轮对话机器人项目,旨在于开发一个结合规则系统 ...

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

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

最新文章

热门文章