web前端开发之rem布局

最新推荐文章于 2024-04-05 17:38:08 发布

前端大斗师

最新推荐文章于 2024-04-05 17:38:08 发布

阅读量5.6k

点赞数 6

分类专栏： web前端 css 文章标签： css html html5 css3 web app

本文链接：https://blog.csdn.net/Web_chicken/article/details/112605390

版权

web前端同时被 2 个专栏收录

78 篇文章 12 订阅

订阅专栏

css

32 篇文章 0 订阅

订阅专栏

1.rem布局

1.1 em和rem

rem和em很容易混淆，其实两个都是css的单位，并且也都是相对单位，现有的em，css3才引入的rem，在介绍rem之前，我们先来了解下em:

em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDN

em可以让页面更灵活，比起写死的px值，em更有张力，改动父元素的字体大小，子元素会等比例变化，但其复杂的计算让人诟病，甚至有人专门做了个px和em的计算器，不同节点像素值对应的em值
在这里插入图片描述

em做弹性布局的缺点还在于牵一发而动全身，一旦某个节点的字体大小发生变化，那么其后代元素都得重新计算

于是。。。

rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小——MDN

1.2 为什么使用rem 布局

百分比布局和flex布局都没有解决两个问题

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

采用 rem 布局，可以让屏幕发生变化时，元素的高度和宽度以及文字大小等能够等比例缩放

其实rem布局的本质是等比缩放，一般是基于宽度

1.3 rem单位

rem (root em)是一个相对单位，类似于em，em是父元素字体大小。

不同的是rem的基准是相对于html元素的字体大小。

比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。

 <style>
      html {
        font-size: 12px;
      }
      .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">hello rem</div>
  </body>

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

2. 媒体查询

2.1 为什么使用媒体查询

上面案例中，使用rem作为元素的单位

元素的尺寸就会随着 html 中 font-size 的变化而变换

当屏幕较大时，设置 font-size 为较大值，元素就会变大；当屏幕较小时，设置 font-size 为较小值，元素就会变小

问题来了：如何在屏幕大小发生变化时，改变 html 的 font-size 的值呢，换言之，如果在不同大小的屏幕中渲染当前页面时，动态的根据当前屏幕初始化 html 的 font-size 的值呢？

媒体查询是一种比较友好的方式，但不是唯一的方式

2.2 什么是媒体查询

媒体查询（Media Query）是CSS3新语法。

媒体指的就是各种设备 (移动设备, PC设备)
查询指的是要检测属于哪种设备
媒体查询: 通过查询当前属于哪种设备,让网页能够在不同的设备下正常的预览

2.3 媒体查询语法

用 @media开头注意@符号
mediatype 媒体类型
关键字 and not only
media feature媒体特性必须有小括号包含

例如：

内嵌式代码(推荐)：

@media mediatype and|not|only (media feature) {
    CSS-Code;
}
@media (min-width:577px) and (max-width:768px){
    div{
        width: 50%;
    }
}

外链式:

<link rel="stylesheet" type="text/css" href="地址" media="only screen and (max-width: 420px)">

2.3.1 mediatype 查询类型

all (所有的设备)
print (打印设备)
screen (电脑屏幕,平板电脑,智能手机)

2.3.2 关键字

目的将媒体类型和媒体特性链接到一块,进行设备检测

and 可以将多个媒体特性链接到一块,相当于且
not 排除某个媒体特性相当于非,可以省略
only 指定某个特定的媒体类型, 可以省略

2.3.3 媒体特性

每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。

用来描述设备的特点,比如宽度,高度…

注意他们要加小括号包含

width 网页显示区域完全等于设置的宽度
height 网页显示区域完全等于设置的高度
max-width / max-height网页显示区域小于等于设置的宽度
min-width / min-width 网页显示区域大于等于设置的宽度
orientation:portrait (竖屏模式) | landscape (横屏模式)

前端大斗师

关注

6
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
3
评论
web前端开发之rem布局

1.rem布局1.1 em和remrem和em很容易混淆，其实两个都是css的单位，并且也都是相对单位，现有的em，css3才引入的rem，在介绍rem之前，我们先来了解下em:em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDNem可以让页面更灵活，比起写死的px值，em更有张力，改动父元素的字体大小，子元素会等比例变化，但其复杂的计算让人诟病，甚至有人专门做了个px和em的计算器，不同节点像素值对应的em值em做弹性布局的缺点还在于牵
复制链接

扫一扫