响应式布局之rem布局和多倍屏适配

rem 布局

1.根模板index.html文件添加

 <script>
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + "px";
    window.addEventListener("resize", () => {
      document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + "px";
    })
  </script>

style目录

reset.css 文件 重置样式
variable.less 定义变量
mixin.less 定义自己常用的样式模板
index.less 初始化样式
之后的所有样式需要先引入index.less

reset.css

@charset "utf-8";

html {
 background-color: #fff;
 color: #000;
 font-size: 12px;
}

body,
ul,
ol,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
figure,
form,
fieldset,
legend,
input,
textarea,
button,
p,
blockquote,
th,
td,
pre,
xmp {
 margin: 0;
 padding: 0;
}

body,
input,
textarea,
button,
select,
pre,
xmp,
tt,
code,
kbd,
samp {
 line-height: 1.5;
 font-family: tahoma, arial, "Hiragino Sans GB", simsun, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
small,
big,
input,
textarea,
button,
select {
 font-size: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
 font-family: tahoma, arial, "Hiragino Sans GB", "微软雅黑", simsun, sans-serif;
}

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

address,
cite,
dfn,
em,
i,
optgroup,
var {
 font-style: normal;
}

table {
 border-collapse: collapse;
 border-spacing: 0;
 text-align: left;
}

caption,
th {
 text-align: inherit;
}

ul,
ol,
menu {
 list-style: none;
}

fieldset,
img {
 border: 0;
}

img,
object,
input,
textarea,
button,
select {
 vertical-align: middle;
}

article,
aside,
footer,
header,
section,
nav,
figure,
figcaption,
hgroup,
details,
menu {
 display: block;
}

audio,
canvas,
video {
 display: inline-block;
 *display: inline;
 *zoom: 1;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
 content: "\0020";
}

textarea {
 overflow: auto;
 resize: vertical;
}

input,
textarea,
button,
select,
a {
 outline: 0 none;
 border: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
 padding: 0;
 border: 0;
}

mark {
 background-color: transparent;
}

a,
ins,
s,
u,
del {
 text-decoration: none;
}

sup,
sub {
 vertical-align: baseline;
}

html {
 overflow-x: hidden;
 height: 100%;
 font-size: 50px;
 -webkit-tap-highlight-color: transparent;
}

body {
 font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;
 color: #333;
 font-size: 0.28em;
 line-height: 1;
 -webkit-text-size-adjust: none;
}

hr {
 height: 0.02rem;
 margin: 0.1rem 0;
 border: medium none;
 border-top: 0.02rem solid #cacaca;
}

a {
 color: #25a4bb;
 text-decoration: none;
}

.clear_fix::after {
 content: '';
 display: block;
 overflow: hidden;
 visibility: hidden;
 clear: both;
}

variable.less

   @baseSize: 37.5px; 
   @mainBaseColor: #ccc;

minxin.less

.border(@px:1px, @style:solid, @color:red) {
  border: @px @style @color;
}
.width(@px) {
  width: unit((@px / @baseSize), rem);
}
.height(@px) {
  height: unit((@px / @baseSize), rem);
}
.min-height(@px) {
  min-height: unit((@px / @baseSize), rem);
}
.line-height(@px) {
  line-height: unit((@px / @baseSize), rem);
}
.top(@px) {
  top: unit((@px / @baseSize), rem);
}
.bottom(@px) {
  bottom: unit((@px / @baseSize), rem);
}
.left(@px) {
  left: unit((@px / @baseSize), rem);
}
.right(@px) {
  right: unit((@px / @baseSize), rem);
}
.padding(@top,@right,@bottom,@left) {
  padding: unit((@top / @baseSize), rem) unit((@right / @baseSize), rem)
    unit((@bottom / @baseSize), rem) unit((@left / @baseSize), rem);
}
.margin(@top,@right,@bottom,@left) {
  margin: unit((@top / @baseSize), rem) unit((@right / @baseSize), rem)
    unit((@bottom / @baseSize), rem) unit((@left / @baseSize), rem);
}
.border-radius(@lt, @tr, @br,@bl) {
  border-radius: unit((@lt / @baseSize), rem) unit((@tr / @baseSize), rem)
    unit((@br / @baseSize), rem) unit((@br / @baseSize), rem);
}
.fontSize(@px) {
  font-size: unit((@px / @baseSize), rem);
}

index.less

@import "./mixin.less";
@import "./variable.less";

scss的配置基本和less差不多

多倍屏适配

	//dpr 当前物理像素
	var dpr,rem,scale;
　　var docEl=docuement.documentElement;
　　var fontEl=document.createElement('style');
　　var metaEl=document.querySelector('meta[name="viewport"]')
　　dpr=window.devicePixelRatio||1;
　　rem=100*(docEl.clientWidth*dpr/750);
　　meta.setAttribute('content','width=+dpr*docEl.clientWidth+',initial-scal='+scale+',maximum-scale='+scale+'user-scalable=no');
　　docEl.setAttribute('data-dpr',dpr);
　　docEl.firstElementChild.appendChild(fontEl);
　　fontEl.innerHTML='html{font-size:'+rem+'px}'