移动端常见布局（二）——rem基础

最新推荐文章于 2023-06-21 17:59:20 发布

前端笨鸟

最新推荐文章于 2023-06-21 17:59:20 发布

阅读量149

点赞数

分类专栏： html学习笔记文章标签： rem

本文链接：https://blog.csdn.net/qq_41670147/article/details/102944923

版权

html学习笔记专栏收录该内容

28 篇文章 0 订阅

订阅专栏

rem单位
rem（root em）是一个相对单位，类似em，em相对于父元素的字体大小来说的，而rem相对于html元素字体大小来说的
不同的是rem的基准是相对于html元素的字体大小
例：根元素（html）设置font-size=12px；非根元素设置width:2rem;则换成px表示就是24px。
rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制
媒体查询
媒体查询（media Query）是css3新语法
● 使用@media查询，可以针对不同的媒体类型定义不同的样式
● @media可以针对不同的屏幕尺寸设置不同的样式
● 当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
● 目前针对苹果手机、Android Q手机，平板等设备都用得到多媒体查询
语法规范

@media mediatype and|not|only(media feature){
	css-code
}

● 用@media开头注意@符号
● mediatype 媒体类型
● 关键字and not only
● media feature 媒体特性必须有小括号包含
mediatype查询类型
将不同的终端设备划分成不同的类型，称为媒体类型

值	解释说明
all	用于所有设备
print	用于打印机和打印预览
scree	用于电脑屏幕，平板电脑，智能手机等

关键字
关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件
● and：可以将多个媒体特性链接到一起，相当于“且”的意思
● not：排除某个媒体类型，相当于“非”的意思
● only：指定某个特定的媒体类型
注意：为了防止混乱，媒体查询我们要按照从小到大或者从大到小的顺序来写，为了代码更简洁，建议从小到大来写
媒体查询+rem实现元素动态大小变化
rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸
媒体查询可以根据不同设备宽度来修改样式
媒体查询+rem就可以实现不同设备宽度，实现页面元素大小的动态变化
例：屏幕小于640时，字体大小为25px，高度为50；大于640时，字体大小为50px，高度为100px

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        @media screen and (min-width:320px) {
            html {
                font-size: 50px;
            }
        }
        
        @media screen and (min-width:640px) {
            html {
                font-size: 100px;
            }
        }
        
        .top {
            height: 1rem;
            line-height: 1rem;
            text-align: center;
            font-size: .5rem;
            background-color: darkcyan;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="top">头部</div>
</body>

</html>

引入资源
当样式比较繁多的时候，可以针对不同的媒体使用不同stylesheets（样式表）
原理：直接在link中判断设备的尺寸，然后引用不同的css文件
语法：

<link rel="stylesheet" media="mediatype and |not|only(media feature)" href="mystylesheet.css">

例：

 <link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)">
 <link rel="stylesheet" href="style640.css" media="screen and (min-width:640px)">