-
由于现代浏览器屏幕的多样化，无论是移动端还是pc，出现了很多规格的屏幕尺寸，为了更好的适配，我们的页面布局会采用【响应式布局】。
-
在实际项目开发过程中，我们通常采用多种布局方式来实现响应式的需要。【媒体查询】作为基础，字体可以用【rem】，宽高可以用【vw/vh】【flex/grid】【%】【栅格系统】等
-
响应式布局的注意点
- 设置视口
响应式布局方案
百分比布局
-
利用百分比布局可以设置元素跟随浏览器的宽度/高度变化而变化。Bootstrap 的 栅格布局就是利用媒体查询在不同尺寸的浏览器中，设置不同的百分比。element-ui 的响应式布局也是参照 Bootstap 设计的。
-
需要计算，父/祖先元素的 width height padding margin border 均会影响子元素的计算，增加开发成本和时间
媒体查询
-
是 css3 的特性，会根据不同媒体类型定义不同的样式。当重置浏览器窗口大小时，页面会根据不同条件重新渲染。所以，性能开销也很大。
-
确定不同媒体的分割点，是一件至关重要的事情。（下图仅供参考）
/* iphone6 7 8 plus */
@media screen and (min-width: 414px) {
body {}
}
/* ipad */
@media screen and (min-width: 768px) {
body {}
}
/* pc */
@media screen and (min-width: 1440px) {
body {}
}
rem布局
- css3 的新特性，根据 html 的字体大小为基础进行计算的。html 的字体大小为 18px，那么 1rem=18px。
- 开发中，只要改变 html 的 font-size 的大小，即可进行各媒体类型的适配。
- 通常结合媒体查询进行不同屏幕宽度的 html 字体大小的设置
// 基准大小
const baseSize = 16
// 设置 rem 函数
function setRem () {
// 当前页面宽度相对于 1920 宽的缩放比例，可根据自己需要修改。 pc端项目的设计稿通常是 1920*1080
const scale = document.documentElement.clientWidth / 1920
// 设置页面根节点字体大小, 字体大小最小为12 chrome最小字体大小为12
let fontSize = (baseSize * Math.min(scale, 2))>12 ? (baseSize * Math.min(scale, 2)): 12
document.documentElement.style.fontSize = fontSize + 'px'
}
//初始化
setRem()
//改变窗口大小时重新设置 rem,这里最好加上节流
window.onresize = function () {
setRem()
}
视口布局
- css3新特性 vw/vh 视口单位
- vw 视窗宽度，1vw=视窗宽度的1%；vh 视窗高度，1vh=视窗高度的1%
- 因为是根据视口的宽高进行设置的，换算比较简单。
如果设计稿宽度是 1920
设置 div 的宽度则是
div {
width: (100 / 1920) * 100vw;
}
- 物理像素线：普通屏幕下1px(1个像素点)，高清屏幕下0.5px（4个像素点），此时利用 transform:scale 实现
div {
height: 1px;
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
-webkit-transform: scaleY(0.5);
-webkit-transform-origin: 50% 0%;
}
}
- 对于需要保持宽高比的图，用 padding-top 实现
div {
padding-top: percentage(100/700);
position: relative;
height: 0;
overflow: hidden;
img {
width: 100%;
height: auto;
position: absolute;
left: 0;
top: 0;
}
}
弹性布局/网格布局
- css3 新特性
- display: flex; display: grid; 父元素开启弹性布局/网格布局
- 当浏览器变化时，页面布局依然保持想要的布局方式。
- 父元素开启弹性/网格布局，子元素按照需要合理进行排列，对其，分配剩余空间。
- 适配浏览器版本较高。
