灵活适应布局:流体与自适应设计
PC及移动端页面适配方法
设备屏幕有多种不同的分辨率,页面适配方案有如下几种: 1、全适配:响应式布局+流体布局 2、移动端适配:
- 流体布局+少量响应式
- 基于rem的布局
下面先来看看一个布局的问题。
布局问题
首先写四个div
按照百分比来设定宽度,无论如何缩放浏览器,这四个div都会自动调整大小。那么如果设置一个边框呢?
设置边框
从上面可以看到,由于增加了边框的像素,导致第四个div被挤了下来。那么该如何处理呢?
下面来看看流体布局。
流体布局
流体布局,就是使用百分比来设置元素的宽度,元素的高度按实际高度写固定值,流体布局中,元素的边线无法用百分比,可以使用样式中的计算函数 calc() 来设置宽度,或者使用 box-sizing 属性将盒子设置为从边线计算盒子尺寸。
使用calc()方式来解决上面的布局问题 可以通过计算的方式给元素加尺寸,比如: width:calc(25% - 4px);
使用box-sizing方式解决上面的布局问题 1、content-box 默认的盒子尺寸计算方式 2、border-box 置盒子的尺寸计算方式为从边框开始,盒子的尺寸,边框和内填充算在盒子尺寸内
响应式布局
响应式布局就是使用媒体查询的方式,通过查询浏览器宽度,不同的宽度应用不同的样式块,每个样式块对应的是该宽度下的布局方式,从而实现响应式布局。响应式布局的页面可以适配多种终端屏幕(pc、平板、手机)。
相应布局的伪代码如下:
@media (max-width:960px){
.left_con{width:58%;}
.right_con{width:38%;}
}
@media (max-width:768px){
.left_con{width:100%;}
.right_con{width:100%;}
}
看完上面的示例,下面再来实操一下看看。
按照上面的流体布局,当缩放浏览器的时候,这四个div就会被压缩比较窄。例如,如果是手机APP,那么就更加窄小了。
那么下面可以设置一下响应式布局。
当浏览器缩放宽度小于800px,那么div的大小就变为50%
当浏览器缩放宽度小于500px,那么div的大小就变为98%
这就是响应式布局了,根据宽度的变化,响应变化相关的样式,达到适配不同的浏览器大小。
推荐阅读
-
灵活适应布局:流体与自适应设计
-
25个超赞的液态流动与自适应布局网页设计实例展示
-
Flexbox 布局完全指南》:实现灵活自适应的网页布局
-
CSS中的100vh应用:实现自适应高度布局与浏览器视口单位的使用
-
Android中的自适应遮罩与布局适配rem原理详解
-
如何运用rem和calc函数实现灵活的自适应页面布局 - 之二:深入理解calc的用法
-
如何使用Vue CLI 3实现PC端响应式设计:针对大屏及超大屏幕的自适应布局
-
如何运用rem、自适应高度、媒体查询在苏宁易购设计中?介绍REM与媒体适应性、LESS语言中的计算、语法、数学运算以及函数的使用和参数传递
-
Vue 2.0 结合 flexible.js 和 REM 灵活实现页面自适应设计
-
Less语言与rem单位结合的灵活布局方案:第三部分 - rem适应性布局方法