开始
本篇文章是2023暑期青训营的第七篇!
在开始一个新项目时,我总是在纠结如何进行css布局,然而网上的布局方案多种多样,有float,flex,grid,流式布局,自适应布局,响应式布局以及未来的组件驱动式Web设计.每一种布局又有很多种方案,看得我是眼花缭乱.。 本篇文章仅进行简单的学习总结,主要是关于自适应布局和响应式布局的一些收获。
响应式布局与自适应布局
响应式布局是指允许web页面适应不同屏幕的高宽,随着视口进行布局和外观的调整的一系列实践.它主要包括三个成分,液态网格,液态图像以及媒体查询
自适应布局是指web页面随着屏幕高宽自动增大缩小,相对响应式比较简单实用,缺陷是难以实现最优情况
自适应布局,响应式布局,都不是一种技术而是一套方案.它包括了flex布局,@media查询,rem/em,vw/vh单位等各种技术,目的是为了实现在不同设备下都有最优的内容展示.
自适应布局与响应式布局都非常依赖根元素下的font-size属性,这个属性影响着整个项目的样式大小,通过
pc端/移动端优先,是指设计时先从移动端开始还是pc端开始设计,一般来说从移动端开始,然后扩大视窗适应pc端布局
响应式布局与自适应布局的适用场景
自适应布局在pc端和移动端其实都会用到，也是目前网页开发中常常用到的布局方式之一。一般要么是针对pc端做自适应布局，要么针对移动端做自适应布局。如果要想同时兼容移动端和pc端，那么最好还是使用响应式布局。
响应式布局的应用场景就是需要同时兼容pc端和移动端的样式的布局一般都采用这种响应式布局。
自适应布局的几种方案
- px和视口
- 媒体查询
- 百分比
- 自适应场景下的rem解决方案
- 通过vw/vh来实现自适应
笔者在实际应用中选择了最后一种方法,其中的vw/vh没有直接编写,而是借助了pocss-px-to-viewport插件实现.
使用postcss-px-to-viewport实现自适应布局
postcss-px-to-viewport能够自动将px转换为vh/vw的单位,只要配置参数为ui稿的数值,插件插件就能进行对应的转换,接下来就能使用稿件的px单位进行开发了.
var defaults = {
viewportWidth: 320,
viewportHeight: 568,
unitPrecision: 5,
viewportUnit: 'vw',
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false
};
结语
自适应布局与响应式布局两种方案比较相似,自适应布局相对简单,一套代码就能适应不同的设备,缺陷是很难达到完美的情况;响应式布局同样是一套代码适应不同的设备,但是要考虑的因素更多,通过@media设置不同尺寸屏幕下的代码,响应式布局能够实现在各种设备尺寸下都有最优布局。
