rem布局——媒体查询部分

最新推荐文章于 2022-12-30 00:22:59 发布

@山海*

最新推荐文章于 2022-12-30 00:22:59 发布

阅读量508

点赞数 2

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/weixin_47612165/article/details/112630032

版权

REM布局媒体查询响应式设计字体大小屏幕宽度

关键词由CSDN通过智能技术生成

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

rem
1.1 为什么使用 rem 布局
前两两种布局方式一直没有解决两个问题

页面中的文字不能随着屏幕变化而变化，比如前面的仿京东页面
百分比布局和flex布局主要针对宽度布局，高度一致被忽视

采用 rem 布局，可以让屏幕发生变化时，元素的高度和宽度以及文字大小等能够等比例缩放
1.2 rem单位
rem (root em)是一个相对单位，类似于em，em是父元素字体大小。
不同的是rem的基准是相对于html元素的字体大小。
比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。

 <style>
        html{
            font-size: 12px;
        }
        .box{
            width: 15rem;
            height: 10em;
            background: blue;
            font-size: 1.5rem;
            color: black;
            text-align: center;
            line-height: 10rem;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

在这里插入图片描述

rem的优势：父元素文字大小可能不一致，但是整个页面只有一个html，可以很好来控制整个页面的
元素大小

媒体查询
2.1 为什么使用媒体查询
上面案例中，使用rem作为元素的单位
元素的尺寸就会随着 html 中 fong-size 的变化而变换
当屏幕较大时，设置 font-size 为较大值，元素就会变大；当屏幕较小时，设置 font-size 为较小值，元
素就会变小
问题来了：如何在屏幕大小发生变化时，改变 html 的 font-size 的值呢，换言之，如果在不同大小的屏
幕中渲染当前页面时，动态的根据当前屏幕初始化 html 的 font-size 的值呢？
媒体查询是一种比较友好的方式，但不是唯一的方式
2.2 什么是媒体查询
媒体查询（Media Query）是CSS3新语法。媒体查询就是查询媒体的类型和屏幕大小
使用@media查询，可以针对不同的媒体类型定义不同的样式
@media 可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询
2.3 媒体查询语法
用 @media开头注意@符号
mediatype 媒体类型
关键字 and not only
media feature 媒体特性必须有小括号包含

@media mediatype and|not|only (media feature) { 
CSS-Code; 
}

2.3.1 mediatype 查询类型
将不同的终端设备划分成不同的类型，称为媒体类型
在这里插入图片描述
2.3.2 关键字(逻辑操作符)
关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

and：可以将多个媒体特性连接到一起，相当于“且”的意思
not：排除某个媒体类型，相当于“非”的意思，可以省略。
only：指定某个特定的媒体类型，可以省略
,：表示或者的意思
2.3.3 媒体特性
每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个
注意他们要加小括号包含

在这里插入图片描述
2.3.4 媒体查询书写规则
注意：为了防止混乱，媒体查询我们要按照从小到大或者从大到小的顺序来写,但是我们最喜欢的还是从
小到大来写，这样代码更简洁

2.4 不同屏幕宽度设置body背景

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

当屏幕宽度<=800px 像素时，body背景颜色为 #ccc
还可以在划分一个挡位

@media screen and (max-width: 800px) { 
body{
background-color: #ccc;
 } 
 }
 @media screen and (max-width:540px) { body{
 background-color: #666; 
 } 
 }

当屏幕宽度<=840px 像素时，body背景颜色为 #ccc
当屏幕宽度<=540px 像素时，body背景颜色为 #666
在这里插入图片描述
书写顺序
如果把上面的媒体查询颠倒一下顺序

@media screen and (max-width:540px) { body{
background-color: #666; 
} 
}
@media screen and (max-width: 800px) { body{
background-color: #ccc; 
}
 }

下面的设置就不再生效了，因为第二个设置包含第一个，所以我们把握住一个原则：前面的设置不能包
含在后面的媒体查询中，否则就会失效

@media screen and (max-width:540px) { body{
background-color: #666; 
} 
}

又比如下面的代码就没有问题，但是如果颠倒顺序，因为后面的 min-width 320 其实包含了前面 minwidth 750，就会导致 minwidth 750 的设置失效

@media screen and (min-width: 320px) { 
body { 
background-color: red;
 } 
 }
 @media screen and (min-width: 750px) { body {
  background-color: blue; 
} 
}

2.5 通过媒体查询改变 font-size

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @media screen and (min-width: 320px){
            html{
                font-size: 12px;
 }
        }
        @media screen and (min-width: 640px){
            html {
                 font-size: 16px;
                 }
        }
        @media screen and (min-width: 1020px)  {
            html{
                font-size: 16px;
            }  
        }
        @media screen and (min-width:1020px) {
            html{
                font-size: 20px;
            }
        }
        .box { 
            width: 10rem;
             height: 10rem; 
             background-color: orange; 
             font-size: 1.5rem;
              color: #fff;
               text-align: center;
                line-height: 10rem; 
            }
    </style>
</head>
<body>
    <div class="box">蔡徐坤</div>
</body>
</html>

2.6 逻辑操作符演示
and
表示设备是屏幕并且最小宽度为600px

@media screen and (min-width:600px){ body{
background-color: red; 
}
 }

如果改成下面这样，就是设备为打印机，并且最小宽度为600px

@media print and (min-width:600px){ 
body{
background-color: red; 
} 
}

表示设备时屏幕，并且最小宽度为600px，并且最大宽度为900px，也就是屏幕在 600-900之间时背景颜色为红色

@media screen and (min-width:600px) and (max-width:900px){ 
body{background-color: red; 
} 
}

或
使用 , 表示或
下面表示设备为屏幕并且最小宽度为900px，或者最大宽度为600px
也就是说，当设备为屏幕并且屏幕宽度在900px以上时，或者屏幕宽度在600px以下时，背景颜色设置为红色

@media screen and (min-width:900px),(max-width:600px){ 
body{
background-color: red; 
}
 }

注意上面的表述，前一个条件限制了设备类型和屏幕宽度，第二个条件限制了屏幕宽度，并没有限制设
备类型(默认就是all)
所以，如果希望限制第二个条件同样限制设备类型，应该这样编写

@media screen and (min-width:900px),screen and (max-width:600px){ 
body{background-color: red; 
} 
}

2.7 通过媒体查询实现响应式布局
通过媒体查询实现下面效果

屏幕宽度 <=576px 时，每行显示1张图片
屏幕宽度>576px 并且 <=768px 时，每行显示2张图片
屏幕宽度>768px，并且<=992px 时，每行显示4张图片
屏幕宽度>992px，并且<=1200px 时，每行显示6张图片
屏幕宽度>1200px 时，每行显示12张图片

@山海*

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
rem布局——媒体查询部分

rem1.1 为什么使用 rem 布局前两两种布局方式一直没有解决两个问题页面中的文字不能随着屏幕变化而变化，比如前面的仿京东页面百分比布局和flex布局主要针对宽度布局，高度一致被忽视采用 rem 布局，可以让屏幕发生变化时，元素的高度和宽度以及文字大小等能够等比例缩放1.2 rem单位rem (root em)是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。比如，根元素（html）设置font-size=12px; 非根元素设置
复制链接

扫一扫

专栏目录