本篇适用于初次使用rem为单位切图而无从下手的童鞋。核心是根据屏幕动态改变根元素字体大小,以达到适配各种屏幕。这只是一个拿来就用的教程。很多东西没有详细说明。不过对于快速做手机端切图很有帮助。

模板Github

使用
1.下载完成后首先修改js文件中的基本单位:psd宽度是640就写640,是750就写750.现在的设计稿大部分是以iphone 6 为基准设计的,也就是750px。

2.切图时,我们以100px为基本单位(至于为什么是100px,自己看看我的js代码就知道了),每个元素的宽高,字体等等就直接用rem来写,不用执行减半等操作,设计稿是多少就写多少。下面是一张750px的设计稿

图中那个690px*336PX元素css样式如下:

.box{
width: 6.9rem;
height: 3.36rem;
margin: 0 auto;
background: #ffffff;
}

因为我们用了动态改变根字体大小,所以.box会自动适应各种屏幕。现在我们就可以愉快的切图了。
使用方法就这么简单。其中最重要的就是那段js代码。。后面的文字,想看的就看看吧。

3.这句是废话,如果你够牛逼就可以直接用px来写各个元素的宽高,字体等等,之后直接用sass或者less转换成rem就行了。

4.调试时记得把浏览器默认最小字体设置为最小。手机端是支持12px以下的字体的。


5.对于不是750px的设计稿,我们其实是可以将其等比缩放到750px的


说明:

一、头部加入最常用的meta内容
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">

width viewport的宽度
initial-scale 初始化缩放比例
minimum-scale 最小缩放比例
maxinum-scale 最大缩放比例
user-scalable 用户是否可以缩放
minimal-ui ios7以上隐藏浏览器导航栏

二、css样式重置
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
button,article, aside, canvas, details, embed, figure,
figcaption, footer, header, hgroup, menu, nav,
output, ruby, section, summary, time, mark,
audio, video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
background: transparent;
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
button{background: transparent;}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
html{
line-height: initial;
}
body{
font-size: 0.32rem;
}

特别注意下面这段代码必不可少。

html{
line-height: initial;
}
body{
font-size: 0.32rem;
}

是为了解决我们由js动态设置html字体过大时,他的line-height对子孙元素的不良影响,请自行体会。
重要三、引入动态改变根节点字体大小的js文件

(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth >= 750) {
docEl.style.fontSize = '100px';
} else {
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
}; if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

这是rem布局的核心代码,必须放在head头部提前执行,这段代码的大意是:

如果页面的宽度超过了750px,那么页面中html的font-size恒为100px,否则,页面中html的font-size的大小为: 100 * (当前页面宽度 / 750)。
我们刚开始切图时,如果在手机端使用固定宽高px,那么我们的宽高都要减半,以上图的设计稿为例,使用固定px时的代码:

.box{
width: 345px;
height: 168px;
margin: 0 auto;
background: #ffffff;
}

使用rem时的代码:

.box{
width: 6.9rem;
height: 3.36rem;
margin: 0 auto;
background: #ffffff;
}

对应公式,我们的iPhone 6 是375px宽度,所以此时的字体为50px。自己算一算是不是和减半的效果一样。

我们在切图时,自己根据设计稿设置是640px宽度或者750px宽度或者其他的

移动端rem自适应布局(切图)的更多相关文章

  1. 移动端rem自适应布局关键代码

    function resi() { var html = document.querySelector("html"); var wW = document.body.client ...

  2. 【转载】rem自适应布局-移动端自适应必备

    原文链接:rem自适应布局-移动端自适应必备 版权所有,转载时请注明出处,违者必究. 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不 ...

  3. rem自适应布局的回顾总结

    使用rem实现自适应布局,应该算是当前移动前端的一大趋势,有些人对此还有点迷惑,搞不懂rem是如何实现自适应布局,如何根据设计稿来调整rem的值?rem布局如何用雪碧背景图片?rem一定要加载JS吗? ...

  4. 【转】rem自适应布局

    rem自适应原理 rem是根据html的font-size大小来变化,正是基于这个出发,我们可以在每一个设备下根据设备的宽度设置对应的html字号,从而实现了自适应布局.更多介绍请看这篇文章:rem是 ...

  5. rem自适应布局

    rem自适应原理 rem是根据html的font-size大小来变化,正是基于这个出发,我们可以在每一个设备下根据设备的宽度设置对应的html字号,从而实现了自适应布局.更多介绍请看这篇文章:rem是 ...

  6. 移动端rem适应布局

    移动端rem适应布局 rem rem(root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素(html)设置font-s ...

  7. rem自适应布局小结001

    在最近的移动端布局当中,最炙手可热的方式便是使用rem进行元素的布局.以下便是从最近的文章中所总结出来的一点东西. 首先,我们必须有以下的疑问: rem的本质是什么? rem如何实现自适应布局? 如何 ...

  8. 移动端rem适配布局

    dome如下: <!doctype html><html><head> <meta charset="UTF-8" /> <m ...

  9. Html5移动端页面自适应布局详解(阿里rem布局)

    在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后 大概viewport可以理解为三种 1.layout viewport  ...

随机推荐

  1. VMware虚拟CentOS 6.5在NAT模式下配置静态IP地址及Xshell远程控制配置

    VMware虚拟CentOS 6.5在NAT模式下配置静态IP地址及Xshell远程控制配置 标签: LinuxXshellCentOS 2016-10-15 04:58 127人阅读 评论(0) 收 ...

  2. js 1+'2' == '1'+'2'

    前言 非常深入地讲解了包含隐式转换时js计算过程,全篇干货.本文由@keenjaan授权分享. 本文由@仙人掌推荐分享 正文从这里开始 你有没有在面试中遇到特别奇葩的js隐形转换的面试题,第一反应是怎 ...

  3. 解决AF3 诡异的页面显示问题

    使用AF3开发应用,发现有一个bug,在同一个view下面的不同页面切换后,这时候切换到别的view中的页面,然后再切换到上一个view下的页面,此时只要目标不是刚才前一个view中的最后显示页面就会 ...

  4. 【WP8】换肤功能的实现

    主题功能在移动开发中是最常见的功能之一,用的最多的是日间模式和夜间模式的切换,下面说说如何在WP上使用主题,不同主题的差别无非就是两种(颜色和图片),在WP上我们通常使用资源来设置颜色,系统提供了两种 ...

  5. 114自定义UITableViewCell(扩展知识:为UITableViewCell添加动画效果)

    关键操作: 效果如下: ViewController.h #import <UIKit/UIKit.h> @interface ViewController : UITableViewCo ...

  6. node配置自动监测文件改变不重启

    方法一: nodemon npm install -g nodemon nodemon ./bin/www 或者在npm start命令里把node改为nodemon 方法二:supervisor n ...

  7. 8 map的用法

    what's map go里面的map和python字典差不多. 类似其他语言中的哈希表或者字典,以key-value的形式存储的数据 key必须是支持==或者!=比较运算的类型,不可以是函数.map ...

  8. 7 Django系列之关于bootstrap-table插件的简单使用

    preface 我们在前端html页面的时候做表格最常用的就是jinja2渲染,这样的好处是无须引用外部插件,直接使用就行,方便.但是不好的就是前端CSS样式以及其他表格排序筛选功能需要自己写,增加了 ...

  9. C#文件操作工具类

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.I ...

  10. mysql数据库中查看当前使用的数据库是哪个数据库?

    环境描述: mysql版本:5.5.57-log 操作系统版本:Red Hat Enterprise Linux Server release 6.6 (Santiago) 需求说明: 查看当前使用的 ...