最新消息:周一至周五21:30分QQ群(161510483)直播,零基础免费学谷歌SEO,WEB前端,PHP入门教程

CSS布局:rem布局原理

CSS学习系列 林雍岷 155浏览

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查询。

转载请注明:林雍岷 » CSS布局:rem布局原理