前端css样式自适应的一些场景设置

字体大小自适应

• 在app.vue的生命周期函数中添加一段代码来设置页面的rem

    // 页面加载时
    onMounted(() => {
      // 页面开始加载时修改font-size
      var html = document.getElementsByTagName("html")[0];
      var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
      // 这里的750是指设计图的大小,自己根据实际情况改变
      html.style.fontSize = oWidth / 1920 * 100 + "px";
      console.log('rem:', html.style.fontSize);
    });

• 在style中使用媒体查询来进行阶段性的字体大小设置，可随自己实际情况修改

    /* 手机屏幕的字体大小 */
    @media screen and (max-width: 768px) {
      #app {
      font-size: 0.05rem;
      }
    }
    /* 笔记本电脑的字体大小 */
    @media screen and (min-width: 768px) and (max-width: 1024px) {
      #app {
        font-size: 0.15rem;
      }
    }
    /* 台式电脑显示器屏幕字体大小 */
    @media screen and (min-width: 1024px) {
      #app {
        font-size: 0.15rem;
      }
    }

• 然后页面的默认字体大小设置好了,之后局部样式的字体大小就自行调整
• 要注意的是,字体大小的设置以后都要用rem,这样是为了以后动态的修改全局字体样式方便

/*
设置vue文字字体大小
calc：是一个css自带的计算方法，可以自动计算后返回px单位的值
100vw：vw是屏幕的宽度。也就是百分百屏幕宽度。
*100：这里乘的100代表100px。
1920：设计稿的宽度
*/
font-size:calc(100vw * 24 / 1920); 

手机端输入框唤起键盘时将底部顶起

index.html

 <meta name="viewport" id="viewportMeta"  content="width=device-width, initial-scale=1.0">
 
 var initViewport = function(height){
    var metaEl = document.querySelector("#viewportMeta");
    var content = "width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0,height=" + height;
    metaEl.setAttribute('name', 'viewport');
    metaEl.setAttribute('content', content);
  }
  initViewport(window.innerHeight);

div高度设置

calc()函数

• 利用可视屏幕高度动态设置宽度或者高度
  calc() 函数用于动态计算长度值，需要注意的是：
  运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

设置背景自适应div高度

有时候，我们希望容器有一个固定高度，但当其中的内容多的时候，又希望高度能够自适应，也即容器在纵向能被撑开，且如果有背景，也能够自适应。在一般情况下，使用min-height即可解决。但是广大网民的首选浏览器ie6并不支持min-height。ie7，opera，火狐，谷歌没有问题。所以采用以下写法可以解决兼容性：

height: auto!important;
height: 200px;
min-height: 200px;