移动端布局 - rem布局

最新推荐文章于 2024-05-22 12:05:09 发布

学习中的小菜鸟.

最新推荐文章于 2024-05-22 12:05:09 发布

阅读量247

点赞数

分类专栏：移动端布局文章标签： rem布局

本文链接：https://blog.csdn.net/qq_33962481/article/details/117471514

版权

移动端布局专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

一、rem单位
二、媒体查询

一、rem单位

rem是一个相对单位, 类似于em , em表示的是父元素字体大小
rem的基准是相对于html元素的字体大小

比如 , html设置font-size=12px, 非根元素设置width:2rem; 则表示24px.

二、媒体查询

媒体查询可以针对不同的屏幕尺寸设置不同的样式.

语法

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

参数

mediatype : 媒体类型
关键字 : and not only
media feature : 媒体特性, 必须由小括号包含

媒体类型

将不同的终端设备划分成不同的类型, 称为媒体类型.

all : 用于所有设备
print : 用于打印机和打印预览
screen : 用于电脑屏幕, 平板电脑, 只能手机等.

关键字

关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件

and : 可以将多个媒体特性连接到一起.
not : 排除某个媒体类型
only : 指定某个特定的媒体类型.

媒体特性

每种媒体类型都具有各自不同的特性, 可以根据不同媒体类型的媒体特性设置不同的展示风格.

width : 定义输出设备中页面可见区域的宽度
min-width : 定义输出设备中页面最小可见区域宽度
max-width : 定义输出设备中页面最大可见区域的宽度

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 屏幕大小  小于等于800px的时候 */
        @media screen and (max-width: 800px) {
            body {
                background-color: red;
            }
        }
    </style>
</head>

<body>

</body>

</html>