rem布局模式(少量)+ filter 滤镜(主要)

1、em和rem的区别

    em  相对于当前元素或父元素标签的尺寸 ，可以说，套的层级越深越复杂

    rem 相对于 html 根标签的尺寸              ，使用 rem 避免了层级关系，避免了复杂程度

    必须要知道html的默认尺寸是多少：16px

2、rem 应用场景

  rem可以根据不同设备的屏幕尺寸来调整页面的布局和样式。

  在移动端，我们可以将根元素的字体大小设置为 10px 或 100px，然后使用 rem 单位来定义其他元素的尺寸和间距。这样，页面元素的尺寸和间距就能够根据设备的屏幕尺寸进行自适应调整。

  此外，使用rem单位还可以方便地调整页面中所有元素的尺寸和间距。如果需要修改页面中某个元素的尺寸或间距，只需修改根元素 html 的字体大小即可。这种调整方式相对于使用像素或其他固定单位来说，更加灵活和方便。

  另外，使用rem单位还可以提高页面中文字和图标等元素的可读性。由于rem单位是相对于根元素字体大小来计算的，因此在不同设备上都能保持一致性。这对于提高页面的可读性和用户体验是有益的。

    配合响应式布局来使用

<style>
        html{
            font-size: 10px;
        }
        @media screen and (max-width:320px) {
            html{
                font-size: 42px;
            }
        }
        @media screen and (min-width:320px) {
            html{
                font-size: 48px;
            }
        }
        @media screen and (min-width:360px) {
            html{
                font-size: 53px;
            }
        }
</style>

3、filter 滤镜

原图：                                             增加高斯模糊后的效果：

    

  1、高斯模糊 blur(px)

<style>
    img{
    width: 600px;
    /* 高斯模糊 */
    filter: blur(2px);
    }
</style>

  2、brightness(%)

    给图片应用，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。值超过100%也是可以的，图像会比原来更亮。

<style>
    img{
        width: 600px;
      /* 高斯模糊 */
        /* filter: blur(2px); */
      /* 高亮 */
        filter: brightness(200%);
    }
</style>

增加高亮后的效果：                                        使用对比度后的效果：

     

  3、contrast(%)

    调整图像的对比度。值是0%，图像会全黑。值是100%，图像不变。值可以超过100%，将意味着会运用更低的对比度。

<style>
        img{
            width: 600px;
        /* 高斯模糊 */
            /* filter: blur(2px); */
        /* 高亮 */
            /* filter: brightness(200%); */
        /* 对比度 */
            filter: contrast(200%);

        }
</style>

  4、drop-shadow(h-shadow v-shadow blur spread color)

    给图像设置一个阴影效果。

    1）offset-x 设定水平方向距离，负值会使阴影出现在元素左边。（必须）   offset翻译为 偏移  -x

    2）offset-y 设定垂直距离，负值会使阴影出现在元素上方。（必须）         offset翻译为 偏移  -y

    如果两个值都是0, 则阴影出现在元素正后面 （如果设置了 blur 和 / 或 spread ，会有模糊效果）。

    3）blur-radius（模糊半径）（不是必须）

      这是 drop-shadow 第三个值，值越大，越模糊，则阴影会变得更大更淡，不允许负值

    4）spread-radius（扩散半径）（不是必须）
      这是 drop-shadow 第四个值，正值会使阴影扩张和变大，负值会是阴影缩小

  注意：Webkit ，以及一些其他浏览器，不支持第四个值，如果加了也不会渲染。

    5）color（颜色）（不是必须）

<style>        
        img{
            width: 600px;
        /* 高斯模糊 */
            /* filter: blur(2px); */
        /* 高亮 */
            /* filter: brightness(200%); */
        /* 对比度 */
            /* filter: contrast(200%); */
        /* 阴影 */
            filter: drop-shadow(10px 10px 5px red);
                             /* x轴  y轴  模糊  颜色*/
        /* 注意：添加扩散半径时，如果无效，应为浏览器原因，删去再试试 */
        }
</style>

阴影效果：                                                     灰度效果：（100%时，变成黑白图像）

   

  5、grayscale(%)

    将图像转换为灰度图像。值定义转换的比例。值为 100% 则完全转为灰度图像，值为 0% 图像无变化。

<style>        
        img{
            width: 600px;
        /* 高斯模糊 */
            /* filter: blur(2px); */
        /* 高亮 */
            /* filter: brightness(200%); */
        /* 对比度 */
            /* filter: contrast(200%); */
        /* 阴影 */
            /* filter: drop-shadow(10px 10px 5px red); */
        /* 灰度图像 */
            filter: grayscale(100%);
        }
</style>

  6、saturate(%)

    转换图像饱和度。其值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。超过100%的值是允许的，则有更高的饱和度。

<style>
        img{
            width: 600px;
        /* 饱和度 */
            filter: saturate(0%);
        /* 当值为 0% 时，图像呈现黑白色 */
        }
</style>

饱和度：                                                        深褐色：

     

  7、sepia(%)

    将图像转换为深褐色。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间。

<style>
        img{
            width: 600px;
        /* 高斯模糊 */
            /* filter: blur(2px); */
        /* 高亮 */
            /* filter: brightness(200%); */
        /* 对比度 */
            /* filter: contrast(200%); */
        /* 阴影 */
            /* filter: drop-shadow(10px 10px 5px red); */
        /* 灰度图像 */
            /* filter: grayscale(100%); */
        /* 饱和度 */
            /* filter: saturate(0%); */
        /* 深褐色 */
            filter: sepia(100%);
        }
 </style>

 

参考地址：https://www.runoob.com/cssref/css3-pr-filter.html