PC端的
html,body{-webkit-text-size-adjust: 100%;}
body{
margin:0;
font:12px/1 "微软雅黑","宋体";
}
h1,h2,h3,h4,h5,h6{
margin:0;
/* 与父元素字号一致 */
font-size: 100%;
font-weight: normal;
}
p,dl,dd{
margin:0;
}
ul,ol{
/* 清除列表样式 */
list-style: none;
margin:0;
padding:0;
}
strong,b{
font-weight: normal;
}
em,i{
font-style: normal;
}
a{
color:#666666;
}
a,del{
text-decoration: none;
}
input{
padding:0;
margin:0;
border:none;
background:none;
}
a,input,textarea,select{
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
input,textarea{
-webkit-appearance: none;
border-radius: 0;
}
img{
/* 去除下间隙 */
vertical-align: middle;
/* 清除ie图片超链接 的蓝色边框*/
border-style:none;
}
table{
/* 边框合并 */
border-collapse: collapse;
}
td,th{
padding:0;
}
/* 清浮动 */
.clearfix:after,.layout:after{
content:"";
display: block;
clear: both;
/* 避免产生间隙问题 */
font-size:0;
line-height:0;
overflow: hidden;
height:0;
}
移动端的
html,body{-webkit-text-size-adjust: 100%;}
body{
margin:0;
font:12px/1.12 "微软雅黑";
}
h1,h2,h3,h4,h5,h6{margin:0;
/* 与父元素字号一致 */
font-size: 100%;
font-weight: normal;
}
p,dl,dd{
margin:0;
}
ul,ol{
/* 清除列表样式 */
list-style: none;
margin:0;
padding:0;
}
strong,b{
font-weight: normal;
}
em,i{
font-style: normal;
}
a{
color:#666666;
}
a,del{
text-decoration: none;
}
input{
padding:0;
margin:0;
border:none;
background:none;
}
a,input,textarea,select{
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
input,textarea{
-webkit-appearance: none;
border-radius: 0;
}
img{
/* 去除下间隙 */
vertical-align: middle;
/* 清除ie图片超链接 的蓝色边框*/
border-style:none;
}
table{
/* 边框合并 */
border-collapse: collapse;
}
td,th{
padding:0;
}
/* 清浮动 */
.clearfix:after,.layout:after{
content:"";
display: block;
clear: both;
/* 避免产生间隙问题 */
font-size:0;
line-height:0;
overflow: hidden;
height:0;
}
移动端转换单位px到rem的 remscale.js
我这里默认设计稿的宽度为750px;
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth; //获取设备尺寸
console.log(clientWidth);
if (!clientWidth) return;
if(clientWidth>=750){ //设计稿宽度
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false); //绑定事件
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
编写代码时候如果用的是vscode可以使用插件:px to rem