css响应式布局的整理(笔记)

rem 基础（rem是一个单位）

rem可以提供的价值：

1.页面布局的文字可以随着页面大小的变化而变化

2.流式布局和flex布局 ，主要是针对宽度布局，那么高度可以使用rem设置

3.当屏幕发生变化的时候，元素的高度和宽度等比例变化

说到rem 我们就不得不先提下em

em是代表父元素的字体大小【下图为例】

rem是代表html根元素的字体大小【下图为例】

为什么rem相对来说更有意义？

因为整个的页面中只有一个html元素，我们可以通过缩小html的字体大小来等比例缩小我们的页面

媒体查询 @media (css3语法)

1.媒体查询可以根据不同的屏幕尺寸，设置不同的样式

@media mediatype and|not|only (media feature){
  css-code;
}
 
/*使用@media 声明新媒体查询 */ 

/*mediatype 媒体类型 */  

/*关键字 and|not|only*/

/*(media feature) 媒体特性必须由小括号包含*/

 

屏幕宽度<=800px 的时候body背景色为红色

@media screen and (max-width:800px) {
   body{
    background:red;
  }
}

/*这句话的意思就是：在我们屏幕上 最大的宽度是800px 也就是设置<=800px 宽度时候的样式*/

 屏幕宽度>=800px <=1000px的时候背景色为绿色

@media screen and (min-width:800px) and (max-width:1000px){
   body{
      background:green;
   }
}

在我们使用新媒体查询和rem来编辑响应式的时候，我们可以在设置规定下。宽度为320px的时候显示什么样式，宽度为640px的时候显示什么样式。     

这边是使用的两个css文件进行操作的，但是我个人偏向于喜js判断屏幕的宽度 然后再使用vue的v-if进行实时的判断

 js用来判断屏幕宽度的代码

mounted () {
    const that = this;
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.documentElement.clientWidth; //实时宽度
        window.screenHeight = document.documentElement.clientHeight; //实时高度
        console.log(this.screenWidth, this.screenHeight);
        that.screenWidth = window.screenWidth;
        that.screenHeight = window.screenHeight;
      })();
    };
  },

---------------------------------------------------------------------------------------------------------------------------------

以上是对rem和媒体查询的了解

下面我们来说下2022年市场上主流的屏幕适配方案

技术方案1：

less / 媒体查询 / rem 

技术方案2：

flexible.js / rem 

（总结：1.两个方案现在都存在  2.方案2更加的简单，现阶段大家无需了解里面的js代码）

------------------------------------------------------------------------------------------------------------------------------

先来看下技术方案1

less / 媒体查询 / rem 

 

1.屏幕尺寸在750px以下的将屏幕划分为15等份  (全局设置下在不同的设备下，显示的html的font-size的大小)

（注意：>=750px的时候，我们font-size的尺寸都是50px，<50px我们使用新媒体查询设置。但是要记得将html默认的50px的尺寸放在代码最顶端）

这里在less中  加上一个less变量@no设置为15  即可  然后混入到新媒体查询中 

使用屏幕的尺寸/15得到每个屏幕宽度下不同的font-size

 2.设置下屏幕最小宽度和最大宽度

width=750px  所以width  750/50  =15rem

3.这里有一个特殊的写法

这个是设置下@baseFont=50  底下的计算都可以直接调用@baseFont  很有意思

 

------------------------------------------------------------------------------------------------------------------------------

先来看下技术方案2

flexible.js / rem 

github地址下载: https://github.com/amfe/lib-flexible

flexible.js是一款：

手机淘宝团队出的简洁高效移动端适配库
我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理x
它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。我们要做的，就是确定好我们当前设备的html文字大小就可以了
比如当前设计稿是750px，那么我们只需要把 html文字大小设置为75px(750px/10)就可以里面页面元素rem值:页面元素的px值/75
剩余的，让flexible.js来去算