关于h5屏幕适配

1）使用rem进行等比缩放

rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小

比如根元素（html）设置font-size=12px; 非根元素设置width:2rem;则换成px表示就是24px；

如果根元素设置成font-size=1rem;则根元素换成px就是相对于初始字体大小，一般是12px；

原理分析：rem屏幕适配就是一种等比缩放效果

一般来说设计稿是基于p6（750），或者是p5（640）的尺寸，以p6为例子：

设置：<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scale=no">

(function (doc, win) {
  var docEl = doc.documentElement
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
  var recalc = function () {
    var clientWidth = docEl.clientWidth
    if (!clientWidth) {
      return
    }
    if (clientWidth >= 750) {  // 避免无无限放大
      docEl.style.fontSize = '100px'
    } else {
      docEl.style.fontSize = 100*(clientWidth / 750) + 'px' // 设置根元素的font-size
    }
  }
  if (!doc.addEventListener) {
    return
  }
  win.addEventListener(resizeEvt, recalc, false)
  doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)

一般是配合scss 进行使用：

mixin.scss

@function px2rem($val) {
    @return #{$val*2/100}rem;
}

xxx.vue

@import '~/sass/mixin.scss';

.des-word {
  width: px2rem(30)
  height: px2rem(20);
  line-height: px2rem(20);
  text-align: left;
  color: #434c5f;
  letter-spacing: 0;
  word-break: break-all;
}　　　

存在的问题：对于文本段落来说，一般是不建议使用rem进行设置的，字体的大小和字体宽度，并不成线性关系，所以字体大小不能使用rem。

普遍的做法是使用媒体查询，固定几种字体大小【根元素是html ,如果一个元素设置为xrem那么他的大小是根据根元素字体大小进行变化的】

@media screen and (min-width: 320px) {
    body {font-size: 16px}
}
@media screen and (min-width: 481px) and (max-width:640px) {
    body {font-size: 18px}
}
@media screen and (min-width: 641px) {
    body {font-size: 20px}
}　　
div{
　　font-size:1.5em
}

字体大小是可以继承的，这就是意味着，可以使用em ,进行字体大小设置。

em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小

比如父元素font-size:12px;

自身元素如果写成：font-sise:2em;则自身元素用px表示就是24px（相对父元素字体大小）;

但是自身元素设置：width:2rem,那么自身元素用px表示就是48px（相对自身字体大小）；

2）使用vw进行适配布局

相对于视口的宽度。视口被均分为100单位的vw

如果屏幕宽度为200px，那么1vw=2px

 

转载于:https://www.cnblogs.com/evaling/p/9328962.html