本文共 5775 字，大约阅读时间需要 19 分钟。

方法一vw

em:是相对单位

它需要一个参考属性。就是当前元素的字体大小。

rem：相对单位 root em。 参考值为：HTML根标签的font-size的值。

rem布局的原理：

动态修改html根标签中的font-size值。

实现方式：

1.通过js

2.通过vw。

百分比布局缺点：

1.计算百分数不方便。 2.多层嵌套时使用不方便。

vw/vh 相对屏幕

vw：1vw = 屏幕宽度的百分之一。

vh: 1vh = 屏幕高度的百分之一。

区别：

百分比参照的是父盒子 vw/vh 参照的是屏幕。

下载插件,需要改变的px值,alt+z 就能转换为rem

方法二媒体查询实现

进行适配就是根据不同屏幕大小设定不同的font-size值

屏幕宽                     字体大小                假设： 750px  ====> 根元素的字体大小为： 100px      1rem = 750 / 100 px                开发： 375px =====》 推算在375px的屏幕上根元素的字体大小： 50px                开发： 414px =====>  html Fontsize = （414 * 100 / 750） px                                                  也就是414/7.5 =55.2px

html.style.fontSize = wd * 100 / 750 + ‘px’;

这是一个封装好的方法,可以直接用

(function () {
       function resizeEvent() {
           // 获取根元素html        let html = document.documentElement;        //  获取宽度        let wd = html.clientWidth;        // let wd = html.getBoundingClientRect().width        //  进行判断         if (wd > 750) {
               wd = 750        }        //  根据不同的屏幕，设置根元素的字体大小        // html.style.fontSize = wd * 100 / 750 + 'px';        html.style.fontSize = wd / 7.5 + 'px';    }    resizeEvent();    //  性能考虑    let time = null;    //  监听事件     window.addEventListener('resize', function () {
           time && clearTimeout(time)        time = setTimeout(resizeEvent, 300)    })})()//括号是自执行函数的意思

方法三js实现(用的少)

也是动态修改html中font-size的值来实现

把视觉稿分成100份来看待（为了以后兼容vh，vw单位）。每一份被称为一个单位a。同时，1rem单位认定为10a。 拿750的视觉稿举例：

1a = 7.5px        1rem = 75px        因此，对于视觉稿上的元素的尺寸换算，只需要原始px值除以rem基准px值即可。        例如240px * 120px的元素，最后转换为240/75     120/75                                  是  3.2rem * 1.6rem。

这是需要引入的js文件

(function flexible (window, document) {
       var docEl = document.documentElement    var dpr = window.devicePixelRatio || 1      // adjust body font size    function setBodyFontSize () {
         if (document.body) {
           document.body.style.fontSize = (12 * dpr) + 'px'      }      else {
           document.addEventListener('DOMContentLoaded', setBodyFontSize)      }    }    setBodyFontSize();      // set 1rem = viewWidth / 10    function setRemUnit () {
         var rem = docEl.clientWidth / 10      docEl.style.fontSize = rem + 'px'    }      setRemUnit()      // reset rem unit on page resize    window.addEventListener('resize', setRemUnit)    window.addEventListener('pageshow', function (e) {
         if (e.persisted) {
           setRemUnit()      }    })      // detect 0.5px supports    if (dpr >= 2) {
         var fakeBody = document.createElement('body')      var testElement = document.createElement('div')      testElement.style.border = '.5px solid transparent'      fakeBody.appendChild(testElement)      docEl.appendChild(fakeBody)      if (testElement.offsetHeight === 1) {
           docEl.classList.add('hairlines')      }      docEl.removeChild(fakeBody)    }  }(window, document))

sass讲解

css一些问题：

1.css需要书写大量冗余的代码。 2.不方便维护。 sass：作为css的一种扩展语言。它没有减少css的功能，而是在css的基础上引入了一些css原本没有的功能（变量，Mixin,运算，函数，嵌套）。

使用sass优点：

能让咱们写更少的代码，来实现更多的功能。

步骤

sass是一个插件,在vscode中下载就能使用(创建sass后缀的不是sass,而是scss)

引入时优先引用压缩后的css(是选择姓引用,原来的文件不能删,只是不去引用)

1.变量

格式：以$符号开头，跟变量名即可。

先定义   $bc-color:red;

首先定义一个变量。 变量名：变量值。

如果变量嵌套在字符串中，则必须写在#{}里面。

$m-r:right; margin-#{
   $m-r}: 40px; 等同于:                             margin-right: 40px;

2.嵌套

在css中直接使用标签嵌套。 有些时候需要使用父选择器，这个时候则使用 & 占位符。

属性嵌套：复合属性才可以使用。

这里表示左边框  border: {
           style:solid;        left:{
               width: 4px;            color: #888;              }};

3.注释

单行注释：// 不会保留到编译后的css文件中。 多行注释：/* / 会保留到编译后的css文件，压缩文件则没有。

重要注释：/！ */ 会保留到编译后的css文件，压缩文件也会保留，一般用于版权声明。

---

属性嵌套必须是

复合属性

$bc-color:red;//这是定义的一个变量方法$m-r:right;*sass中样式* .container{
       width: 800px;    height: 300px;    background-color: $bc-color;.button-group{
                      button{
               font-size: 24px;                     color: #fff;                padding: 10px 20px;            margin-#{
   $m-r}: 40px;                            }               }              }*结构*         
   
        
    
            
     开始            
     结束        
    
          
   

上面的sass的引用在css样式中就是变成了如下这样

background-color: red; margin-right: 40px;

继承及综合案例详解

sass部分

//----------------------------------------//定义一个混合。相当于是一个方法@mixin boxStyle($bc,$fc:red) {
       background-color: $bc;//没有定义颜色只是定义了 $bc是一个背景颜色属性    p{
           color: $fc;//上面定义了红色     }}//----------------------------------------.box {
       width: 200px;    height: 200px;    @include boxStyle(yellow );// 这里是引用上面的方法,并赋值为黄色    p{
           text-align: center;        color: green;//虽低不着泥 本应该是红色,这里被绿色覆盖    }}$ye:yellow;//这是定义了变量,为黄色$m-r:top;.box2{
     //@extend 继承-可以让一个选择器继承另一个选择器的所有样式。    @extend .box;    color: $ye;//这里使用了上面的变量    margin-#{
   $m-r}: 40px;  // 这里是引用上面的方法   @include boxStyle(blue);//背景为蓝色,字体为红色(红色是上面的方法有的)}// .box ,.box2{
   }这样写是并集,sass里面的选择器和css一样

html

   
    雪压枝头低            
    
                虽低不着泥            
        
   
        
   
                一招红日出            
    
依旧与天齐
        
   

计算

sass中样式

div{
       padding: 2px * 4;    margin: 20px + 2px;    font-size: 16px - 2;    // 除法必须加小括号    border: (10px / 2) solid;    // 取绝对值    margin: abs(-10px);    // 四舍五入    margin: round(3.6px);    // 向上取整    margin: ceil(3.2px);    // 向下取整    margin: floor(3.999px);    width: percentage(650px/1000px);    }

css中效果

div {
     padding: 8px;  margin: 22px;  font-size: 14px;  border: 5px solid;  margin: 10px;  margin: 4px;  margin: 4px;  margin: 3px;  width: 65%;}

颜色

// 提供了两个颜色函数。   @mixin d-center {
       margin: 0 auto;    margin-top: 200px;}div{
       width: 300px;    height: 300px;       改变颜色的深浅                           使变亮     background-color: lighten(#cc3,30%);		        使变暗    background-color: darken(#cc3,40%);    @include d-center();}

转载地址：https://blog.csdn.net/z18237613052/article/details/111621722 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！