rem

最新推荐文章于 2023-08-28 20:24:08 发布

抹茶香蕉和牛奶

最新推荐文章于 2023-08-28 20:24:08 发布

阅读量165

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_39114788/article/details/104871792

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、rem

** 在这里插入图片描述

em相对于父元素的字体大小来说
rem相对于html元素字体大小来说的
**

2、媒体查询

Media Query 是CSS3新语法。

使用@media查询，可以针对不同的媒体类型定义不同的样式。
@media可以

针对不同的屏幕尺寸设置不同的样式

当你重置浏览器大小的过程中，页面也会更具浏览器的宽度和高度重新渲染页面。

/*在我们屏幕上并且最大宽度为800px设置我们要的样式*/
/*当屏幕小于等于800px时pink*/
@media screen   and (max-width:800px){
   body{
       background-color:pink;
       }
   }
   @media screen   and (max-width:500px){
   body{
       background-color:purple;
       }
   }

在这里插入图片描述

注意：

screen还有and必须带上不能省略
媒体查询按从小到大的顺序

@media screen and (max-width:539px) {
    body{
        background-color: blueviolet;
    }
}
@media screen and (min-width:540px){
    body{
        background-color:green;
    }
}
@media screen and (min-width:970px) {
    body{
        background-color:yellow;
    }
}

3、rem+媒体查询实现元素动态大小变换

@media screen and (min-width:320px){
    html{
        font-size: 50px;
    }
    
}
@media screen and (min-width:640px){
    html{
        font-size: 100px;
    }
    
}
.top
{
     height:1rem;
     font-size:.5rem;
     background-color: yellowgreen;
     color:#fff;
     text-align:center;
    line-height:1rem;
}

4、引入资源

当我们屏幕大于等于640px以上的，我们让div一行显示2个
当屏幕小于640px，一行显示一个

/*引入资源就是针对不同的屏幕尺寸 调用不同css文件*/
<link rel="stylesheet" href="style320" media ="screen and(min-width:320px)">;
<link rel="stylesheet" href="style640" media ="screen and(min-width:640px)">;