视频链接：https://www.bilibili.com/video/BV14J4114768?p=390
栅格
链接：https://blog.csdn.net/z591391960/article/details/106085275
- 将页面栅格化，一般将水平划分为12列，根据媒体查询监听缩放，决定元素占用几列
- container提供容器
- row是为了清除浮动
实现方式：
- 利用float：left属性，控制子元素的浮动、挤压、排列。
- 利用flex布局，实现主轴wrap挤压换行排列
.container {
width: 100%;
margin: 0 auto;
}
/* 写的时候从小到大写，样式优先级问题，如果满足md，就会覆盖sm */
/* xs */
@media (min-width: 576px){
.container{
width: 540px;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12{
float: left;
}
.col-xs-1{
width: 8.333333%;
}
.col-xs-2{
width: 16.666666%;
}
.col-xs-3{
width: 25%;
}
.col-xs-4{
width: 33.333333%;
}
.col-xs-5{
width: 41.666666%;
}
.col-xs-6{
width: 50%;
}
.col-xs-7{
width: 58.333333%;
}
.col-xs-8{
width: 66.666666%;
}
.col-xs-9{
width: 75%;
}
.col-xs-10{
width: 83.333333%;
}
.col-xs-11{
width: 91.666666%;
}
.col-xs-12{
width: 100%;
}
}
/* sm */
@media (min-width: 768px){
.container{
width: 720px;
}
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12{
float: left;
}
.col-sm-1{
width: 8.333333%;
}
...
}
/* md */
@media (min-width: 992px){
.container{
width: 960px;
}
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12{
float: left;
}
.col-md-1{
width: 8.333333%;
}
...
}
/* lg */
@media (min-width: 1200px){
.container{
width: 1140px;
}
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12{
float: left;
}
.col-lg-1{
width: 8.333333%;
}
...
}
.row{
}
//lg
@media screen and (min-width: 1200px) {
#slideshow {
//height: 500px!important;
}
}
//md
@media screen and (max-width: 1200px) and (min-width: 992px) {
#slideshow {
height: 400px !important;
}
}
//sm <=992 >=768
@media screen and (max-width: 992px) and (min-width: 768px) {
#slideshow {
height: 300px !important;
}
}
//xs <=768
@media screen and (max-width: 768px) {
#slideshow {
height: 200px !important;
}
}
基础
meta（@media）
HTML5添加meta
开发者利用meta属性为viewport 去控制适应设备的问题
- ‘width=device-width’ 根据设备去适应宽度
- ‘initial-scale=1’ 网页缩放级别(初始加载时候)
如果网页中不存在这个标签, 整个网页的自适应是不会生效的
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
流式布局（百分比）
继承性
-
1.当符合css默认“继承”的情况下（子元素必须是块级元素且无定位或浮动），是不需要写width属性，就可以默认“继承”的。否则就要特殊声明一下width属性。
-
2.当使用width:100%的时候 也要注意其基准点到底是谁：
– （1）对于使用position:relative的子元素或浮动的子元素,其基准点始终是基于其直接父元素而言的，跟其父元素是否有定位无关。
–（2）对于绝对定位position:absolute的子元素，其基准点是相对于离其最近的一层定位父元素而言。如果其所有父级元素均无定位，则是相对于body而言。
– （3）对于使用position:fixed的子元素，其基准点就是body。跟父元素无关。
flex （重点）
仅支持IE10+
阮一峰教程
语法篇：http://www.ruanyifeng.com/blog/2015/07/flex-
grammar.html
实例篇：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
- Flex容器的子元素称为容器成员，简称项目
- 通过给父盒子添加 flex 属性，来控制子盒子的位置和排列方式
- Flex 可以使行内元素可以设置高度和宽度
属性
flex：块元素
inline-flex：行内块元素
direction 方向
justify 对齐（证明）
wrap 换行（包裹）
align 对齐
stretch 伸展（自动拉伸充满父元素）
evenly 均匀地
around 围绕
between 在...之间
baseline 基线
grow 扩大，扩展，增加
shrink 收缩
总结图
父项
默认flew-flow: row nowrap;
justify-content
- space-between:两端对齐，容器里面项目之间的间隔（缝隙）都相等
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与两侧的间隔大一倍。
flex-wrap
align-items
子项为单行（巧记：items，一行子元素）
align-content
（巧记：content，一坨子元素）
二者区别
子项
子项包括行内元素，行内块元素、块元素。
flex-grow、flex-shrink、flex-basis详解：https://blog.csdn.net/m0_37058714/article/details/80765562
注意：子盒子可以写% ，是相对于父级来说的 flex: 20%; 就是一行排5个子元素，会继承父元素宽高，用在子元素多需要换行，但子元素没有固定宽高的情况，这种情况也常用（此时再单独给子元素设置宽高无效）
- 分配父盒子的剩余空间，用flex来表示占多少份
比如父盒子宽100px，左右各20px，中间的盒子为flex:1，即全占中间全部位置60px
如果中间有两个盒子都是flex:1，则中间两个盒子平分60px
flex
- flex 取值为 none，则计算值为 0 0 auto 宽度为元素width的值
- 非0 1 最后一个值是什么都无所谓了 自动扩大和缩小
- flex取值为 auto，则计算值为 1 1 auto 自动扩大和缩小
- 当 flex 取值为一个长度或百分比，则视为 flex-basis 值，相当于 1 1 长度或百分比
flex-grow
常用：给最后一个子元素加 flex-grow: 数字; 占满父元素剩余的所有空间
flex-shrink
flex-basis
align-self
order
- 默认值为0，可以设置任意整数（正负均可）
- 值越小就余额排在前面
布局思路
左 中 右 各占一份
中 右 里面加两个子盒子，且各占一份
display:flex; 可嵌套使用
.father{
display:flex;
}
.oneself{
flex:1; //oneself
display:flex;
}
.son{
flex:1; //son
}
rem
root em
em 是相对于本元素的字体大小，如果本元素没有设置，则往上找。
PC、手机端自适应
在不同的尺寸下定义根节点的字体大小
:root{
font-size:16px; // 默认大小
}
子盒子元素
1.使用百分比
宽高
2.使用rem，不要使用px
外边距、内边距、字体大小等等
3.使用px
边框
最外边的几个父盒子的宽高可以直接使用px
但其外边距、内边距等等属性最好也使用rem（边框可以直接使用px）
@media
关键字前后要加空格
使用方法
/* 从小到大的顺序写 */
/* max-width 小于等于400时 */
@media screen and (max-width: 400px) {
body {
background-color: pink;
}
}
/* 屏幕 大于等于500 且 小于等于800时 */
@media screen and (min-width: 500px) and (max-width: 800px) {
}
/* max-width 大于等于1000时 */
@media screen and (mix-width: 1000px) {
body {
background-color: purple;
}
}
@media配合rem自适应
元素的宽高用rem作为单位
该单位常用于适配移动端
使用方法
- 1.首先我们选一套标准尺寸750为准
- 2.我们用屏幕尺寸除以我们划分的份数得到了htm1里面的文字大小但是我们知道不同屏幕下得到的文字大小是不一样的
- 3.页面元素的rem值=页面元素在750像素的下px值 / html里面的文字大小
教程：https://www.bilibili.com/video/BV14J4114768?p=453
案例
common
// 设置常见的屏幕尺寸 修改里面的html文字大小
a {
text-decoration: none;
}
// 一定要写到最上面
html {
font-size: 50px;
}
// 我们此次定义的划分的份数 为 15
@no: 15;
// 320
@media screen and (min-width: 320px) {
html {
font-size: 320px / @no;
}
}
// 360
@media screen and (min-width: 360px) {
html {
font-size: 360px / @no;
}
}
// 375 iphone 678
@media screen and (min-width: 375px) {
html {
font-size: 375px / @no;
}
}
// 384
@media screen and (min-width: 384px) {
html {
font-size: 384px / @no;
}
}
// 400
@media screen and (min-width: 400px) {
html {
font-size: 400px / @no;
}
}
// 414
@media screen and (min-width: 414px) {
html {
font-size: 414px / @no;
}
}
// 424
@media screen and (min-width: 424px) {
html {
font-size: 424px / @no;
}
}
// 480
@media screen and (min-width: 480px) {
html {
font-size: 480px / @no;
}
}
// 540
@media screen and (min-width: 540px) {
html {
font-size: 540px / @no;
}
}
// 720
@media screen and (min-width: 720px) {
html {
font-size: 720px / @no;
}
}
// 750
@media screen and (min-width: 750px) {
html {
font-size: 750px / @no;
}
}
index
// 首页的样式less文件
@import "common";
// @import 导入的意思 可以把一个样式文件导入到另外一个样式文件里面
// link 是把一个 样式文件引入到 html页面里面
@baseFont: 50; //html的字体大小
/*
运算 + - * /
注意：两个数参与运算，最后以有单位的为主。两个数都有单位，以前面的单位为准*/
// 高度示例
height: 88rem / @baseFont; //rem为最后结果的单位
响应式开发
1.1 开发原理
1.2 布局容器
.container {
height: 150px;
background-color: pink;
margin: 0 auto;
}
/* 1. 超小屏幕下 小于 768 布局容器的宽度为100%(与浏览器窗口大小一致） */
@media screen and (max-width: 767px) {
.container {
width: 100%;
}
}
/* 2. 小屏幕下 大于等于768 布局容器改为 750px */
@media screen and (min-width: 768px) {
.container {
width: 750px;
}
}
/* 3. 中等屏幕下 大于等于 992px 布局容器修改为 970px */
@media screen and (min-width: 992px) {
.container {
width: 970px;
}
}
/* 4. 大屏幕下 大于等于1200 布局容器修改为 1170 */
@media screen and (min-width: 1200px) {
.container {
width: 1170px;
}
}
响应式导航案例
适配pc端和常见的移动端
一般是最外面的父盒子写死宽高（配合@media改变）
里面的子盒子一般用百分比继承父盒子宽高（全部占满就100%，均分就整除100% / 3 符号之间有空格）——流式布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.container {
width: 750px;
margin: 0 auto;
}
.container ul > li {
width: 93.75px;
float: left;
background-color: green;
}
/* 1. 超小屏幕下 小于 768 布局容器的宽度为100%(与浏览器窗口大小一致） */
@media screen and (max-width: 768px) {
.container {
width: 100%;
}
.container ul > li {
width: 33.33%;// 一行占三个
}
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
</ul>
</div>
</body>
</html>
但这种流式布局基本上已被淘汰，了解即可。
grid
视频教程：https://www.bilibili.com/video/BV1Bk4y197xm
基本概念 ***
基本属性
grid-tempalte-*
grid-tempalte-columns:max-content 1fr; // 第一列为元素自身最大的宽度，第二列占满余下的宽度
从左到右自动填充100px的盒子
1fr 2fr 3fr
网格线
grid-*-gap
grid-template-areas
grid-auto-flow
place-items
和flex布局一样的
grid-auto-cloumns/rows
grid-column/rows-start/end
简写
.item1{
grid-column: 1 / 3; // '/' 分隔开两个参数 这里不是除号
}
grid-area
简写
place-self
