移动进阶之高效开发
响应式布局
媒体查询的语法
/* 4.媒体特性 *//* width / max-width / min-width *//* -webkit-device-pixel-ratio / -webkit-max-device-pixel-ratio / -webkit-min-pixel-ratio *//* orientation: landscape / portrait *//* @media screen and (min-width: 320px) {body {background-color: red;}} *//* @media screen and (width: 320px) {body {background-color: red;}} *//* dpr <= 2 且屏幕水平方向 */@media (-webkit-max-device-pixel-ratio: 2) and (orientation: landscape) {body {background-color: red;}}获取像素比
// 获取 dprconsole.log(window.devicePixelRatio);媒体查询(断点)不能实时显示但是性能好 宽高等比例缩放
按钮点击显示/隐藏
<!-- 导航 --><nav id="nav" class="nav-layout"><ul class="nav-list"><li><a href="./index.html" class="nav-link">首页</a></li><li><a href="javascript:;" class="nav-link">免费课程</a></li><li><a href="javascript:;" class="nav-link">实战课程&金职位</a></li><li><a href="javascript:;" class="nav-link">专栏/手记/猿问</a></li><li><a href="javascript:;" class="nav-link">慕课教程</a></li></ul></nav><script>// 点击切换按钮，展开或收起导航菜单{const $toggleBtn = document.getElementById('header-toggle');const $nav = document.getElementById('nav');const navExtendedClassName = 'nav-layout-extended';const toggleBtnExtendedClassName = 'header-toggle-active';$toggleBtn.addEventListener('click',function () {// 判断有就移除样式 没有就添加样式this.classList.toggle(toggleBtnExtendedClassName);$nav.classList.toggle(navExtendedClassName);},false);}</script>/* nav */
.nav-list {background-color: #fff;
}
.nav-link {display: block;height: 40px;line-height: 40px;padding: 0 20px;color: #363636;font-size: 14px;font-weight: bold;
}
.nav-link:hover {color: #1428a0;
}.nav-layout {overflow: hidden;position: absolute;top: 48px;left: 0;width: 100%;height: 0;/*因为高度为0 不显示设置溢出隐藏*//* background-color: #fff; */transition: height 0.5s;
}
.nav-layout-extended {height: 200px;
}移动端媒体查询策略从小到大
/* 576px 768px 992px 1200px */
.course-item {width: 100%;
}
@media (min-width: 576px) {.course-item {width: 50%;}
}
@media (min-width: 768px) {.course-item {width: 33.333333%;}.header-toggle {display: none;}.nav-layout {/* 改为默认样式即可 不需要绝对定位 */position: static;height: auto;}.nav-list {display: flex;/* 从右往左排列 */justify-content: flex-end;}
}
@media (min-width: 992px) {.course-item {width: 25%;}
}
@media (min-width: 1200px) {.course-item {width: 16.666667%;}
}
Grid网格布局
Grid容器的属性
grid-template-rows 定义每一行的行高(可以给网格线起名字)：[r1] 150px [r2] 150px [r3] 150px [r4] 150px
grid-template-columns 定义每一列的列宽(可以给网格线起名字)：[c1] 150px [c2] 150px [c3] 150px [c4] 150px
上面2个属性取值可以是：百分比 fr份数(片段) auto(先于fr计算，获取必要的最小空间) repeat(4,25%) minmax(150px,300px)
grid-auto-flow: row/column 先填满第一行再填满第二行
grid-auto-rows 定义浏览器自动创建的多余空格的行高
grid-auto-columns 定义浏览器自动创建的多余空格的列宽
gap/row-gap/column-grap 行/列间距
grid-template-areas 定义区域（可以给每个区域的起始网格线命名 区域名-start 终止网格线命名 区域名-end）
align-items 垂直对齐 justify-items 水平对齐 place-items 前两者的合并
属性值可以是 start对齐单元格的起始边缘 end对齐单元格的结束边缘 (项目不一定总是铺满单元格)
align-content 设置整个内容区域的垂直位置（上中下）start end center
justify-content 设置整个内容区域的水平位置（左中右）start end center
属性值space-around 每个项目的两侧间隔相等 space-between 项目与项目间隔相等 space-evenly 前2者结合体
Grid项目的属性
grid-column-start/end 从第几个网格线开始，到第几个网格线结束 number|name|span number
grid-row-start/end 从第几个网格线开始，到第几个网格线结束 number|name|span number
grid-area 指定项目放在哪个区域/位置 区域名|左上角到右下角
align-self/justify-self/place-self针对单个项目
圣杯布局
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>圣杯布局</title><style>* {padding: 0;margin: 0;}body {/* display: flex;flex-direction: column; */display: grid;grid-template-rows: 80px 1fr 80px;/* grid-template-columns: 100%; */grid-template-columns: 200px auto 200px;grid-template-areas:'header header header''nav main sidebar''footer footer footer';height: 100vh;font-size: 24px;}.header-layout,.footer-layout {height: 80px;}.header-layout {background-color: red;grid-area: header;}.footer-layout {background-color: yellow;grid-area: footer;}.body-layout {/* flex-grow: 1;display: flex; */display: grid;grid-template-columns: 200px auto 200px;grid-template-rows: 100%;grid-template-areas: 'nav main sidebar';}.main-layout {/* flex-grow: 1; */background-color: gray;grid-area: main;}.nav-layout {/* width: 200px; */background-color: green;/* grid-column-start: 1;grid-column-end: 2;grid-row-start: 1;grid-row-end: 2; *//* order: -1; */grid-area: nav;}.aside-layout {/* width: 200px; */background-color: lightblue;grid-area: sidebar;}/* 垂直水平居中 *//* .flex-center {display: flex;justify-content: center;align-items: center;} */.grid-center {display: grid;justify-items: center;align-items: center;}</style></head><body><header class="header-layout grid-center">头部</header><!-- <div class="body-layout"> --><main class="main-layout grid-center">主体部分</main><nav class="nav-layout grid-center">导航</nav><aside class="aside-layout grid-center">侧栏</aside><!-- </div> --><footer class="footer-layout grid-center">底部</footer></body>
</html>