来到重点-flex布局
首先了解一下移动端的特点
pc端和移动端的不同
PC端
- 屏幕大,网页固定版心
- 浏览器繁多,更多考虑兼容性问题。(布局: 浮动+定位+标准流)
移动端
- 手机屏幕小,网页宽度多数为100%,是适配手机屏幕宽度
- 移动端则基本不需要考虑兼容性问题,可以放心大胆使用CSS新特性
物理分辨率和逻辑分辨率
- 物理分辨率:硬件所支持的,屏幕出厂就设定无法修改
- 逻辑分辨率:软件可以达到的, 我们开发中写的是逻辑分辨率
视口
视口的分类:
- 布局视口 。 iOS, Android基本都将这个视口分辨率设置为980px。
2. 视觉视口。用户正在看到的网站的区域
3. 理想视口。 设备有多宽,我的网页就显示有多宽
视口标签
有了视口标签,可以达到我们想要的理想视口。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
- width=device-width:视口宽度=设备宽度
- initial-scale=1.0:初始页面缩放倍数
- maximum-scale=1.0 最大缩放倍数
- user-scalable=0 不允许用户缩放页面(移动端) 或者为 no 如果为 yes 则允许用户缩放
百分比布局
百分比布局, 也叫流式布局
百分比布局特点:宽度自适应,高度固定。
来到重点flex布局
flex布局
flex布局极大的提高了我们布局的效率,更简单、灵活。
display: flex; 一定要给亲爸爸加。
弹性盒子换行
特性: 给父亲添加了
display: flex;
所有的子盒子(弹性盒子)都会在一行显示,不会自动换行。
弹性盒子换行显示 :给父元素添加
flex-wrap: wrap;
对齐方式
主轴的对齐方式
属性值 | 作用 |
---|---|
flex-start | 默认值, 起点开始依次排列 |
flex-end | 终点开始依次排列 |
center |
沿主轴居中排列 |
space-around |
弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧 |
space-between |
弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间 |
space-evenly |
弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等 |
记忆方法:
两侧没缝隙是 between
缝隙一样大是 evenly
2倍缝隙是 around
侧轴对齐方式
属性值 | 作用 |
---|---|
flex-start | 起点开始依次排列 |
flex-end | 终点开始依次排列 |
center |
沿侧轴居中排列 |
stretch | 默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器 |
重点记住center ,可以让元素垂直居中。
align-items: center;
设置主轴方向
主轴默认是水平方向, 侧轴默认是垂直方向
修改主轴方向属性: flex-direction
属性值 | 作用 |
---|---|
row |
行, 水平(默认值) |
column |
列, 垂直 |
row-reverse | 行, 从右向左 |
column-reverse | 列, 从下向上 |
语法:
flex-direction:column;
修改完毕,主轴是Y轴, 侧轴是X轴。
伸缩比
把父盒子分为若干份数,每个子盒子各占几份。
flex:1; 一定给子盒子加
语法:
flex: 1;
比如有一个父盒子里面有三个子盒子,每个子盒子写 flex:1; 此时每个子盒子各占三分之一。
.father {
display: flex;
height: 300px;
background-color: pink;
}
.father div {
/* 每个孩子各占1份 */
flex: 1;
/* 默认子盒子和父亲一样高 */
background: purple;
}
一定要给子盒子添加。
子盒子默认高度会和父盒子一样高。
圣杯布局
所谓的圣杯布局就是左右两边大小固定不变,中间宽度自适应。
一般这种布局方式适用于各种移动端顶部搜索部分,这是最常见的,如京东手机版主页面顶部搜索
核心思路:
- 两侧盒子写固定大小
- 中间盒子 flex: 1; 占满剩余空间
.top {
display: flex;
justify-content: center;
}
.top div:first-child {
width: 50px;
height: 50px;
background-color: red;
}
.top div:last-child {
width: 50px;
height: 50px;
background-color: red;
}
.top div:nth-child(2) {
flex: 1;
height: 50px;
background-color: pink;
}
注意:中间flex: 1; 和 width 有冲突。 优先执行 flex:1;
小结
-
在flex眼中,标签不再分类。
- 简单说就是没有块级元素,行内元素和行内块元素
- 任何一个元素都可以直接给宽度和高度一行显示
-
Flex不存在脱标的情况:也就是基本淘汰了浮动,更不用清除浮动
-
当然存在兼容性问题,如果不考虑兼容性可以大量使用,如果是移动端则不用考虑直接flex
https://caniuse.com/ 可以查看兼容性
适配方式(rem) (vw/wh)
rem
rem 是一个相对单位,1rem 就是 html 文字的大小
比如
/* 根html 为 12px */
html {
font-size: 12px;
}
/* 此时 div 的字体大小就是 24px */
div {
font-size: 2rem;
}
rem的优势:父元素文字大小可能不一致, 但是整个页面只有一个html,可以很好来控制整个页面的元素大小。
则此时 1rem 就是 12px。
媒体查询(了解)
媒体查询 media query 可以自动检测视口的宽度。
媒体查询一个非常大的作用是:根据屏幕宽度修改html文字大小
。
使用媒体查询, 根据不同的视口宽度, 设置不同的根字号 ,就完成了适配
语法:
@media (width:375px) {
html {
font-size: 40px;
}
}
@media (width:320px) {
html {
font-size: 30px;
}
}
综合:
<div class="box"></div>
/* 需求: iphone 678 375px html文字大小为 12*/
@media (width:375px) {
html {
font-size: 12px;
/*font-size: 37.5px; */
}
}
/* 需求: iphone 678 x 414 html文字大小为 16 */
@media (width:414px) {
html {
font-size: 16px;
/* font-size: 41.4px;*/
}
}
/* 思考一下,如果414屏幕下,一个盒子宽度沾满屏幕,高度和宽度一样大 414*414。
思考一下,如果375屏幕下,一个盒子宽度沾满屏幕,高度和宽度一样大 375 * 375。
html文字大小设置为多少? */
.box {
width: 10rem;
height: 10rem;
background-color: pink;
}
/*目前rem布局方案中,将网页等分成10份, HTML标签的字号为视口宽度的 1/10 */
通过媒体查询,检测不同的视口宽度,设定不同的html文字大小,元素设置rem单位后,可以达到元素适配效果
flexible.js
媒体查询写起来超级麻烦,而且检测不够精确,因此我们使用 flexible.js 这个 js文件,通过js 实时检测屏幕窗口的变化实现检测视口宽度。
这个也是值得提倡使用的一种方式。
有了这个js文件,可以帮我们自动检测屏幕宽度,自动修改html文字大小,这样就可以让盒子配合rem完成适配。
<div class="box"></div>
<div class="box2"></div>
<!-- 引入flexible.js 文件 检测屏幕大小, 修改html文字大小 这个js都做了 -->
<!-- 屏幕分成10等份,每一份是 37.5 px 也就是 1rem = 37.5px; -->
<!-- 我有一个 375px 的盒子,那么写 rem 是多少? 375px / 37.5px = 10rem -->
<!-- 我需要一个 75*75px 一个盒子,那么需要 75 / 37.5 = 2 rem? -->
<script src="./js/flexible.js"></script>
.box {
width: 10rem;
height: 10rem;
background-color: pink;
}
.box2 {
width: 0.8rem;
height: 0.8rem;
background-color: skyblue;
}
如何把设计稿的px转换为rem
问题:
-
flexible 能够修改html文字大小,修改文字大小: 当前屏幕 / 10 就是文字大小
例如: 当前屏幕 375px,则加了 flexible之后,html文字大小为 37.5px
-
我们的设计稿里面元素大小是固定的吗?
是 , 而是 px 单位 ,但是我们开发的时候,要使用 rem 才能适配。
-
那怎么把我们测量的px 转换为适配的rem呢?
直接使用测量的px值 / 37.5 就是 rem的值
LESS
less 可以帮我们把px单位转换到rem单位。
Less是一个CSS预处理器, Less文件后缀是.less
扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
Less插件:Easy Less(less文件保存自动生成css
文件)
小结
我们的需求的是要做移动端适配: 页面中的元素尺寸跟随屏幕宽度等比例缩放(适当调整大小)
方案如下:
flex + rem + flexiable.js + less
-
我们移动端采取
flex 布局
。 -
rem单位: 做移动端
适配
的。- rem相对单位,跟html文字大小有关系
-
媒体查询:
检测屏幕的视口宽度
-
flexiable.js :
可以根据屏幕的宽度自动修改html文字大小
-
less:
less让我们的css具有了计算能力
- less 可以让我们很方便的 把 px 转换为 rem
vw
vw就是视口的宽度,vw 是个相对单位。
不管在什么屏幕下, 我们把屏幕分为平均的 100等份。
1vw = 1 / 100 屏幕的宽度
1vw 和 1%
widith: 1vw;
width: 1%;
vw 和 1% 有没有区别:
- vw 永远是以视口的宽度为准。· 在 375设计稿下, 1vw 永远是 3.75px
- 百分比以父盒子为准。 假如父盒子是 200px,则 1% 是 2px
px 如何转为vw
我们设计稿是 iphone 678 是 375px, vw 把屏幕划分了100等份, 则 1vw = 3.75 px
有个盒子啊,我测量了下,他的宽度是 3.75px * 3.75px ,则 写成 vw 是多少? 1vw * 1vw
又一个盒子,宽度和高度分别是 37.5px 和 37.5px ,则 转换为vw 是多少? 10vw * 10vw
有一个盒子 68px * 29px ,则我们写代码 less vw ?
width: (68 / 3.75vw);
height: (29 / 3.75vw);