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

一：移动端准备工作
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”>
<meta http-equiv=”X-UA-Compatible” content=”IE=Edge，chrome=1″>

<!– 设置在苹果手机上以应用模式启动时，是否全屏 –>
<meta name=’apple-touch-fullscreen’ content=’yes’>
<!– ios 系统作用未知 –>
<meta name=”apple-mobile-web-app-capable” content=”yes” />
<!– iso 系统作用未知 –>
<meta content=”fullscreen=yes,preventMove=no” name=”ML-Config”>
<!– iso 系统作用未知 –>
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
<!– 是否识别手机号码、电子邮件地址等–>

<!– 让360双核浏览器用webkit内核渲染页面 –>

<!– 避免IE使用兼容模式 –>

<–允许全屏模式浏览,隐藏浏览器导航栏–>
<meta name=”apple-mobile-web-app-capable” content=”yes” />

<!–微信缓存–>
<meta http-equiv=”Cache-Control” content=”no-cache, no-store, must-revalidate” />
<meta http-equiv=”Pragma” content=”no-cache” />
<meta http-equiv=”Expires” content=”0″ />

1. <!–[if lt IE 9]>
2. <script src=”https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js”></script>
3. <script src=”https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js”></script>
4. <![endif]–>

二：pc端准备工作
1. <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”>

1. <meta http-equiv=”X-UA-Compatible” content=”IE=Edge，chrome=1″>
2. <!– 让360双核浏览器用webkit内核渲染页面 –>

三：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)

个人收藏笔记记录

开通VIP