移动端开发之rem布局

移动端开发之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();

第四部分：常用的设置，比如字体，清楚浮动，等等

@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; }

好了，这次的分享到这里就结束了！