一、ps进入切片切图，图像宽度保持750px或者640px
二、存储为web格式，选择其它，切片
三、页面加入meta:
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">
四、css进行px到rem的转换
进入：http://www.520ued.com/tools/rem
五、css加入rest:
html, body, div, span, applet, object, iframe,
h
1
, h
2
, h
3
, h
4
, h
5
, h
6
, 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.32
rem;
}
六、
引入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);
七、删除html中img的宽度与高度