CSS布局:rem布局原理

CSS学习系列

rem布局原理

rem布局原理:主要原理是rem布局。 最近和别人谈弹性布局原理,发现虽然已经使用了那套方案很久,但是自己对rem的理解很含糊, 包括vw、vh等。

我们拿到的设计图一般是以640,750,1080分辨率为基准设计的,而现在的手机终端各式各样,分辨率不同,逻辑像素不同 ,视口不同,所以为了让我们的页面在每个设备上都可以良好的展示,那么就需要为这些设备做统一的处理,这个过程就称为移动端适配。

1、继续CSS使用css排版的代码:
1、logo 头部居中
2、content部分:
1、左边
h1
p

2、右边
头像:
img
介绍:
h2
p
3、底部

2、rem所有的元素受html的元素影响;

总结:

使用rem布局,实质都是通过动态改写html的font-size基准值,来实现不同设备下的良好统一适配;网易与淘宝不同 的地方是 ,网易将布局视口设置成了视觉视口,淘宝将布局视口设置成了物理像素大小,通过 scale缩放嵌入了 视觉视口中;容器元素的字体大小都不使用rem,需要额外的media查询。

Last modified: 2019年8月31日

Next Story

CSS学习系列

CSS布局:使用控制布局元素

在CSS中布局基本上有四个组成:(sizing)尺寸大小,(alignment)对齐,(spacing)间距和(responsiveness)响应。通过使用高度、最小高度、最大高度、宽度、最小宽度和最大宽度属性来了解CSS布局的尺寸大小。

...