html5移动端pc端pc端,移动端和pc端公用样式及rem布局

一：移动端准备工作

1.

二：pc端准备工作

1.

1.

2.

1.

三：base.css公共样式 pc端

body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0;padding:0；border: 0;}

ol,li,ul,dl,dt,dd{list-style:none;}

table{border-collapse:collapse;border-spacing:0}

h1,h2,h3,h4,h5,h6,i,strong {font-weight: normal;}

img {vertical-align: middle;border: none;width: 100%;}

i {font: inherit;}

a {color: #fff;text-decoration: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color:transparent;}

a:hover {text-decoration: underline; outline: none;}

select::-ms-expand { display: none; }

a:active,a:hover{outline:0}

.clearfix::before,

.clearfix::after{

content: '';

display: block;

height: 0;

line-height: 0;

visibility: hidden;

clear: both;

}

.fl{ float:left;}

.fr{float:right;}

input,select,option{vertical-align:middle;border-radius:0px;-moz-appearance:none;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);outline: none;}

input[type="text"],input[type="button"],input[type="submit"],input[type="reset"]{-webkit-appearance: none;appearance: none;border-radius: 0;outline: none;}

.overflow {overflow:hidden; }

四：base.css公共样式 移动端

body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0;padding:0}

ol,li,ul,dl,dt,dd{list-style:none;}

.fl {float: left;}

.fr {float: right;}

table{border-collapse:collapse;border-spacing:0}

html {

-webkit-text-size-adjust: 100%;

-ms-text-size-adjust: 100%;

/* 解决IOS默认滑动很卡的情况 */

-webkit-overflow-scrolling : touch;

}

/* 禁止缩放表单 */

input[type="submit"], input[type="reset"], input[type="button"], input {

resize: none;

border: none;

}

/* 取消链接高亮 */

body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

/* 设置HTML5元素为块 */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

display: block;

}

/* 图片自适应 */

img {

width: 100%;

height: auto;

width: auto\9; /* ie8 */

-ms-interpolation-mode: bicubic;/*为了照顾ie图片缩放失真*/

}

em, i {

font-style: normal;

}

textarea {

resize:none; /*禁用了文本的拖拉，尤其在谷歌下*/

}

p {

word-wrap:break-word; /* 不够的单词自动换行 而不会被截掉 */

}

.clearfix:after {

content: "";

display: block;

visibility: hidden;

height: 0;

clear: both;

}

.clearfix {

zoom: 1;

}

a {

text-decoration: none;

color: #fff;

font-family: 'Microsoft YaHei', Tahoma, Arial, sans-serif;

}

a:hover {

text-decoration: none; outline: none;

}

h1, h2, h3, h4, h5, h6 {

font-size: 100%;

font-family: 'Microsoft YaHei';

}

img {

border: none;

}

input{

font-family: 'Microsoft YaHei';

}

/*单行溢出*/

.one-txt-cut{

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

}

/*多行溢出 手机端使用*/

.txt-cut{

overflow : hidden;

text-overflow: ellipsis;

display: -webkit-box;

/* -webkit-line-clamp: 2; */

-webkit-box-orient: vertical;

}

/* 移动端点击a链接出现蓝色背景问题解决 */

a:link,a:active,a:visited,a:hover {

background: none;

-webkit-tap-highlight-color: rgba(0,0,0,0);

-webkit-tap-highlight-color: transparent;

}

.overflow {overflow:hidden; }

.w50{

width: 50%;

}

.w25{

width: 25%;

}

.w20{

width: 20%;

}

.w33{

width: 33.333333%;

}

五：移动端 布局使用方法rem

第一种：js控制html字体大小， js代码放在head里面

html设置初始font-size：640px的字体大小

var html = document.getElementsByTagName('html')[0];

if(html){

var w = window.innerWidth;

var fontSize = (w > 640 ? 640 : w) / 640 * 30; //这里最少30，

html.style.fontSize = fontSize + 'px';

}

window.onload = function(){

window.onresize = function(){

var w = window.innerWidth;

console.log(w);

var fontSize = (w>640?640:w)/640 * 30; // 这里最少30，

html.style.fontSize = fontSize + 'px';

}

}

第二种：js控制html字体大小常用 ，js代码放在head里面

html设置初始font-size：320px的字体大小

(function(doc, win) {

var docEl = doc.documentElement;

var resizeEvt = 'orientationchange' in window ? 'orientationchange': 'resize';

var recalc = function() {

var clientWidth = docEl.clientWidth;

if (!clientWidth)

return;

docEl.style.fontSize = (clientWidth>640?640:clientWidth)/ 320 *20 + 'px';

};

// 不同浏览器resize事件处理机制不同

// 使用定时器延迟处理resize回调函数以降低重复响应

var recalcTimer = null;

var delaycalc = function() {

win.clearTimeout(recalcTimer);

recalcTimer = win.setTimeout(recalc, 100);

};

// 移动端不需要考虑事件注册函数的兼容性

if (!doc.addEventListener)

return;

win.addEventListener(resizeEvt, delaycalc, false);

// DOMContentLoaded事件只在DOM文档树加载完毕触发，此处不用延迟处理

doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);

六：PC端 布局使用方法rem

(function (doc, win) {

var docEl = doc.documentElement,

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

recalc = function () {

var clientWidth = docEl.clientWidth;

if (!clientWidth) return;

if(clientWidth>=640){

docEl.style.fontSize = '100px';

}else{

docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';

}

};

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt, recalc, false);

doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);