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

2023-08-24 20:37:40

一：移动端准备工作
<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'>

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta content="fullscreen=yes,preventMove=no" name="ML-Config">

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<--允许全屏模式浏览,隐藏浏览器导航栏-->
<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.

二：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.

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

码农公寓

相关文章