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

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

时间: 2024-08-01 09:58:38

如何制作手机端html模板(REM的实际应用)的相关文章

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

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

做网站首页制作手机端浏览的跳转

<script language="javascript"> if(!IsPC()){ window.location.href="/m/";   //要跳转的地址,也可以跳转到 window.location.href="http://m.xxx.com/"; } function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = new Array(&qu

javascript中常见的函数封装 :判断是否是手机,判断是否是微信,获取url地址?后面的具体参数值,毫秒格式化时间,手机端px、rem尺寸转换等

// 判断是否是手机function plat_is_mobile(){ var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; var bIsMidp = sUserAgent.match

(淘宝无限适配)手机端rem布局详解

一.        首先我们先来看看淘宝不同分辨率下的适配页面 可以看出来,淘宝在不同的分辨率下,页面的尺寸和模块间的间距会发生变化,这是因为淘宝采用了rem,这篇文章会简单介绍淘宝的布局思路以及具体做法,不过在此之前我们先了解一些移动端的知识,以为更好的理解淘宝布局的方案,下面我们来看一些移动端的知识 二.了解一些移动端的知识viewport的<meta>标签用法 其主要用来告诉浏览器如何规范的渲染Web页面,而你则需要告诉它视窗有多大 移动端开发中,通常我们都会采用<meta nam

rem手机端页面自适应完美解决方案(最新)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> ! function(e) { function t(a) { if(i[a]) return i[a].exports; var n = i[a] = { exports: {},

磨矿球磨机类机械设备网站织梦模板(带手机端)

模板名称: 磨矿球磨机类机械设备网站织梦模板(带手机端)+PC+wap+利于SEO优化 模板介绍: 织梦最新内核开发的模板,该模板属于企业通用类.磨矿球磨机等机械产品站类企业都可使用, 这款模板使用范围极广,不仅仅局限于一类型的企业,你只需要把图片和产品内容 换成你的,颜色都可以修改,改完让你耳目一新的感觉! 自带最新的手机移动端,同一个后台,数据即时同步,简单适用! 原创设计.手工书写DIV+CSS, 完美兼容IE7+.Firefox.Chrome.360浏览器等:主流浏览器: 页面简洁简单,

手机端页面rem自适应脚本

什么是rem 参照 web app变革之rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对大小就可以实现自适应了,就不用什么媒体查询那些的. 我们的设计图往往宽度是640或者其他尺寸的,不过我建议是用这个尺寸,以640为基准,以小到大,实现自适应,下面实现的比例为1rem=40px(640宽度). 为什么这样搞? 这样一套代码就搞定手机端尺寸自适应,不需要媒体查询,而且利用Sass和Le

70.JS---利用原生js做手机端网页自适应解决方案rem布局

利用原生js做手机端网页自适应解决方案rem布局 刚开始我用的是下面这段代码,然后js通过外部链接引入,最后每次用手机刷新网页的时候都会出现缩略图 function getRem(pwidth, prem) { var html = document.getElementsByTagName("html")[0]; var oWidth = document.body.clientWidth || document.documentElement.clientWidth; html.s

TP3.2.x判断手机端访问,同一个域名在PC和手机端展示不同模板(半独立式网站)

首先介绍APP_STATUS内置常量,TP入口文件增加APP_STATUS 参数,  自动加载不同的项目配置文件,通过配置文件指向不同的模块 手机端访问时调用Wap手机模块,实现在手机端访问时展示出手机网站,无需跳转域名首先我们在./Application/Common/Conf/ 目录下建立两个公共配置文件:config.php 和Mobie.php config.php文件中 <?phpreturn array( 'DEFAULT_MODULE'=>'Index', 'DEFAULT_CO