css样式布局及rem用法梳理

这种布局方式是通过css3新增的一些辅助布局的样式属性来制作布局的方式。3、rem布局 rem是一种相对长度单位,通过这个长度单位可以实现元素宽高等比例缩放,从而完成不同宽度屏幕的适配。4、响应式布局 (媒体查询)通过样式动态查询屏幕的宽度,动态切换样式来适配不同宽度屏幕的布局方式。Bootstrap是最典型...
css样式布局及rem用法梳理
视口(viewport)是用来约束网页中最顶级块元素的,即它决定了网页的大小,网页是先在视口上渲染,然后再通过视口放回到浏览器窗口上的,网页的渲染过程如下:

pc端视口的大小和浏览器的大小一样,所以网页是1:1的放到浏览器窗口上,而移动端视口就有点特殊,移动端视口的宽度是比移动端屏幕要宽,宽度尺寸一般是980px或者1024px,网页是视口上渲染完之后,为了能在移动端屏幕上显示整个网页,整个视口会整体缩放到屏幕的宽度,这样,网页看上去就整体缩放

具体如何设置视口以及禁止视口页面缩放可以自行百度

(主要针对移动端以及pc端网页需要实现等比放大缩小页面效果)

大概有以下几种

1、流体布局
流体布局其实就是宽度用百分比,高度用固定值的布局方式,宽度通过百分比来适配不同宽度的屏幕。

为了适配手机端不同尺寸的屏幕,我们在定义元素宽度的时候可以写百分比,百分比是相对于屏幕的宽度,所有宽度就可以做到自适应,而在高度方向,由于网页的高度是不定的,所以我们可以把高度写成固定的值(px),这种布局方式叫做流体布局。

注意两个概念

2、弹性盒模型布局flex
这种布局方式是通过css3新增的一些辅助布局的样式属性来制作布局的方式。

3、rem布局
rem是一种相对长度单位,通过这个长度单位可以实现元素宽高等比例缩放,从而完成不同宽度屏幕的适配。

4、响应式布局 (媒体查询)
通过样式动态查询屏幕的宽度,动态切换样式来适配不同宽度屏幕的布局方式。
Bootstrap是最典型的一种

待补充

实际开发中,pc端页面需要实现响应式等比缩放(即自适应),使用rem+弹性布局是比较现实及理想的解决方式
移动端可以使用rem布局,也可以使用px实现(主要用flex),具体看产品是怎么设计要求的

css3规定:1rem的大小就是根元素<html>的font-size的值。

rem其实是一个单位 ,是个相对单位 root em。rem就是root(根元素的大小)相对于html元素的字体大小的单位。

rem布局的原理
就是根据一个html根元素来控制,网页的布局,实现类似于自适应等比例的缩放的布局。

rem优势
通过修改html文字的大小,来改变页面中元素的大小,实现了页面的整体控制

rem的作用
通过设置 根元素<html>的font-size的大小,来控制整个html文档内的字体大小、元素宽高、内外边距等,根据移动设备的宽度大小来实现自适应,不同的设备都展示一致的页面效果。

简单用法

vscode中安装cssrem插件,通过这个插件可以自动计算rem数值。
具体设置如下

注意:设置后 vscode软件需要重启 否则计算的rem值会出错

待补充

可以通过js的方式来改变,也可以通过css媒体查询的方式来改变,

待补充2022-08-02
mengvlog 阅读 30 次 更新于 2025-09-09 21:06:23 我来答关注问题0
  •  翡希信息咨询 px、rpx、em以及rem的区别与用法

    用法:在CSS中,rem常用于设置全局的字体大小、边距等,以实现跨设备的相对布局。例如,font-size: 1rem; 表示当前元素的字体大小为根元素字体大小(即html元素的字体大小)。特点:rem的值是相对于根元素的字体大小而言的,因此它不会随着页面或元素的嵌套层级而改变。rem解决了em在不同嵌套层级中计算...

  •  翡希信息咨询 css中pt、px、em、rem都扮演了什么角色

    在CSS中,pt、px、em、rem都是用于设置元素尺寸或间距的单位,但它们各自具有不同的特点和适用场景。1. pt(点)角色:pt是一个绝对长度单位,常用于印刷行业。特点:1pt等于1/72英寸,具有固定的物理尺寸。优点:在印刷业中非常受欢迎,因为它提供了精确的物理尺寸控制。缺点:在网页设计中很少使用,...

  •  翡希信息咨询 css中px、em、rem、%、vw、vh、vm、rpx 这些单位的区别,最全面CSS单位了解,不懂的找我

    定义:基于父元素的字体大小,如未设置,浏览器默认16px。1em等于当前父元素的fontsize值。用途:根据父元素的大小调整,常用于文本尺寸和布局。特点:整个页面内的1em不是固定值,依赖于父元素的fontsize。rem 定义:相对于HTML元素的字体大小,CSS3新增。用途:可用于非根元素,便于统一调整全局尺寸。...

  •  翡希信息咨询 【CSS】一文搞懂 em、px、rem、vh、vw 的区别!

    5. vw 类型:视口相关单位。 特点:表示视口宽度的百分比。 适用场景:与vh类似,vw主要用于响应式布局,方便根据屏幕尺寸调整页面结构。特别适用于需要根据视口宽度进行自适应布局的场景。总结: px适用于精确控制元素大小。 em和rem适合动态调整元素大小,但rem更适用于全局范围内的动态调整。 vh和vw则适...

  •  翡希信息咨询 【夯实基础--CSS】=> px、em、rem和rpx的区别

    较为繁琐。rem:适用于需要响应式布局且元素大小与根元素字体大小相关联的场景,计算清晰,不受父元素字体大小影响。rpx:适用于微信小程序开发,确保在不同屏幕尺寸上保持一致的布局效果。图片示例:em单位示例:rem单位示例:这些单位各有优缺点,选择时需根据具体需求和场景进行权衡。

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部