移动端开发之rem布局
今天，博主带来的分享是移动端开发之rem布局！先来贴下效果把！移动端设备为iphone6
代码如下：
主要有四部分，HTML部分，CSS部分，浏览器以及设备兼容部分，常用设置部分！
第一部分：HTML部分：
<!DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
link
rel=
"stylesheet"
href=
"style/reset.css"
type=
"text/css"
>
<
link
rel=
"stylesheet"
href=
"style/common.css"
type=
"text/css"
>
<
script
src=
"mobile-util.js"
>
<
/
script
>
</
head
>
<
body
>
<
header
></
header
>
<
div
class=
"banner"
>
<
ul
class=
"list"
>
<
li
><
img
src=
"img/1.jpg"
alt=
""
></
li
>
<
li
><
img
src=
"img/2.jpg"
alt=
""
></
li
>
<
li
><
img
src=
"img/3.jpg"
alt=
""
></
li
>
<
li
><
img
src=
"img/4.jpg"
alt=
""
></
li
>
<
li
><
img
src=
"img/5.jpg"
alt=
""
></
li
>
</
ul
>
<
ol
class=
"num"
>
<
li
class=
"current"
></
li
>
<
li
></
li
>
<
li
></
li
>
<
li
></
li
>
<
li
></
li
>
</
ol
>
</
div
>
<
main
>
<
nav
class=
"gBox"
>
<
ul
class=
"clearfix"
>
<
li
><
a
href=
"#"
><
i
></
i
>文字那
</
a
></
li
>
<
li
><
a
href=
"#"
><
i
></
i
>文字那
</
a
></
li
>
<
li
><
a
href=
"#"
><
i
></
i
>文字那
</
a
></
li
>
<
li
><
a
href=
"#"
><
i
></
i
>文字那
</
a
></
li
>
<
li
><
a
href=
"#"
><
i
></
i
>文字那
</
a
></
li
>
<
li
><
a
href=
"#"
><
i
></
i
>文字那
</
a
></
li
>
<
li
><
a
href=
"#"
><
i
></
i
>文字那
</
a
></
li
>
<
li
><
a
href=
"#"
><
i
></
i
>文字那
</
a
></
li
>
</
ul
>
</
nav
>
<
div
class=
"gBox item"
>
<
div
class=
"item_tit"
><
h5
>全网最低价
</
h5
></
div
>
<
div
class=
"yao"
>
<
a
href=
""
class=
"big l t"
><
img
src=
"img/a1.jpg"
class=
"autoImg"
></
a
>
<
a
href=
""
class=
"small t r"
><
img
src=
"img/a2.jpg"
class=
"autoImg"
></
a
>
<
a
href=
""
class=
"sm2 b r"
><
img
src=
"img/a3.jpg"
class=
"autoImg "
></
a
>
</
div
>
</
div
>
<
br
><
br
><
br
>
<
br
>
<
br
>
<
br
>
<
br
>
<
br
>
<
br
>
<
br
>
<
br
>
<
br
>
<
br
>
<
br
>
<
br
>
<
br
>
<
br
>
<
br
>
<
br
>
<
br
>
<
br
>
<
br
>
</
main
>
</
body
>
</
html
>
第二部分：CSS部分：
@charset
"utf-8";
header{
height:
1.5rem;
position:
fixed;
z-index:
2;
left:
0;
top:
0;
width:
100%;
background-image:
linear-gradient(to
bottom,
rgba(
0,
0,
0,
.5),
rgba(
0,
0,
0,
.2));
}
.banner{
position:
relative;
overflow:
hidden;
z-index:
1;
}
.list{
width:
500%;
}
.list li{
float:
left;
}
.list img{
width:
16rem;
}
.num{
position:
absolute;
right:
.3rem;
bottom:
.3rem;
}
.num li{
float:
left;
width:
8px;
height:
8px;
border-radius:
50%;
border:
solid
2px
#f00;
/*box-sizing: border-box;*/
margin-left:
5px;
}
.num .current{
background-color:
#f00;
}
main{
padding:
.5rem
.25rem;
}
.gBox{
background-color:
#fff;
border:
solid
1px
#ccc;
box-shadow:
0
1px
3px
rgba(
0,
0,
0,
.5);
font-size:
.5rem;
}
nav{
text-align:
center;
padding-bottom:
.5rem;
}
nav li{
width:
25%;
float:
left;
}
nav i{
display:
block;
height:
2.5rem;
width:
2.5rem;
background-image:
url(
../img/n1.jpg);
background-position:
0
0;
background-repeat:
no-repeat;
background-size:
cover;
margin:
.5rem
auto
.25rem;
}
nav a{
display:
inline-block;
}
item_tit{
padding:
0.35rem;
}
.item_tit h5{
height:
0.65rem;
font-size:
0.65rem;
padding:
0.5rem;
border-left:
solid
4px
#0088cc;
line-height:
1;
font-weight:
normal;
background-color:
aqua;
}
.yao{
height:
8.575rem;
position:
relative;
background-color:
#ccc;
}
.big{
position:
absolute;
width:
7.65rem;
}
.autoImg{
width:
100%;}
.small{
position:
absolute;
width:
7.8rem;
}
.l{
left:
0;
}
.t{
top:
0;
}
.r{
right:
0;
}
.b{
bottom:
0;
}
.sm2{
position:
absolute;
height:
4.35rem;
width:
7.8rem;
}
第三部分：设备兼容部分，使用的是JS：
window.
mobileUtil = (
function(
win,
doc) {
var
UA =
navigator.
userAgent,
isAndroid =
/android
|
adr/
gi.
test(
UA),
isIos =
/iphone
|
ipod
|
ipad/
gi.
test(
UA) && !
isAndroid,
// 据说某些国产机的UA会同时包含 android iphone 字符
isMobile =
isAndroid ||
isIos;
// 粗略的判断
return {
isAndroid:
isAndroid,
isIos:
isIos,
isMobile:
isMobile,
isNewsApp:
/NewsApp
\/
[
\d
\.
]
+
/
gi.
test(
UA),
isWeixin:
/MicroMessenger/
gi.
test(
UA),
isQQ:
/QQ
\/
\d/
gi.
test(
UA),
isYixin:
/YiXin/
gi.
test(
UA),
isWeibo:
/Weibo/
gi.
test(
UA),
isTXWeibo:
/T
(?:
X
|
encent
)
MicroBlog/
gi.
test(
UA),
tapEvent:
isMobile ?
'tap' :
'click',
/**
* 缩放页面
*/
fixScreen
:
function() {
var
metaEl =
doc.
querySelector(
'meta[name="viewport"]'),
metaCtt =
metaEl ?
metaEl.
content :
'',
matchScale =
metaCtt.
match(
/initial
\-
scale=
([
\d
\.
]
+
)
/),
matchWidth =
metaCtt.
match(
/width=
([^
,\s
]
+
)
/);
if ( !
metaEl ) {
// REM
var
docEl =
doc.
documentElement,
maxwidth =
docEl.
dataset.
mw ||
750,
// 每 dpr 最大页面宽度
dpr =
isIos ?
Math.
min(
win.
devicePixelRatio,
3) :
1,
scale =
1 /
dpr,
tid;
docEl.
removeAttribute(
'data-mw');
docEl.
dataset.
dpr =
dpr;
metaEl =
doc.
createElement(
'meta');
metaEl.
name =
'viewport';
metaEl.
content =
fillScale(
scale);
docEl.
firstElementChild.
appendChild(
metaEl);
var
refreshRem =
function() {
var
width =
docEl.
getBoundingClientRect().
width;
if (
width /
dpr >
maxwidth) {
width =
maxwidth *
dpr;
}
var
rem =
width /
16;
docEl.
style.
fontSize =
rem +
'px';
};
win.
addEventListener(
'resize',
function() {
clearTimeout(
tid);
tid =
setTimeout(
refreshRem,
300);
},
false);
win.
addEventListener(
'pageshow',
function(
e) {
if (
e.
persisted) {
clearTimeout(
tid);
tid =
setTimeout(
refreshRem,
300);
}
},
false);
refreshRem();
}
else
if (
isMobile && !
matchScale && (
matchWidth &&
matchWidth[
1] !=
'device-width' ) ) {
// 定宽
var
width =
parseInt(
matchWidth[
1]),
iw =
win.
innerWidth ||
width,
ow =
win.
outerWidth ||
iw,
sw =
win.
screen.
width ||
iw,
saw =
win.
screen.
availWidth ||
iw,
ih =
win.
innerHeight ||
width,
oh =
win.
outerHeight ||
ih,
ish =
win.
screen.
height ||
ih,
sah =
win.
screen.
availHeight ||
ih,
w =
Math.
min(
iw,
ow,
sw,
saw,
ih,
oh,
ish,
sah),
scale =
w /
width;
if (
scale <
1 ) {
metaEl.
content =
metaCtt +
',' +
fillScale(
scale);
}
}
function
fillScale(
scale) {
return
'initial-scale=' +
scale +
',maximum-scale=' +
scale +
',minimum-scale=' +
scale +
',user-scalable=no';
}
},
/**
* 转href参数成键值对
*
@param
href
{string} 指定的href，默认为当前页href
*
@returns
{object}
键值对
*/
getSearch
:
function(
href) {
href =
href ||
win.
location.
search;
var
data = {},
reg =
new
RegExp(
"([^?=&]+)(=([^&]*))?",
"g" );
href &&
href.
replace(
reg,
function(
$0,
$1,
$2,
$3 ){
data[
$1 ] =
$3;
});
return
data;
}
};
})(
window,
document);
// 默认直接适配页面
mobileUtil.
fixScreen();
扫描二维码关注公众号，回复：
1828995 查看本文章
@charset
"UTF-8";
html {
font-family:
sans-serif;
-ms-text-size-adjust:
100%;
-webkit-text-size-adjust:
100%;
overflow-y:
scroll;
-webkit-overflow-scrolling:
touch; }
body {
margin:
0;
font-size:
14px;
line-height:
1.5;
color:
#333;
background-color:
#fff; }
a {
background:
transparent;
text-decoration:
none;
color:
#08c; }
a:active,a:hover {
outline:
0; }
a:hover {
color:
#006699; }
img {
border:
none;
vertical-align:
middle;
-ms-interpolation-mode: bicubic; }
button,input,optgroup,select,textarea {
color:
inherit;
font:
inherit;
margin:
0; }
button,select {
text-transform:
none; }
button,html input[
type=
"button"
],input[
type=
"reset"
],input[
type=
"submit"
] {
-webkit-appearance: button;
cursor:
pointer; *
overflow:
visible; }
button[
disabled
],html input[
disabled
] {
cursor:
default; }
button::-moz-focus-inner,input::-moz-focus-inner {
border:
0;
padding:
0; }
input {
line-height:
normal; }
input[
type=
"checkbox"
],
input[
type=
"radio"
] {
box-sizing:
border-box;
padding:
0; *
height:
13px; *
width:
13px; }
input[
type=
"number"
]::-webkit-inner-spin-button,
input[
type=
"number"
]::-webkit-outer-spin-button {
height:
auto; }
input[
type=
"search"
] {
-webkit-appearance: textfield;
box-sizing:
content-box; }
input[
type=
"search"
]::-webkit-search-cancel-button,
input[
type=
"search"
]::-webkit-search-decoration {
-webkit-appearance:
none; }
input {
margin:
0;
padding:
0;
border:
none;
background-color:
transparent;
outline:
none; }
textarea {
overflow:
auto;
resize:
vertical;
resize:
none; }
table {
border-collapse:
collapse;
border-spacing:
0; }
td,th {
padding:
0; }
html,button,input,select,textarea {
font-family:
"Microsoft Yahei",
"微软雅黑",
"SimSun",
"宋体",
"Verdana",
"Arial"; }
h1,h2,h3,h4,h5,h6,p,figure,form,blockquote {
margin:
0; }
ul,ol,dl,dd {
margin:
0;
padding:
0; }
ul,ol {
list-style:
none
outside
none; }
h1,h2,h3 {
line-height:
2;
font-weight:
normal; }
h1 {
font-size:
21px; }
h2 {
font-size:
18px; }
h3 {
font-size:
16px; }
h4 {
font-size:
14px; }
h5,h6 {
font-size:
12px;
text-transform:
uppercase; }
input:-moz-placeholder,textarea:-moz-placeholder {
color:
#ccc; }
input::-moz-placeholder,textarea::-moz-placeholder {
color:
#ccc; }
input:-ms-input-placeholder,textarea:-ms-input-placeholder {
color:
#ccc; }
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {
color:
#ccc; }
a { blr: expression(this.onFocus=this.
blur())}
a {
outline:
none; }
em,i {
font-style:
normal; }
.clearfix:before,.clearfix:after {
content:
"";
display:
table; }
.clearfix:after {
clear:
both; }
.clearfix { *
zoom:
1; }
.fl {
float:
left; }
.fr {
float:
right; }