@charset "utf-8";
body {font:12px/1 "Microsoft YaHei","SimSun","Chalkduster",helvetica,arial,\5b8b\4f53; background: #fff;min-width:1200px;-webkit-font-smoothing: antialiased;-moz-font-smoothing: antialiased;smoothing: antialiased;}
*{padding:0; margin:0;}
ol li,ul li {list-style:none;}
img{border:none;}
h1,h2,h3,h4,h5,h6{font-size:inherit; font-weight:normal;}
address,em,th,i{font-weight:normal; font-style:normal;}
.clearfix{*zoom:1;}
.clearfix:after{display:block; overflow:hidden; clear:both; height:0; visibility:hidden; content:".";}
input,textarea{outline: 0; outline: none;}
input[type=submit] {
cursor: pointer;
}
.ellipsis1 {overflow: hidden;text-overflow:ellipsis; white-space: nowrap;}
.fl{float: left;}
.fr{float: right;}
select {
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
-ms-appearance:none;
}
select::-ms-expand { display: none;}
/*通用*/
.mt1200 {width:1200px;min-width: 1200px;margin:0 auto;}
.wh-inherit {width:inherit; height:inherit;}
/*mt pt 上外边距*/
.mt0{margin-top:0px;}.mt2{margin-top:2px;}.mt5{margin-top:5px;}.mt10{margin-top:10px;}
.mt15{margin-top:15px;}.mt20{margin-top:20px;}.mt25{margin-top:25px;}.mt30{margin-top:30px;}
.mt35{margin-top:35px;}.mt40{margin-top:40px;}.mt45{margin-top:45px;}.mt50{margin-top:50px;}
.mt55{margin-top:55px;}.mt60{margin-top:60px;}.mt65{margin-top:65px;}.mt70{margin-top:70px;}
.mt75{margin-top:75px;}.mt80{margin-top:80px;}.mt85{margin-top:85px;}.mt90{margin-top:90px;}
.mt100{margin-top:100px;}
.mt-20{margin-top:-20px;}
.pt0{padding-top:0px;}.pt5{padding-top:5px;}.pt10{padding-top:10px;}.pt15{padding-top:15px;}
.pt20{padding-top:20px;}.pt25{padding-top:25px;}.pt30{padding-top:30px;}.pt35{padding-top:35px;}
.pt40{padding-top:40px;}.pt45{padding-top:45px;}.pt50{padding-top:50px;}.pt55{padding-top:55px;}
.pt60{padding-top:60px;}.pt65{padding-top:65px;}.pt70{padding-top:70px;}.pt75{padding-top:75px;}
.pt85{padding-top:85px;}.pb20 {padding-bottom:20px;}.pr5 {padding-right: 5px;}
/*ml 左外边距*/
.ml0{margin-left:0px !important;}.ml5{margin-left:5px;}.ml10{margin-left:10px;}
.ml15{margin-left:15px;}.ml20{margin-left:20px;}.ml25{margin-left:25px;}
.ml30{margin-left:30px;}.ml35{margin-left:35px;}.ml40{margin-left:40px;}
.ml45{margin-left:45px;}.ml50{margin-left:50px;}.ml55{margin-left:55px;}
.ml60{margin-left:60px;}.ml65{margin-left:65px;}.ml70{margin-left:70px;}
.ml75{margin-left:75px;}.ml100{margin-left:100px;}.ml110{margin-left:110px;}
.p15 {padding:15px;}.p5 {padding:5px;}.m15 {margin:15px;}.m20 {margin:20px;}.m5 {margin:5px;}
.pl0{padding-left:0px;}.pl5{padding-left:5px;}.pl10{padding-left:10px;}
.pl15{padding-left:15px;}.pl20{padding-left:20px;}.pl25{padding-left:25px;}
.pl30{padding-left:30px;}.pl35{padding-left:35px;}.pl40{padding-left:40px;}
.pl45{padding-left:45px;}.pl50{padding-left:50px;}.pl55{padding-left:55px;}
.pl60{padding-left:60px;}.pl65{padding-left:65px;}.pl70{padding-left:70px;}
.pl75{padding-left:75px;}
/*font-size*/
.ft12{font-size: 12px;}
.ft14{font-size:14px;}
.ft18{font-size: 18px;}
.ft20{font-size: 20px;}
/*元素位置属性*/
.d-block{display:block;}
.d-none{display:none;}
.d-inline{display:inline;}
.f-weight{ font-weight:bold;}
.v-middle{vertical-align: middle;}
.v-top{vertical-align: top;}
.relative{position: relative;}
.absolute{position: absolute;}
/*文本*/
.t-left{text-align:left;}.t-center{text-align:center;}.t-right{text-align:right;}
<!--less-->
// 通用公式 pc版
.px(@name, @px) {
@{name}: @px * 1px}
// 元素外围
.w(@width){.px(width,@width);}
.h(@height){.px(height,@height);}
.w-h(@width,@height) {
.px(width,@width);
.px(height,@height);
}
.b-radius(@b-radius){
.px(border-radius,@b-radius);
.px(-webkit-border-radius,@b-radius);
.px(-moz-border-radius,@b-radius);
.px(-ms-border-radius,@b-radius);
}
// 补白
.padding(@top,@right,@bottom,@left){
.px(padding-top,@top);
.px(padding-right,@right);
.px(padding-bottom,@bottom);
.px(padding-left,@left);
}
.pl(@pl){.px(padding-left,@pl);}
.pr(@pr){.px(padding-right,@pr);}
.pt(@pt){.px(padding-top,@pt);}
.pb(@pb){.px(padding-bottom,@pb);}
// 外边距
.margin(@top,@right,@bottom,@left){
.px(margin-top,@top);
.px(margin-right,@right);
.px(margin-bottom,@bottom);
.px(margin-left,@left);
}
.ml(@ml){.px(margin-left,@ml);}
.mr(@mr){.px(margin-right,@mr);}
.mt(@mt){.px(margin-top,@mt); }
.mb(@mb){.px(margin-bottom,@mb);}
/*文本*/
.fz(@fz){.px(font-size,@fz);}
.text(@fz,@color){.px(font-size,@fz); color: @color;}
.t-left{text-align:left;}.t-center{text-align:center;}.t-right{text-align:right;}
.d-block{display:block;}
.d-none{display:none;}
.d-inline{display:inline;}
.d-in-block {display:inline-block;}
.f-weight{ font-weight:bold;}
.v-middle{vertical-align: middle;}
.v-top{vertical-align: top;}
.l-height(@l-height){.px(line-height,@l-height);}
// 定位
.relative{position: relative;}
.absolute{position: absolute;}
.fixed{position:fixed;}
/*弹性盒*/
.flex{display:flex; display:-webkit-flex;display:-moz-flex;display:-ms-flex;}
.flex-inline{display: inline-flex; display:-webkit-inline-flex;display:-moz-inline-flex;display:-ms-inline-flex;}
.flex-between {justify-content:space-between;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;}
.flex-around {justify-content:space-around;-webkit-justify-content:space-around;-moz-justify-content:space-around;-ms-justify-content:space-around;}
.flex-start{justify-content:flex-start;-webkit-justify-content:flex-start;-moz-justify-content:flex-start;-ms-justify-content:flex-start;}
.flex-end{justify-content:flex-end;-webkit-justify-content:flex-end;-moz-justify-content:flex-end;-ms-justify-content:flex-end;}
.item-center{align-items:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;}
.item-end{align-items:flex-end;-webkit-align-items:flex-end;-moz-align-items:flex-end;-ms-align-items:flex-end;}
.flex-center {justify-content:center;-webkit-justify-content:center;-moz-justify-content:center;-ms-justify-content:center;}
.flex-wrap{flex-wrap: wrap;-webkit-flex-wrap: wrap;-moz-flex-wrap: wrap;-ms-flex-wrap: wrap;}
.flex1 {flex:1;-webkit-flex: 1;-moz-flex:1;-ms-flex:1;}
.flexbetween { .flex; .flex-between;}
/* 通用变量 */
@solid:solid; @dashed:dashed;@url:'./img';
.ellipsis1 {overflow: hidden;text-overflow:ellipsis; white-space: nowrap;.d-in-block;}
.trans4 { transition: all .4s;-webkit-transition: all .4s;-moz-transition: all .4s;-ms-transition: all .4s; }
.scale05{transform:scale(1.05,1.05);-webkit-transform:scale(1.05,1.05);-moz-transform:scale(1.05,1.05);-ms-transform:scale(1.05,1.05);}
.translate4{transform: translate(0,-4px);-webkit-transform: translate(0,-4px);-ms-transform: translate(0,-4px);-moz-transform: translate(0,-4px);}
@s:solid; @d:dashed;@imgUrl:'./img';
.w100{width:100%;}
.mt1100 { width: 1100px; margin: 0 auto;}
body {line-height: 1;}
.mt1200{width: 1200px; margin:0 auto;}
移动端适配方案
1.vw+rem(前提设计稿是750px的) 原理分析： 在很早以前,vw 这个单位就已经被列入w3c规范了,如果基本都支持了,vw 表示屏幕的1%,可能有人会问到那跟百分比有什么区别呢? 通常,很多情况确实可以被百分比替代,但是要知道百分比如果要子n代元素都生效,那得所有父级元素都得相对html,body 100%宽才能有作用,而vw则永远相对 屏幕1% 1vw=1%设计稿通常是750px的,屏幕一共是100vw,对应750px,那么1px就是0.1333333vw(1%(1vw) /100 /750),
为了方便计算,我们放大100倍,同时我们知道另一个单位rem,rem是相对html元素,为了方便计算,我们取html是100px,通过上面的计算结果1px是0.13333333vw,那么100px就是13.333333vw了.这样后面的用rem就很好计算了,
由于倍率是100,我们也不需要啥计算插件之类的了,除以100,直接小数点向左移动2位,1rem是100px,那么10px就是0.1rem,1px就是0.01rem
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
html {
font-size: 13.33333333vw;
text-align: center;
line-height: 1; font-size: 12px;
}
@media (min-width: 560px) { 适配pc端
html {
font-size: 54px;
}
}
2.js 判断 clientWith
body {
position: relative;
width: 100%;
max-width: 750px;
min-width: 320px;
margin: 0 auto;
}
// 如果页面的宽度超过了640px，那么页面中html的font-size恒为100px，否则，页面中html的font-size的大小为： 100 * (当前页面宽度 /750)
// 为什么是750px？
// 设计图一般是640px的，这样相当于100px = 1rem，可以方便计算；
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.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);
- 利用 css预处理公式
.px2rem(@name, @px){
@{name}: (@px / 75rem)
}
.pl(@pl){.px2rem(padding-left,@pl);}
.pr(@pr){.px2rem(padding-right,@pr);}
.pt(@pt){.px2rem(padding-top,@pt); }
.pb(@pb){.px2rem(padding-bottom,@pb);}
使用：
.pl(30) 编译后就是 30/75 = 0.4rem
html {
font-size: clamp(12px, calc(100vw / 750), 50px);
}
